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/{LANGUAGE}/{CLIENT_ID}" target="_blank">Online buchen!</a>Die Platzhalter {LANGUAGE} und {CLIENT_ID} müssen (inklusive geschweifter Klammern) durch das Sprachkürzel (z.B. de = Deutsch, en = Englisch) bzw. die ID der Unterkunft ersetzt werden.
Landingpages
Alle verfügbaren Angebote in einem Zeitraum anzeigen:
https://resavio.com/booking/de/{CLIENT_ID}/offers?checkin={YYYY-MM-DD}&checkout={YYYY-MM-DD}&adults={ADULTS}
Buchung einer bestimmten Zimmerkategorie:
https://resavio.com/booking/de/{CLIENT_ID}/categories/{CATEGORY_ID}
Arrangement-Direktbuchung:
https://resavio.com/booking/de/{CLIENT_ID}/arrangements/{ARRANGEMENT_ID}
iFrame
Integrieren Sie unser Buchungstool in einem iFrame in Ihre Seite:
<iframe src="https://resavio.com/booking/de/{CLIENT_ID}" width="100%" 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:
<script src="https://resavio.com/widgets/js/no-scrollbars.js"></script>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>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: