Integration
So einfach binden Sie unsere Buchungsmaschine in Ihre Hotel- oder Unterkunft-Website ein!
Link
Verlinken Sie unser Buchungssystem ganz einfach auf Ihrer Website:
<a href="https://resavio.com/booking/de/{CLIENT_ID}" target="_blank">Online buchen!</a>Für die Buchung einer bestimmten Zimmerkategorie können Sie folgende URL verwenden: https://resavio.com/booking/de/{CLIENT_ID}/category/{CATEGORY_ID}. Die Platzhalter {CLIENT_ID} und {CATEGORY_ID} müssen (inklusive geschweifter Klammern) durch die entsprechenden IDs aus unserem System ersetzt werden.
iFrame
Integrieren Sie unser Buchungstool in einem iFrame in Ihre Seite:
<iframe src="https://resavio.com/booking/de/{CLIENT_ID}" width="100%" height="800" id="resavio-iframe" style="background-color: transparent; border: 0 none transparent; padding: 0; overflow: auto;"></iframe>Indem Sie zusätzlich folgenden JavaScript-Code in Ihre Seite einbinden werden Scrollbalken vermieden:
Eigenes HTML-Formular
Wenn Sie mehr Gestaltungsmöglichkeiten haben möchten, dann können Sie (Programmierkenntnisse vorausgesetzt) auch ein eigenes HTML-Buchungsformular mit An- und Abreisefeld integrieren und völlig frei per CSS gestalten. Folgenden HTML-Code können Sie als Grundgerüst verwenden und nach Ihren Anforderungen anpassen:
Widgets
Eine weitere Variante der Integration unseres Buchungstools sind unsere Widgets. Um unsere Widgets nutzen zu können, fügen Sie zunächst unser Widget-Script vor dem schließenden </body>-Tag Ihrer Website ein. Dabei können sie über das Attribut data-locale die Sprache festlegen.
<script id="resavio-widgets" data-locale="de" src="https://resavio.com/widgets/js/widgets.js"></script>Binden Sie außerdem das zugehörige Stylesheet im <head>-Bereich der Website ein:
<link rel="stylesheet" type="text/css" href="https://resavio.com/widgets/css/widgets.css">Die Farben der Widgets können mittels CSS-Variablen dynamisch angepasst werden:
Unsere Widgets können anschließend an der gewünschten Stelle auf Ihrer Website eingefügt werden.
Für ein Buchungsformular mit Datepicker verwenden Sie folgenden Code:
<resavio-form client="1" layout="horizontal"></resavio-form>Über das Attribut client wird Ihre Kundennummer übergeben. Sie können zwischen zwei Layout-Varianten wählen: horizontal | vertical.
Für eine fix am unteren Bildschirmrand positionierte Buchungsleiste verwenden Sie folgendes Widget:
<resavio-sticky-bar client="1"></resavio-sticky-bar>