Ein Buchungswidget ist ein kleines Formular, das dem Benutzer ermöglicht, mit wenigen Angaben ein Angebot zu erhalten. Füllt der Benutzer das Formular aus und klickt auf den “Buchen”-Button, wird der Benutzer direkt in die Buchungsstrecke geleitet. Dort werden ihm die verfügbaren Zimmerkategorien, Pauschalen und Zusatzleistungen (je nach Konfiguration) inkl. Preis angezeigt und er kann direkt buchen.

Das Buchungswidget wird oft auf der Startseite integriert, um den Benutzer schnell an sein Ziel zu führen.

1.0 Darstellung

Je nach Konfiguration kann das Widget unterschiedlich aussehen und mehr oder weniger Felder haben:

Open

Abb. 1.0.a: Beispiel des Buchungswidgets mit der Layout-Einstellung “Fixe Leiste am Browserrand.”

Open

Abb. 1.0.b: Beispiel des Buchungswidgets mit der Layout-Einstellung “Box für Teaserbereich”

2.0 Konfiguration

Das Buchungswidget wird in der Integrationsverwaltung konfiguriert. Die Integrationsverwaltung ist ein aufklappbares Segment auf der Seite

Hotelverwaltung / Distribution / Eigener Vertriebskanal

2.1 Übersicht

In der Übersicht werden alle Integrationen in einer Tabelle dargestellt.

Durch Klick auf einen Eintrag in der Tabelle kann die Konfiguration der Integration aufgerufen und bearbeitet werden. Durch Klick auf den Button "Hinzufügen", oben rechts, öffnet sich ein Fenster, dort können neue Integrationen angelegt werden.

2.2 Einstellungen

Um eine Integration vom Typ “Buchungswidget” anzulegen, klicken Sie auf den “Hinzufügen”-Button. Initial werden beim Neuanlegen einer Integration nur 2 Felder geladen: Der Name der Integration und der Integrationstyp.

Vergeben Sie einen Namen, wählen Sie als Integrationstyp “Buchungswidget” aus und klicken Sie auf “Speichern”. Abhängig vom ausgewählten Integrationstyp, werden nach dem Speichern dann weitere, Integrationstyp-spezifische Felder und Segmente angezeigt.

2.2.1 Name der Integration

Hier können Sie einen Namen für die Integration vergeben. Auf Wunsch kann auch der Name über dem Widget als Titel ausgegeben werden (Siehe Punkt 2.2.1.5). In diesem Fall sollten Sie darauf achten, den Namen in allen verfügbaren Sprachen zu pflegen.

2.2.2 Integrationstyp

Hier können Sie den Integrationstyp auswählen. Es stehen folgende Typen zur Verfügung:

• Buchungswidget

• Buchungsstrecke

• Gutscheinverkauf

• Zimmerliste

• Pauschalenliste

• Anfrageformular

• Liste mit Zusatzleistungen

• Pauschalen-Slider

• Zimmer Restplatzbörse

• Pauchalensuche (nur MPE)

• Besucherquellen-Erfassung

• Farbschema

Wählen Sie hier als Integrationstyp “Buchungswidget” aus.

2.2.3 Einstellungen bei Auswahl des Integrationstyps “Buchungswidget”

Abhängig vom ausgewählten Integrationstyp, werden nach dem Speichern dann weitere, Integrationstyp-spezifische Felder und Segmente angezeigt:

2.2.4 Spezifische Einstellungen der Integration

2.2.4.1 Position der Zielseite

Hier können Sie wählen, wo sich die Zielseite öffnet, wenn der Benutzer auf den “Buchen”-Button klickt.

Sie können wählen zwischen den Optionen …

• Im gleichen Inhaltsbereich
  Bei Klick auf den „Buchen“- bzw. „Anfrage“-Button öffnet sich die Buchungsstrecke oder das Anfrageformular im gleichen Inhaltsbereich wie diese Integration.

• In einem überlagernden Fenster
  Bei Klick auf den „Buchen“- bzw. „Anfrage“-Button öffnet sich die Buchungsstrecke oder das Anfrageformular in einem Overlay.

• Benutzerdefinierte URL
  Bei Klick auf den „Buchen“- oder „Anfrage“-Button wird die hinterlegte URL aufgerufen. Die Buchungsstrecke bzw. das Anfrageformular muss auf der entsprechenden Seite integriert sein. Bei Auswahl dieser Option werden die Felder "ZIel-URL" und "Mehrsprachige Ziel-URL" zur Pflege der URL eingeblendet
  
  

Da die Buchungsstrecke meistens auf einer Unterseite einer Hotel-Website integriert wird, verweisen Sie in der Regel auf diese Seite über die “Benutzerdefinierte URL”.

2.2.4.2 Ziel-URL

Hier wird die benutzerdefinierte URL angegeben, die durch Klick auf den “Buchen”- bzw. “Anfrage”-Button aufgerufen wird. Die Buchungsstrecke muss auf der Zielseite integriert sein. Ist das Feld „Ziel-URL“ und das nachfolgende Feld („Mehrsprachige Ziel-URL“) ausgefüllt, wird die mehrsprachige URL verwendet.

2.2.4.3 Mehrsprachige Ziel-URL

Hier kann je nach Sprache ein unterschiedliche URL hinterlegt werden, die durch Klick auf den “Buchen”- bzw. “Anfrage”-Button aufgerufen wird. Die Buchungsstrecke muss auf der Zielseite integriert sein. Ist das Feld „Ziel-URL“ und die „Mehrsprachige Ziel-URL“ ausgefüllt, wird die mehrsprachige URL verwendet.

2.2.4.4 Verknüpftes Anfrageformular

Wenn Sie zusätzlich zur Buchung dem Benutzer auch die Möglichkeit anbieten wollen, unverbindlich den Reisezeitraum anzufragen, können Sie hier ein zuvor angelegtes Anfrageformular auswählen. In dem Fall wird dem Benutzer ein zusätzlicher “Anfrage”-Button angeboten.

Bei Klick auf den Button öffnet sich das Anfrageformular, abhängig der Einstellung “Position der Zielseite”. Je nach Konfiguration werden die zuvor im Buchungswidget eingegebenen Daten ins Anfrageformular übernommen.

2.2.4.5 Farbschema

Hier können Sie auswählen, ob Sie ein eigenes Farbschema oder ein vordefiniertes Farbschema der Integration zuweisen möchten. Mit einem Farbschema lassen sich alle Elemente einer Integration farblich an die eigenen Wünsche anpassen.

Wenn Sie ein eigenes Farbschema benutzen (Standardeinstellung), werden die Einstellungen im Segment “Erscheinungsbild” berücksichtigt.

Um ein vordefiniertes Farbschema auszuwählen, legen Sie eine Integration mit dem Integrationstyp “Farbschema” an. Dieses Farbschema ist dann hier auswählbar. Ein vordefiniertes Farbschema hat den Vorteil, dass das Farbschema nur einmal angelegt werden muss und dann beliebig vielen Integrationen zuweisbar ist.

2.2.4.6 Layout

Das Buchungswidget ist in vier verschiedenen Layoutvarianten verfügbar:

Box für Teaserbereich

Die Formularfelder werden vertikal untereinander in einer “Box” dargestellt (siehe Abb. 1.0.b) und enthalten die Formularfelder

• Tag der Anreise

• Tage der Abreise

• Anzahl Erwachsene

• Anzahl Kinder

Die Integration kann an beliebiger Stelle aus der Website integriert werden.

Box für Teaserbereich mit Zimmeranzahl und Belegung

Die Formularfelder werden vertikal untereinander in einer “Box” dargestellt und enthalten die Formularfelder

• Tag der Anreise

• Tag der Abreise

• Anzahl Zimmer

Nach Auswahl der Anzahl der Zimmer erscheinen pro Zimmer folgende Formularfelder, um je Zimmer die Belegung angeben zu können:

• Anzahl Erwachsene

• Anzahl Kinder

Die Integration kann an beliebiger Stelle aus der Website integriert werden.

Box für Teaserbereich mit Kinderalter

Die Formularfelder werden vertikal untereinander in einer “Box” dargestellt und enthalten die Formularfelder

• Tag der Anreise

• Tage der Abreise

• Anzahl Erwachsene

• + Kind hinzufügen

Bei Klick auf das Auswahlmenü “+ Kind hinzufügen”, kann das Alter des Kindes ausgewählt werden. Wurde das Alter ausgewählt erscheint ein neues Menü darunter, um ein weiteres Kind inkl. Alter angeben zu können.

Die Integration kann an beliebiger Stelle auf der Website integriert werden.

Fixe Leiste am Browserrand

Die Formularfelder werden horizontal nebeneinander dargestellt und enthalten die Formularfelder

• Tag der Anreise

• Tag der Abreise

• Anzahl Erwachsene

• Anzahl Kinder

Die Leiste wird am unteren Browserrand fixiert und liegt über der Website. Die Integration scrollt so bei längeren Seiten nicht mit, so dass man überall darauf Zugriff hat.

2.2.4.7 Name anzeigen

Wird die Option “Name über dem Widget ausgeben” aktiviert, wird die Standard-Überschrift (“Suchen & Buchen”) über dem Widget ausgeblendet und stattdessen der Name der Integration angezeigt.

Dieses Feld ist nur verfügbar, wenn unter “Layout” folgende Layouts ausgewählt wurden:

• “Box für Teaserbereich"

• "Box für Teaserbereich mit Zimmeranzahl und Belegung" 

2.2.4.8 Label für Buchen-Button

Hier kann der Label des “Buchen”-Buttons in allen verfügbaren Sprachen überschrieben werden.

2.2.4.9 Label für Anfrage-Button

Hier kann der Label des “Anfrage”-Buttons in allen verfügbaren Sprachen überschrieben werden.

2.3 Erscheinungsbild

Hier kann das Farbschema der Integration angepasst werden.

Die Untersegmente links können auf- und zugeklappt werden und die Farbe für jedes Element kann ausgewählt bzw. eingegeben werden. Rechts daneben befindet sich die Vorschau. Die Elemente können auch in der Vorschau angeklickt werden, um die Farbe anzupassen.

2.4 Erweiterte Einstellungen (CSS/LESS)

Hier können erweiterte Einstellungen vorgenommen werden, die das Layout beeinflussen.

2.4.1 Offset CSS-Selector

Es gibt Integrationen wie z. B. die Buchungsstrecke oder die Gutscheinverkaufsstrecke, die automatisch während der Benutzung an bestimmte Positionen scrollen, um dem Benutzer zu unterstützen. Je nach Design und Programmierung kann es aber Elemente auf einer Website geben, die die Scrollposition beeinflussen. Das ist z. B. der Fall, wenn der Header einer Seite die CSS-Eigenschaft „position: fixed“ besitzt. Das hat zur Folge, dass eine eingebettete Buchungsstrecke nicht mehr an die gewünschte Position scrollen kann.

Wenn Sie wissen, dass Sie solche Elemente auf Ihrer Website einsetzen oder wenn Sie beim testen der Buchungsstrecke feststellen, dass die automatische Scrollposition nicht stimmt, können Sie hier den CSS-Selector angeben, der für die Beeinflussung der Scrollposition verantwortlich ist. Dieses Element wird dann bei der Berechnung der Scrollposition automatisch berücksichtigt und die Scrollposition korrigiert.

Wenn die Angabe eines Elements nicht möglich ist, kann alternativ auch der Versatz in Pixeln (siehe Punkt 4.2 Scroll-Offset) angegeben werden.

2.4.2 Scroll-Offset

Es gibt Integrationen wie z. B. die Buchungsstrecke oder die Gutscheinverkaufsstrecke, die automatisch während der Benutzung an bestimmte Positionen scrollen, um dem Benutzer zu unterstützen. Je nach Design und Programmierung kann es aber Elemente auf einer Website geben, die die Scrollposition beeinflussen. Das ist z. B. der Fall, wenn der Header einer Seite die CSS-Eigenschaft „position: fixed“ besitzt. Das hat zur Folge, dass eine eingebettete Buchungsstrecke nicht mehr an die gewünschte Position scrollen kann.

Wenn Sie wissen, dass Sie solche Elemente auf Ihrer Website einsetzen oder wenn Sie beim testen der Buchungsstrecke feststellen, dass die automatische Scrollposition nicht stimmt, können Sie hier den Versatz in Pixeln angeben. Dies ist als Alternative gedacht zum vorherigen Punkt 4.1. Offset CSS-Selector, wenn z. B. die Angabe eines Elements nicht möglich ist.

Der Versatz wird dann bei der Berechnung der Scrollposition automatisch berücksichtigt und die Scrollposition korrigiert.

2.4.3 CSS font-family

Hier kann die Standard CSS “font-family” überschrieben werden mit den gewünschten Schriftarten. Die Angaben sollten identisch der CSS-Eigenschaft angegeben werden, also durch Komma getrennt. Bei Verwendung von nicht generischen Schriften sollten Sie darauf achten, dass die gewünschte Webfont im Quelltext der Seite via CSS referenziert wird.

2.4.4. Eigenes CSS/LESS

Für individuellere Styling-Wünsche, die über das Anpassen von Farben hinausgehen, kann hier das Standard-CSS mit CSS oder LESS überschrieben werden.

2.5 Code-Snippet

Hier wird das Code-Snippet der Integration angezeigt und kann, für jede Sprache getrennt, kopiert und in die eigene Website integriert werden.

2.5.1 Sprache

Das Code-Snippet wird abhängig von der gewählten Sprache aktualisiert (Zeile 12). Um das Code-Snippet in allen verfügbaren Sprachen zu erhalten, wechseln Sie die Sprache und kopieren danach das Code-Snippet und integrieren es in Ihre Website. Wiederholden Sie den Vorgang für alle gewünschten Sprachen.

2.5.2 Aktionen: Code kopieren

Durch Klick auf den Button “Code kopieren”, wir das Code-Snippet in Ihre Zwischenablage kopiert und kann von Ihnen in Ihre Website eingefügt werden.

Inhalt