Hotel Websiten Integration des igumbi Online Buchungstools
Wie baut man das igumbi Online Buchungstool (OBT) in eine Hotel Website ein?
Ausgangslage
Sie haben eine Hotel Website - mit statischen HTML gebaut oder mit einem Content Management System (CMS) dynamisch verwaltet - und wollen das igumbi Online Buchungstool einbauen?
Wenn Sie ein Content Management System CMS (z.B. Typo, Typo3, Wordpress, Drupal, Joomla, u.v.a.) verwenden, dann ist es Ihr Ziel 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.
Sie werden das online Buchungstool dem Look-and-Feel der Webseite, also die Buttons, die Farben & die Breite an Ihr Styling anpassen wollen.
Typische Änderungen sind:
- Button: Farben & Formen, Rahmen, Hover-Verhalten
- Fonts und Schriftarten festlegen
- Hintergrundfarbe & Schriftfarbe ändern
- Breite des Anfragefensters anpassen
- Breite des Antwort Dialogs anpassen
Änderungen an den CSS Definitionen können in einem kundenspezifischen CSS Feld eingepflegt werden. Dafür bekommen Sie als Agentur ein gesondertes Login, mit Zugang zu einem Formular. Dort können Sie den CSS Inhalt der die bestehenden CSS Definitionen überschreiben. Es gibt auch die Option das horizontale Layout für das Anfragefenster zu wählen.
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 Tool 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. Auch muss man nicht mit der Höhe und Breite des Dialogs herum tricksen.
Wir wollen dass es keine Konflikte mit den von Ihnen verwendeten Javascript Frameworks wie jQuery, Mootools, Prototype, und anderen gibt. Falls Ihnen Konflikte auffallen wären wir recht dankbar über die Info, damit wir es fixen können. Die generierten Javascript Files sollen sehr klein sein um sehr schnell zu laden. Damit eignet sich das igumbi Online Buchungstool sehr gut für den Einsatz in einer Mobilen Hotel Website oder Mobile Webapp für Hotels.
Was ist zu tun?
Fügen Sie diesen HTML Code in Ihre Seiten und Templates 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. In Kontext dieser Seite ist es das igumbi Demo Hotel das dahinter steht. Zugang zur Demo gibt es hier.
?test=true
Damit stellen Sie sicher, dass Sie mit der CSS Test/Development Version arbeiten. Für die Produktivsetzung entfernen Sie bitte diesen Anhang. Dann ist es nur mehr:
<script src="https://www.igumbi.net/seller/bcb0c0/start.js"></script>
Horizontales Layout mit Parameter aufrufen
Man kann auch den horizontalen Modus der Anfrage Maske mit der Übergabe eines Parameters aktivieren.
<script src="https://www.igumbi.net/seller/bcb0c0/start.js?layout=wide"></script>
Weitere Sprachen
Um das online Buchungstool in anderen Sprachen einzufügen: Hier in Englisch, Griechisch, Slowenisch oder in Italienisch. (en, gr, sl, it, es, ru)
<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/es/start.js"></script>
<script src="https://www.igumbi.net/seller/bcb0c0/ru/start.js"></script>
CSS Ändern
Zum modifizieren des CSS bitte einloggen. 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.
Mittels Safari oder Chrome Webinspector oder Firebug im Firefox identifizieren Sie jene Elemente deren Style Sie überschreiben wollen. Ihre Anweisungen schreiben Sie einfach in das CSS Feld des Web Formulars 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 & Entwicklung. Im unteren Feld sehen Sie die Definitionen die derzeit produktiv sind. Damit 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-abschliessen" verwenden, so sprechen Sie dies mit Ihrem Hotel-Kunden ab. Verwenden Sie entweder einen Zeitraum der weiter in der Zukunft liegt oder einen einfach zu erkennenden Namen, oder Kommentar. Die abgeschlossenen Buchungen reduzieren die verkaufbaren Zimmer für die gebuchten Termine.
Ihre Änderungen Produktiv setzen
Wenn Sie mit Ihren Änderungen zufrieden sind, bitte um ein kurzes 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 jeden Fall offen und dankbar für Ihr Feedback.
Author: Roland Oth. Ich bin zu finden auf Twitter als @smtm, Roland Oth G+ und als roland.oth auf Facebook
