ILOCA: Online-Buchungsmaske (WBE) konfigurieren

In dieser Anleitung wird beschrieben, wie die Online-Buchungsmaske (WBE) aktiviert und konfiguriert, in die eigene Website eingebunden und um Hinweistexte ergänzt wird. Außerdem wird erklärt, wo Bilder und Beschreibungstexte für die angebotenen Kategorien gepflegt werden.

Die Einstellungen findest du unter:

Einstellungen → WBE

Der Bereich ist in drei Rubriken unterteilt:

• Allgemein
• Integration in Website
• Hinweistexte

Über die Schaltfläche Frontend kannst du die Buchungsmaske öffnen und deine Anpassungen überprüfen.

Allgemein

Unter Allgemein konfigurierst du die grundlegenden Funktionen, Inhalte und das Erscheinungsbild der Buchungsmaske.

Status

Hier kannst du die Buchungsmaske aktivieren oder deaktivieren.

• Aktiviert: Die Buchungsmaske ist für Gäste erreichbar.
• Deaktiviert: Über die Buchungsmaske können keine Zimmer gebucht werden. Beim Aufruf wird eine Fehlermeldung angezeigt.

Link zur WBE

Hier findest du den persönlichen Link zu deiner Buchungsmaske.

Diesen Link kannst du:

• auf deiner Website hinterlegen,
• mit einem „Jetzt buchen“-Button verknüpfen,
• per E-Mail versenden oder
• direkt an Gäste weitergeben.

Passwort

Optional kann die Buchungsmaske mit einem Passwort geschützt werden.

Wenn hier ein Passwort eingetragen wird, fragt die Buchungsmaske dieses beim Aufruf ab. Nur Personen, die das Passwort kennen, können anschließend ein Zimmer buchen.

Bleibt das Feld leer, ist kein Passwortschutz aktiviert.

Aktivierte Zahlungsmethoden

Hier legst du fest, welche Zahlungsmethoden deinen Gästen während des Buchungsvorgangs angeboten werden.

Je nach installierten Plugins können unter anderem folgende Zahlungsarten zur Verfügung stehen:

• Zahlung vor Ort im Hotel
• Überweisung
• Rechnung / Kostenübernahme
• Stripe-Kreditkarte
• Stripe-Kreditkarte / Google Pay / Apple Pay
• Stripe-Klarna / Sofortüberweisung
• PayPal
• PayPal Checkouts

Wir empfehlen grundsätzlich:

• Stripe-Kreditkarte
• Stripe-Kreditkarte / Google Pay / Apple Pay
• Stripe-Klarna / Sofortüberweisung
• optional PayPal

Bitte beachte: Stripe- und PayPal-Zahlungsmethoden werden erst angezeigt, nachdem das jeweilige Plugin unter Einstellungen → Plugins eingerichtet wurde.

Aktivierte Unterkünfte

Hier bestimmst du, welche Unterkünfte über die WBE buchbar sein sollen.

Du kannst entweder Alle Unterkünfte oder gezielt einzelne Unterkünfte auswählen. Nicht ausgewählte Unterkünfte erscheinen nicht in der Buchungsmaske.

Pflichtfelder für den Hauptgast

Unter Gästedaten: Pflichtfelder Hauptgast legst du fest, welche Angaben der buchende Hauptgast machen muss.

Zur Auswahl stehen:

• Vorname
• Nachname
• Geburtsdatum
• Straße
• PLZ
• Ort
• Land
• Nationalität
• E-Mail
• Handynummer

Wähle nur die Daten aus, die du für die Bearbeitung der Buchung tatsächlich benötigst.

Pflichtfelder für Zusatzgäste

Unter Gästedaten: Pflichtfelder Zusatzgast bestimmst du, welche Angaben für weitere mitreisende Gäste abgefragt werden.

Zur Auswahl stehen:

• Vorname
• Nachname
• Geburtsdatum

Wenn keine Felder ausgewählt werden, wird der Bereich für Zusatzgäste in der Buchungsmaske vollständig ausgeblendet.

Preis-Aufschlag

Hier kannst du festlegen, um wie viel Prozent die in der WBE angezeigten Preise von den in ILOCA gepflegten Preisen abweichen sollen.

Ein positiver Wert erhöht den Preis. Ein negativer Wert reduziert ihn.

Beispiel:

• Preis-Aufschlag: 5 %
• In ILOCA hinterlegter Zimmerpreis: 100 €
• Angezeigter Preis in der WBE: 105 €

Preis-Rundung

Hier legst du fest, wie die Preise vor der Anzeige in der WBE gerundet werden.

Folgende Optionen stehen zur Verfügung:

• Nicht runden
• Normales Runden
• Aufrunden auf nächsten €
• Abrunden auf nächsten €

Mit der Rundung kannst du sicherstellen, dass in der Buchungsmaske nur ganzzahlige Eurobeträge angezeigt werden.

Link: Impressum

Hier hinterlegst du die vollständige URL zu deinem Impressum.

Der Link wird im Footer der Buchungsmaske angezeigt.

Link: Datenschutz

Hier hinterlegst du die vollständige URL zu deiner Datenschutzerklärung.

Der Link erscheint im Footer und muss von Gästen vor dem Absenden der Buchung bestätigt werden.

Link: AGB

Hier hinterlegst du die vollständige URL zu deinen Allgemeinen Geschäftsbedingungen.

Der Link erscheint ebenfalls im Footer und muss vor dem Absenden der Buchung bestätigt werden.

Primärfarbe

Die Primärfarbe wird unter anderem für folgende Elemente verwendet:

• Header
• Footer
• Schaltflächen
• Hauptüberschriften

Trage die Farbe als HEX-Wert ein, zum Beispiel:

#053342

Sekundärfarbe

Die Sekundärfarbe wird unter anderem für folgende Elemente verwendet:

• Schaltflächen beim Darüberfahren mit der Maus
• Unterüberschriften
• aktive Preise

Auch hier wird ein HEX-Wert verwendet, zum Beispiel:

#228286

Custom CSS

Über dieses Feld können individuelle CSS-Anweisungen hinterlegt werden, um das Erscheinungsbild der Buchungsmaske weiter anzupassen.

Bitte beachte:

• Die Erstellung und Pflege der CSS-Anpassungen erfolgt eigenständig.
• Anpassungen sollten idealerweise durch die eigene IT-Abteilung, einen Webdesigner oder eine Webagentur vorgenommen werden.

Google Tag ID

Hier kannst du Tracking für die Buchungsmaske einrichten.

Unterstützt werden:

• Google Tag Manager: GTM-...
• Google Ads: AW-...
• Google Analytics 4: G-...

Das entsprechende Tracking-Snippet wird automatisch in die Buchungsmaske eingebunden. Bleibt das Feld leer, ist dieses Tracking deaktiviert.

Google Ads: Conversion-Label

Dieses Feld wird nur benötigt, wenn im Feld Google Tag ID eine Google-Ads-ID mit AW-... verwendet wird.

Trage hier das Conversion-Label für die Conversion-Aktion „Buchung abgeschlossen“ ein. Du findest es in Google Ads unter:

Ziele → Conversions → Conversion-Aktion bearbeiten

Bei Verwendung von Google Tag Manager oder Google Analytics 4 bleibt das Feld leer.

Sind die Einstellungen hierzu vollständig hinterlegt, kann nachvollzogen werden, wie viele Nutzer die Buchungsstrecke starten bzw. mit ihr interagieren und wie viele davon anschließend tatsächlich eine Buchung abschließen, inklusive des jeweiligen Buchungswerts.

Meta Pixel ID

Hier kannst du die ID deines Meta- beziehungsweise Facebook-Pixels hinterlegen.

Das Pixel wird automatisch auf den Seiten der Buchungsmaske eingebunden. Auf der Bestätigungsseite wird zusätzlich ein „Purchase“-Event mit dem Buchungswert ausgelöst.

Bleibt das Feld leer, ist das Meta-Pixel-Tracking deaktiviert.

Klicke nach deinen Änderungen auf Speichern.

Integration in Website

Unter Integration in Website findest du drei Möglichkeiten, die Buchungsmaske mit deiner Website zu verbinden.

Variante 1: Direkter Link

Diese Variante eignet sich, wenn ein „Jetzt buchen“-Button die Gäste direkt zur WBE weiterleiten soll. Technische Vorkenntnisse sind dafür nicht erforderlich.

ILOCA stellt Links bereit für:

• eine Übersicht aller aktivierten Unterkünfte und
• den direkten Aufruf einzelner Unterkünfte.

Vorgehensweise

1. Kopiere den gewünschten WBE-Link.
2. Hinterlege ihn bei einem Button oder Link auf deiner Website.

Beispiel:

<a href="LINK-ZUR-WBE" target="_blank">
  Jetzt buchen
</a>

Ersetze LINK-ZUR-WBE durch den in ILOCA angezeigten Link.

Optional kannst du Werte für Anreise, Abreise oder Gutscheincode über URL-Parameter vorausfüllen.

Beispiel:

<a href="LINK-ZUR-WBE?date_checkin=31.01.2026&date_checkout=07.02.2026&coupon=SOMMER10" target="_blank">
  Jetzt buchen
</a>

Variante 2: Popup-Widget

Das Popup-Widget ist die empfohlene Variante, wenn die Buchungsmaske auf der eigenen Website geöffnet werden soll, ohne dass Gäste die Website sichtbar verlassen.

Für die Einrichtung ist einmalig eine kleine Anpassung am Quelltext der Website notwendig.

Schritt 1: Skript einbinden

Kopiere das in ILOCA angezeigte Skript und füge es einmalig in den <head>-Bereich deiner Website ein.

Schritt 2: Buchungsmaske öffnen

Füge an der gewünschten Stelle einen „Jetzt buchen“-Button ein. Der in ILOCA bereitgestellte Code öffnet die WBE anschließend als Popup.

Folgende Parameter können optional übergeben werden:

• date_checkin: Check-in-Datum im Format TT.MM.JJJJ
• date_checkout: Check-out-Datum
• coupon: Gutscheincode
• lang: Sprache der Buchungsmaske, zum Beispiel de oder en
• categories: IDs bestimmter Zimmerkategorien, zum Beispiel 1,2
• property: URL-Kürzel einer bestimmten Unterkunft

Die Kategorie-IDs findest du unter:

Zimmer / Einheiten → Kategorien

Das URL-Kürzel einer Unterkunft findest du unter:

Unterkünfte

Variante 3: Buchungsbar

Die Buchungsbar eignet sich, wenn direkt auf der Website eine Suchmaske mit Datumsfeldern und einer Schaltfläche zum Starten der Buchung angezeigt werden soll.

Schritt 1: Skript einbinden

Binde das unter Integration in Website angezeigte Skript einmalig in deine Website ein.

Wenn du das Skript bereits für das Popup-Widget eingebunden hast, musst du diesen Schritt nicht wiederholen.

Schritt 2: Platzhalter einfügen

Füge an der gewünschten Stelle folgenden Container ein:

<div id="iloca-bookingbar"></div>

Schritt 3: Buchungsbar initialisieren

Füge den in ILOCA bereitgestellten Initialisierungscode direkt vor dem schließenden </body>-Tag ein.

Dabei können unter anderem folgende Werte angepasst werden:

• element: ID des zuvor eingefügten Containers
• days: Mindestaufenthalt in Nächten
• property: URL-Kürzel der gewünschten Unterkunft
• css: optionale CSS-Anweisungen für die Gestaltung der Buchungsbar

Die Varianten Popup-Widget und Buchungsbar sollten bei Bedarf durch einen Webdesigner oder eine Webagentur eingebunden werden. Die benötigten, auf deine WBE abgestimmten Code-Beispiele kannst du direkt in ILOCA kopieren.

Hinweistexte

Unter Hinweistexte kannst du Banner anlegen, die deinen Gästen während des Buchungsvorgangs angezeigt werden.

Es gibt zwei Arten von Bannern:

• Globaler Banner: Wird für alle Unterkünfte verwendet.
• Unterkunftsbezogener Banner: Wird nur bei der ausgewählten Unterkunft angezeigt.

Pro Unterkunft können beliebig viele Banner angelegt werden.

Banner hinzufügen

1. Öffne Einstellungen → WBE → Hinweistexte.
2. Suche den Bereich Globaler Banner oder die gewünschte Unterkunft.
3. Klicke auf + Banner hinzufügen.
4. Hinterlege den gewünschten Text.
5. Wähle die Seiten aus, auf denen der Banner erscheinen soll.
6. Klicke abschließend auf Speichern.

Sprachen

Für jeden Banner können Texte in den in ILOCA aktivierten Sprachen gepflegt werden.

Wähle oberhalb des Textfeldes die gewünschte Sprache aus und hinterlege die passende Übersetzung.

Welche Sprachen grundsätzlich zur Verfügung stehen, legst du hier fest:

Einstellungen → Stammdaten → System → [Vorlagen] Sprachen

Text formatieren

Die Hinweistexte unterstützen einfache Markdown-Formatierungen.

Beispiele:

• **fett** für fetten Text
• *kursiv* für kursiven Text

Zusätzlich stehen Schaltflächen für Fett- und Kursivformatierung zur Verfügung.

Seiten auswählen

Du kannst für jeden Banner individuell festlegen, in welchen Schritten der Buchung er angezeigt wird.

Zur Auswahl stehen:

• Zimmerauswahl
• Warenkorb
• Gästeinformationen
• Zahlungsinformationen
• Zusammenfassung
• Bestätigung

So kannst du Hinweise genau dort platzieren, wo sie für Gäste relevant sind.

Beispiele:

• Informationen zum Mindestaufenthalt auf der Seite Zimmerauswahl
• Hinweise zur Zahlung auf der Seite Zahlungsinformationen
• Informationen zur Anreise auf der Seite Bestätigung

Nicht mehr benötigte Banner können über Löschen entfernt werden.

Bilder und Beschreibungstexte anpassen

Bilder und Beschreibungstexte der buchbaren Zimmer- oder Unterkunftskategorien werden nicht direkt in den WBE-Einstellungen gepflegt.

Öffne stattdessen:

Zimmer / Einheiten → Kategorien

Für jede Kategorie können unter anderem folgende Inhalte hinterlegt werden:

• Bilder
• Beschreibungstexte auf Deutsch
• Beschreibungstexte auf Englisch
• Beschreibungstexte in weiteren aktivierten Sprachen

Die hinterlegten Bilder und Texte werden anschließend in der Buchungsmaske angezeigt.

Weitere Sprachen kannst du unter folgendem Menüpunkt aktivieren:

Einstellungen → Stammdaten → System → [Vorlagen] Sprachen

Prüfe die Buchungsmaske nach allen Änderungen über die Schaltfläche Frontend, damit du nachvollziehen kannst, wie die Einstellungen für deine Gäste dargestellt werden.