Seiten über Stripe

Online Hotel Buchungstool: provisionsfreie Website Buchungen

Das igumbi online Hotel Buchungstool (Hotel IBE) für die eigene Website kann sehr einfach eingebaut werden. Das online Hotelbuchungssystem läuft direkt auf Ihrer eignen Homepage ohne Sprung in eine externe Webseite. Das Buchungssystem generiert provisionsfreie Direktbuchungen zum monatlichen Fixpreis. Und das ganze ohne permanente Wartung eines online Kontingents in einem externen Tool.

Das Hotelbuchungssystem integriert sich nahtlos in Ihre Website: Ohne iFrames, die die Größe des Buchungsdialogs beschneiden, keine Pop-ups oder langsame Flash-Technologie. Ihr Webdesigner kann das Buchungstool an das Design Ihrer Website anpassen: Buttons, Farben, Breite und Größe des Dialogs und der Felder.

Mehr lesen: Online Buchungstool

igumbi WordPress Hotel Buchungssystem Plugin

Mit dem Plugin greift Ihre WordPress Website auf Ihr internes Hotel Reservierungssystem(igumbi) zu. Mit dem Zahlungsanbieter Stripe kann die Kreditkarte sofort für den gesamten Betrag oder für eine Anzahlung belastet werden.

Ihre Gäste können direkt und provisionsfrei von Ihrer Website buchen. Sie bekommen fertig abgewickelte Buchungen: mit der Kreditkarte bezahlt, Rechnung ausgestellt, Zimmer zugeteilt und Reservierungsbestätigung samt Rechnung verschickt. Ideal für kleine Hotels, Pensionen und Ferienwohnungen die ohne Rezeption arbeiten (wollen/ müssen).

Mehr lesen: Wordpress Buchungssystem Plugin

Anzahlungen für Hotel Reservierungen verwalten

Anzahlungen für Buchungen von Ferienwohnungen, Apartments, Hotels verwalten. Zahlungsforderung eintragen, Bezahlte Anzahlung eintragen, Anzahlungsbestätigung / Quittung verschicken. Per Kreditkarte einziehen. Bei der späteren Rechnungserstellung den um die Anzahlung verminderten Betrag als Restzahlung als offenen Betrag darstellen.

Mehr lesen: Anzahlungen verwalten

Direktbuchungen automatisch bezahlen mit Stripe

In den letzten Wochen wurde umfangreich an den Tests und Verfahren der Kreditkartenzahlung, Besicherung und Sofortüberweisung die wir mit dem Stripe Bezahlsystem am Laufen haben und die vom igumbi online Buchungstool ausgehen, gearbeitet. Stripe hat ursprünglich als eine sehr einfache Bezahlmethode begonnen, aber durch die Einführung des 3D Secure Verfahrens haben sich einige Abläufe umgedreht und technisch komplexer gestaltet: Das ist jedoch eine Notwendigkeit um ein sicheres und reibungsloses Nutzererlebnis mit den 3D Secure Auflagen herzustellen.

Mehr lesen: Direktbuchungen Zahlungen

Integration des igumbi Online Buchungstools in die Hotel-Website

picimg(237,600,1)

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.

picimg(238,600,1)

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>

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>

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):

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.

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.

picimg(239,600,1)

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.

Mehr lesen: Hotel-Website Buchungstool