Integration-Guide

So (einfach) binden Sie RESAVIO in Ihre Website ein

Sie können aus unterschiedlichen Arten der Integration wählen, die nachfolgend beschrieben sind. Bitte ersetzen Sie jeweils den Platzhalter {XY} durch Ihre RESAVIO-Kundennummer.

Die einfachste Variante, um RESAVIO in Ihre Website einzubinden, ist ein Link oder ein Button, der auf folgende URL verweist:
https://resavio.net/book/index.php?hotel_id={XY}&reset

<a href="https://resavio.net/book/index.php?hotel_id={XY}&amp;reset" target="_blank">Online buchen!</a>

 

PopUp

Den Link können Sie auch in einem PopUp öffnen. Dazu binden Sie in Ihre Seite folgenden JavaScript-Code ein:

<script type="text/javascript">
function popItUp (url) {
  newPopUp = window.open(url, "_blank", "width=800,height=600,scrollbars=yes,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes,dependent=no");
  newPopUp.focus();
  return false;
}
</script>

Verwenden Sie außerdem folgenden Link:

<a href="https://resavio.net/book/index.php?hotel_id={XY}&amp;reset" target="_blank" onclick="popItUp(this.href); return false">Online buchen!</a>

 

iFrame

Eine weitere Möglichkeit ist, RESAVIO in einem iFrame einzubinden. Bitte beachten Sie hier jedoch, dass Gäste, die Ihre Seite mit einem mobilen Gerät besuchen, die entsprechend optimierte Buchungsmaske im iFrame angezeigt bekommen. Um dies zu unterdrücken, können Sie die Variable set_device=desktop an die URL anhängen. Sie sollten dann bereits auf der übergeordneten Website zwischen Desktop- und Mobilgeräten unterscheiden. Beispielcode:

<iframe src="https://resavio.net/book/index.php?hotel_id={XY}&amp;reset&amp;set_device=desktop" width="100%" height="600" id="resavio" style="background-color: transparent; border: 0 none transparent; padding: 0; overflow: auto;"></iframe>

Es bietet es sich außerdem an, folgenden JavaScript-Code in Ihre Seite einzubinden, welcher die Höhe des iFrames automatisch an dessen Inhalt anpasst. So vermeiden Sie Scrollbalken und RESAVIO integriert sich nahtlos in Ihre Website.

<script type="text/javascript">
(function(window, document, undefined) {
  'use strict';
  var loaded = false;
  function handleMessage(e) {
    if (e.data.action === 'RESIZE') {
      var targetHeight = e.data.height;
      var iFrame = document.getElementById('resavio');
      iFrame.style.height = targetHeight + 'px';
      if (loaded) {
        var yPosition = window.scrollY + iFrame.getBoundingClientRect().top;
        window.scrollTo(0, yPosition);
      } else {
        loaded = true;
      }
    }
  }
  window.addEventListener('message', handleMessage, false);
})(window, document);
</script>

 

Das Buchungsformular

Alternativ können Sie auch nur ein Buchungsformular mit Datumsauswahl in Ihre Seite integrieren. Hierzu binden Sie die URL https://resavio.net/book/form.php?hotel_id={XY} per iFrame in Ihre Seite ein. Optional können Sie noch eine Sprache (&lang) und eine Ausrichtung der Formularfelder (horizontal oder vertikal - &orientation=h|v) übergeben. Beispiel:

<iframe src="https://resavio.net/book/form.php?hotel_id={XY}&amp;lang=de&amp;orientation=h" width="600" height="300" style="background-color: transparent; border: 0 none transparent; padding: 0; overflow: auto;"></iframe>

Wenn Sie mehr Gestaltungsmöglichkeiten haben möchten, dann können Sie das Formular auch als HTML-Code integrieren und frei per CSS gestalten. Folgenden Code können Sie als Gerüst verwenden und nach Ihren Anforderungen anpassen. Sollten Ihnen die nötigen Kenntnisse hierzu fehlen, übernehmen wir die Anpassung auch gerne für Sie.

<form id="resavio-form" method="post" action="https://resavio.net/book/index.php?hotel_id={XY}&amp;lang=de&amp;reset" target="_blank">
  <input type="text" name="an" id="from" value="">
  <input type="text" name="ab" id="to" value="">
  <input type="number" name="persons" value="2" step="1" min="1" max="10">
  <input type="hidden" name="check_availability" value="true">
  <button type="submit">Absenden</button>
</form>

Bitte achten Sie dabei darauf, dass eine Sprache und das Datum im passenden Format übergeben wird. Wenn Sie die Datumsfelder schon mit einem Datum ausfüllen wollen, dann können Sie das mit JavaScript tun. Im Beispiel wird ein Aufenthalt von heute bis morgen vorgegeben.

<script type="text/javascript">
var td = new Date();
document.getElementById('from').value = td.toString('dd.MM.yyyy');
var tm = new Date(td.getFullYear(),td.getMonth(),td.getDate()+1);
document.getElementById('to').value = tm.toString('dd.MM.yyyy');
</script>

Alternativ mit PHP:

<?php
$today = date('d.m.Y');
$tomorrow = date('d.m.Y', strtotime("+1 day"));
?>

Um die Datumsauswahl für den Gast zu vereinfachen, kann ein Datepicker-Script (z.B. http://jqueryui.com/datepicker) verwendet werden.

Folgendes Script (benötigt das Framework jQuery) öffnet RESAVIO bei Absenden des Formulars in einem PopUp-Fenster:

<script type="text/javascript">
$(function() {
  $('#resavio-form').submit(function() {
      window.open('', 'formpopup', 'width=1024,height=768,resizeable,scrollbars');
      this.target = 'formpopup';
  });
});
</script>

 

Arrangement-Direktbuchung

Wenn Sie Arrangements anbieten, können Sie auf Ihrer Website einen Direktbuchungsbutton integrieren. Bitte ersetzen Sie im untenstehenden Code die Platzhalter {XY} durch Ihre RESAVIO-Kundennummer und {AID} durch die ID des gewünschten Arrangements, welche Sie im Backend finden. Sie können den Code dort auch automatisch generieren lassen.

<iframe src="https://resavio.net/book/arrangements.php?hotel_id={XY}&amp;arrangement_id={AID}" width="400" height="50" style="background-color: transparent; border: 0 none transparent; padding: 0; overflow: auto;"></iframe>

 

Belegungsplan-Buchung

Sie können Ihre Gästen auch direkt aus einem Belegungsplan heraus buchen lassen. Beispiellink:

https://resavio.net/book/calendar.php?hotel_id=1&cid=1&number_of_months=2

Wenn Sie einen bestimmten Monat anzeigen möchten, können Sie zusätzlich die Parameter month und year mit übergeben.

Den Belegungsplan können Sie wiederum einfach verlinken, oder aber auch per iFrame einbinden:

<iframe src="https://resavio.net/book/calendar.php?hotel_id={XY}&amp;cid={CID}" id="resavio" width="100%" height="500" style="background-color: transparent; border: 0 none transparent; padding: 0; overflow: auto;"></iframe>

Bitte ersetzen Sie den Platzhalter {CID} in der URL durch die ID der entsprechenden Zimmer- oder Objektkategorie. Diese finden Sie nach Login im Backend in der Kategorieverwaltung.