Integration des igumbi Online Buchungstools in die Hotel-Website

Testen Sie igumbi kostenlos für 30 Tage. Eine Kreditkarte ist nicht erforderlich.

Wie baut man das igumbi Online Buchungstool (OBT) in eine Hotel-Website ein? Funktioniert das auch mit WordPress oder Joomla! oder einem online CMS wie Jimdo?

Einstieg in das igumbi online Buchungstool / online Buchungssystem, IBE, Hotelreservierungssystem

Ausgangslage

Sie haben eine Hotel-Website, gebaut mit statischen HTML oder dynamisch verwaltet mit einem Content Management System (CMS), und wollen das igumbi Online Buchungstool einbauen? Wenn Sie ein Content Management System (z.B. Typo, Typo3, WordPress, Drupal, Joomla!, u.v.a.) verwenden, ist es vermutlich Ihr Wunsch, den Einstieg in das online Buchungstool auf (fast) jeder Seite anzubieten, auch auf der Startseite. Daher sollte die Integration in das Website-Template eingearbeitet werden.

WordPress und Joomla!

Für WordPress gibt es ein Plugin, in dem die hier beschriebenen Funktionen beinhaltet sind.

Für Joomla! gibt es ein Package mit einem Modul und einem Plugin für die einfache Integration des Buchungstools.

Anpassen des Stils

Damit das Buchungstool aussieht wie ein Teil der Website und sich gut integriert, können Sie es dem Stil der Website anpassen.

Typische Änderungen sind:

  • Button: Farben und Formen, Rahmen, Hover-Verhalten, abgerundete Ecken
  • Fonts und Schriftarten
  • Hintergrundfarbe und Schriftfarbe ändern
  • Breite des Anfragefensters anpassen
  • Breite des Antwortdialogs anpassen

Designer-Login

Änderungen an den CSS Definitionen können in einem kundenspezifischen CSS Feld eingepflegt werden. Dafür bekommen Sie als Agentur ein eigenes Login mit Zugang zu einem Formular für die CSS Änderungen. Dort können Sie den Inhalt der bestehenden CSS Definitionen überschreiben.

Hier gibt es auch die Option eines horizontalen Layouts für das Anfragefenster.

horizontales Anfragefenster im igumbi Online Buchungstool für Websites mit wenig horizontalem Platz. Für provisionsfreie Direktbuchungen von ihrer Hotel Website. Online Buchungssystem

Technischer Hintergrund

Das igumbi Online Buchungstool ist ein Javascript Widget. Es bringt alles mit, was zur Ausführung auf der Hotel Homepage benötigt wird. Der Datepicker verwendet jQuery, welches das Buchungstool auch mitbringt. Das Snippet bettet sich im DOM der Hotelwebsite ein. Es ist kein iframe Script. Das hat den Vorteil, dass die Hotelwebsite auch im SSL Modus betrieben werden kann. es empfiehlt sich, mit der Höhe und Breite des Dialogs zu spielen, vor allem wenn die Produktlisten länger oder kürzer ausfallen.

Wir wollen, dass es keine Konflikte mit den von Ihnen verwendeten Javascript Frameworks wie jQuery, Prototype oder anderen auftreten. Falls Sie mit Konflikten konfrontiert werden, wären wir sehr dankbar über eine Benachrichtigung, damit wir diese fixen können. Die generierten Javascript Files sollen sehr klein sein, um möglichst schnell zu laden. Damit eignet sich das igumbi Online Buchungstool ausgezeichnet für den Einsatz in einer Mobilen Hotel Website.

Buchungstool in eine HTML Seite einbetten

Fügen Sie diesen HTML Code in Ihre Seiten/ Website Template ein:

<div id="avform"></div>  

<div id = "free_rooms"></div>
<!-- die DIVs können an unterschiedlichen Orten im Dokument/Template platziert sein. -->    

<!--Das Script für das online Buchungstool am Ende der Seite einbauen, vor dem </body> tag, jedoch vor etwaigen Analytics aufrufen. -->  
<script src="https://www.igumbi.net/seller/bcb0c0/start.js?test=true"></script>

Die Buchstabensequenz

bcb0c0

ist die Kennung für das Hotel. Im Kontext dieser Seite handelt es sich um das igumbi Demohotel, das dahinter steht. Einen Zugang zur Demo gibt es hier.

?test=true

Hiermit stellen Sie sicher, dass Sie mit der CSS Test/ Development Version arbeiten. Für die Produktivsetzung entfernen Sie bitte den ""?test=true" - Parameter im URL.

Danach sieht das Skript-Tag wie folgt aus:

<script src="https://www.igumbi.net/seller/bcb0c0/start.js"></script>

Horizontales Layout mit Parameter aufrufen

Man kann auch den horizontalen Modus der Anfragemaske mit der Übergabe eines Parameters im URL aktivieren.

<script src="https://www.igumbi.net/seller/bcb0c0/start.js?layout=wide"></script>

Buchungstool in ein Responsives Layout einbauen

Um das Buchungstool in ein responsives Layout (optimiert für den mobilen Zugriff mit Smartphones wie iPhones, Android bzw. für den Zugriff mit Tablets wie iPads) einzubauen, kann das Hotel Buchungstool ohne CSS Deklarationen aufgerufen werden.

<script src="https://www.igumbi.net/seller/bcb0c0/start.js?responsive=true"></script>

Wenn die CSS-Überschreibungen, wie die Farben der Buttons, aus dem igumbi Backend mitgenommen werden sollen, kann der Parameter customcss=true übergeben werden.

<script src="https://www.igumbi.net/seller/bcb0c0/start.js?responsive=true&customcss=true"></script>

Es kann auch der Test-Parameter übergeben werden. Das ist praktisch, wenn schon eine Version des Buchungstool auf der Website läuft und die Styling-Anpassungen gerade erst für ein neues Site Template aufgebaut und getestet werden sollen.

<script src="https://www.igumbi.net/seller/bcb0c0/start.js?responsive=true&customcss=true&test=true"></script>

Beispiele

Hier gibt es gibt eine responsive Bootstrap Demoseite, die mit Bootstrap 3.3.7 (Jan 2017) gemacht wurde.

Hier gibt es eine responsive Skeleton Demoseite, die mit einer einfachen responsiven Vorlage gemacht wurde: Skeleton 2.0.4.

Anpassungen

Einige der Anpassungen im Styling müssen von Grund auf aufgebaut werden.

Hier die Links zu den unkomprimierten Stylesheets (zum Copy & Pasten):

Verfügbarkeit nur für eine Produktkategorie mit Parameter aufrufen

Will man das Buchungstool auf einer Unterseite einbauen, auf der spezifisch ein Apartment/ Zimmertyp beschrieben ist und auf der die Verfügbarkeit nur für diese Produktkategorie ausgegeben werden soll, so kann man an den Aufruf des Buchungstools den Parameter "productcategory_id=3344 anhängen.

Die 3-5 stellige Nummer "productcategory_id" findet man im URL der einzelnen Prodktkategorie in der Produktkategorieliste

<script src="https://www.igumbi.net/seller/bcb0c0/start.js?productcategory_id=3344"></script>

Das Buchungstool zeigt dann, wenn Zimmer vorhanden sind, nur die Verfügbarkeit für die gewählte Produktkategorie an. Falls der Zeitraum ausgebucht ist, antwortet das System mit der "alternativen Verfügbarkeit". Es werden der angefragte Zeitraum und die offenen Termine (+/- 10 Tage) rund um den angefragten Termin dargestellt.

Weitere Sprachen

Um das online Buchungstool in einer anderen Sprache als Deutsch in die Website einzufügen, wird eine "language flag" ("de","en",...) verwendet: Hier sieht man das Buchungstool in unterschiedlichen Sprachen in Aktion:

Hier der JavaScript Aufruf mit dem jeweiligen "language flag":

<script src="https://www.igumbi.net/seller/bcb0c0/en/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/gr/start.js"></script>  
<script src="https://www.igumbi.net/seller/bcb0c0/sl/start.js"></script>  
<script src="https://www.igumbi.net/seller/bcb0c0/it/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/nl/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/es/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/ru/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/cz/start.js"></script>

Informelle Anrede im Deutschen: Duzen

Die Deutsche Version gibt es auch mit der Ansprache per Du. Damit können die Gäste geduzt werden. Das kann für jüngere Zielgruppen wie die von Hostels, Hütten, oder Betrieben, die im skandinavischem Raum vermarkten, interessant sein.

<script src="https://www.igumbi.net/seller/bcb0c0/de_du/start.js"></script>

Stil anpassen: CSS Ändern

Zum Modifizieren des CSS loggen Sie sich ein. Sie haben dort, wenn Sie ein Designer-Login für Ihren Hotel-Kunden bekommen haben, den Zugriff auf das Webformular, in dem Sie Ihre CSS Änderungen eintragen können.

"Designer edit": Zugang für den Webdesigner um das CSS für das online Buchungstool anzupassen #online #buchungssystem #hotel #website #agentur #designer

Mittels Safari oder Chrome Webinspector oder im Firefox Firebug identifizieren Sie jene Elemente, deren Style Sie überschreiben wollen. Ihre Anweisungen schreiben Sie einfach in das CSS Feld des Webformulars und überprüfen, ob sich der gewünschte Effekt eingestellt hat.
Sie können dafür mit Ihren lokalen Entwicklungs-Templates arbeiten.

Es gibt zwei Felder im CSS Formular. Das obere Feld ist das Feld für Ihre Tests und Entwicklung. Im unteren Feld sehen Sie die Definitionen, die derzeit produktiv sind. So kann der Hotel Buchungsbetrieb weiterlaufen während Sie am Design arbeiten.

Bitte bedenken Sie, dass das eigentliche Buchungssystem ein live System ist. Wenn Sie den Button "Buchungen abschließen" verwenden, so sprechen Sie dies mit Ihrem Hotel-Kunden ab. Verwenden Sie entweder einen Zeitraum, der weiter in der Zukunft liegt und/ oder versehen Sie die Buchungen mit einen einfach zu erkennenden Namen oder Kommentar. Die abgeschlossenen Buchungen reduzieren die verkaufbaren Zimmer für die gebuchten Termine. Ihre Testbuchungen sollten am Ende gelöscht werden.

Optionen und Einstellungen für das Buchungstool

Es gibt etliche Optionen zur Anpassung des Verhaltens des Buchungstools. Damit können die kaufmännischen und operationellen Gegebenheiten des Betriebes abgebildet werden.

Wir aktivieren diese Optionen gerne für Sie. Bitte kontaktieren Sie uns:

Einstellungen zur Angebotsdarstellung:

  • Anzahl der Zimmer wird ausgeblendet - Für Hotels mit nur einem Zimmer (Hütten, Ferienhaus).
  • Im Buchungstool und beim Anlegen einer Reservierung nur Angebote mit abgeleiteten Preisen (Rateplans) anzeigen. Das Grundangebot wird unterdrückt.
  • Der Durchschnittspreis wird in der Angebotsdarstellung nicht angezeigt.
  • Zusatzprodukte/ Extras (Produktkategorie 'other') werden im Buchungstool angeboten. Das Layout der Angebotsseite ändert sich.
  • Zusatzprodukte/ Extras werden unterhalb (statt oberhalb) des Zimmerangebots dargestellt.
  • Minuten am Tag der Anreise, ab dem Buchungen im Buchungstool nicht mehr möglich sind: z.B.: 450 für 07:30 (450/60 Minuten) am Tag der Anreise, 1050 für 17:30. Es erscheint die Meldung: "Für dieses Anreise-Datum kann nicht mehr gebucht werden."
  • Die Meldung "nur mehr x Zimmer verfügbar" wird unterdrückt. Dies ist sinnvoll, wenn die Produktkategorien auch den Zimmern/ Apartments entsprechen und diese Meldung fast immer erscheinen würde.
  • Discountcodes/ Rabattcodes können angeboten werden

Einstellungen für das Buchungsformular

Einstellungen für das Formular zur Eingabe der Personendaten mit dem Button zum Buchen.

  • Ankunftszeiten werden nicht abgefragt.
  • Anreiseart (Auto, Bahn, Fahrrad) wird nicht abgefragt.
  • Erweiterte Pflichtfelder bei den Personendaten (Straße, PLZ und Ort)
  • Am Buchungsbutton steht "zahlungspflichtig buchen" - Button-Lösung
  • Anrede Auswahlfeld mit Herr/ Frau im Buchungsformular. Das Geschlecht wird anhand der Anrede ermittelt und für die geschlechtsspezifische Anrede (Sehr geehrte Frau/ Sehr geehrter Herr) verwendet.

Zahlungsoptionen:

  • Stripe kann als Kreditkartenzahlungsanbieter verwendet werden. Damit kann die Karte automatisch im Rahmen der Buchung belastet werden.
  • Die Abfrage der Kreditkartendaten ist optional. Es muss ein Anzahlungsprozentsatz im Hotelstammdatensatz eintragen werden, sonst wird gar keine Zahlungsoption gezeigt.
  • Die Kreditkarteneingabe kann deaktiviert werden.
  • Der Zahlungsbereich kann gänzlich ausgeblendet werden.

Links für Angebote und Specials

Des weiteren ist es möglich im Text Ihrer Webseite Links zu erstellen, die im Buchungstool ein Von-Datum/ Bis-Datum/ Zimmer/ Personen eintragen und eine Verfügbarkeitsabfrage starten. Das ist besonders für Unterseiten auf Ihrer Website interessant, die Angebote, Pauschalen oder Specials anbieten.

Mit dieser Form des Link Tags können Specials in Ihren HTML Seiten angekündigt werden. Das Buchungstool muss auf der Seite eingebunden sein. Innerhalb des "a" Tags z.B.

onclick='Obt.setspecial('5.12.2018','8.12.2018',1,2)

Hier ein Beispiel eines Links für das Angebot eines Specials im Dezember:

<a href="#" onclick="Obt.setspecial('5.12.2018','8.12.2018',1,2);">
Advent Special 3N/2P 5.12-8.12.2018</a>

Änderungen produktiv setzen

Wenn Sie mit Ihren Änderungen zufrieden sind, bitte senden Sie eine kurze E-Mail an Roland Oth. Die Änderungen werden dann produktiv gesetzt.

Gutes Gelingen beim Anpassen des igumbi Online Buchungstools an Ihr Layout.

Wir sind auf offen und dankbar für Ihre Meinung.

Author: , igumbi.com . Ich bin auf twitter zu finden: @smtm, und als roland.oth auf Facebook

Jetzt unverbindlich probieren!

Testen Sie igumbi für 30 Tage. Eine Kreditkarte ist nicht erforderlich.


Tags

obt Website support Direktbuchung

Cookies helfen uns bei der Bereitstellung unserer Dienste. Durch die Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies setzen. Datenschutzerklärung & Cookies