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>

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>