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/ CMS (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 Nutzer der Blogging-Software/ CMS gibt es fertige Module und Plugins um die Integration des Buchungstools zu vereinfachen.
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.
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 dieser Code verwendet werden:
<script src="https://www.igumbi.net/seller/bcb0c0/start.js?layout=wide2"></script>
Das Responsive Template ist für Smartphone und Tablet/iPads sowie Desktops optimiert. Es gibt die Möglickeit aus ca. 20 Farbpaletten zu wählen. Die Buttons können eckig oder abgerundet sein. Der Parameter "border-radius" kann in für den Betrieb gespeichert werden.
igumbi Hotel Buchungstool responsiver Modus from Roland Oth on Vimeo.
Durchlauf der responsiven Modi (Desktop, Tablets, Smartphones) des igumbi Hotel Buchungstools. Das Buchungstool wird auf der Website des Hotels/der Apartments/ der Ferienwohnungen integriert.
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?layout=wide2&test=true"></script>
Ältere Responsive Beispiele
https://www.igumbi.net/avnolayout/bcb0c0?locale=de
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):
- Basis Stylesheets für das Buchungstool (SASS Version): Dimensionen für die Webversion
- Button und Styling Deklarationen (SASS Version)
- Datums Widget (SASS Version): Styling des Datum-Popups
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.
Beim Aufruf der Verfügbarkeit eine Produktkategorie vorreihen aber die anderen Kategorien auch anzeigen.
Auf einer Kategorie-Unterseite soll das Buchungstool einbauet werden. Die beschriebene Kategorie soll vorgereiht werden:
- Bei der Antwort des Buchungstools werden alle verfügbaren Kategorien gezeigt
- Die definierte Kategorie sollte an der ersten Position ausgegeben werden.
Um das zu erreichen, hängt man den Parameter "preferred_productcategory_id=3344" an den Script Aufruf des Buchungstools an. 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?preferred_productcategory_id=3344"></script>
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:
- Englisch
- Griechisch
- Slowenisch
- Italienisch
- Niederländisch, Spanisch, Tschechisch, Japanisch. (en, gr, sl, it, nl, es, ru, cz, jp)
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>
<script src="https://www.igumbi.net/seller/bcb0c0/jp/start.js"></script>
Damit werden die Felder und die Meldungen im Buchungstool in die jeweilige Sprache übersetzt.
Die Produktkategorien, Produkte und Beschreibungen für Ihren Betrieb müssen auch konsequent übersetzt werden. Dafür gibt es bei >Hotel Stammdaten > Sprachen (rechts oben) die Möglichkeit alle Phrasen, die zu Übersetzen sind, auf einmal zu bearbeiten. Alternativ können Sie oben rechts auf die Flaggen klicken um in eine andere Sprache zu wechseln und dann die Produkte und Kategorien bearbeiten.
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.
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.
AGBs und Datenschutz
Wenn in den Hotel-Stammdaten im Bereich Buchungstool URLs für die AGBs und zu den Datenschutzbestimmungen (DSGVO) eingetragen sind dann erscheinen im Buchungsformular Checkboxen zum Anhaken vor dem Abschluss der Buchung.
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.2019','8.12.2019',1,2)
Hier ein Beispiel eines Links für das Angebot eines Specials im Dezember:
<a href="#" onclick="Obt.setspecial('5.12.2019','8.12.2019',1,2);">
Advent Special 3N/2P 5.12-8.12.2019</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.
