Zu Content springen
Deutsch
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

Pauschalenslider

Ein Pauschalenslider präsentiert die Pauschalen in einer platzsparenden Box, die die Pauschalen animiert von rechts nach links durchlaufen, um das Interesse des Benutzers zu wecken. Zusätzlich kann der Benutzer durch Klick auf die Pfeile durch die Angebote vor- und zurücknavigieren.

Fokus hat hierbei das Bild, zusätzlich wird der Name, die Anzahl der Übernachtungen und der “Ab”-Preis angezeigt.

1.0 Darstellung

 d6e3de16-efcf-4191-89da-ad9dc27e62fa
Abb. 1.0.a: Beispielanimation einer Integration eines Pauschalensliders

 

Durch Klick auf ein Angebot öffnet sich die Detailansicht der entsprechende Pauschale.

 7db101bb-3583-4dd2-8469-e7b667b28c16
Abb. 1.0.b: Beispiel der Detailansicht, die erscheint, nachdem auf ein Angebot geklickt wurde.

 

Ein Kalender zeigt zusätzlich die Verfügbarkeit an und durch Auswahl des An- und Abreisetages und Klick auf den “Buchen”-Button wird der Benutzer direkt in die Buchungsstrecke geleitet, wo bereits die gewünschte Pauschale ausgewählt ist und er direkt für seine Wünsche (Belegung, Zeitraum) ein Preisangebot erhält.

Bitte beachten Sie:

Dieses Widget funktioniert nur in Verbindung mit einer zuvor konfigurierten Buchungsstrecke.

Der Pauschalenslider passt sich dabei automatisch an die Breite des Endgerätes (z. B. Smartphones) an.

2.0 Konfiguration

Der Pauschalenslider 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.

 462945f8-9471-426f-8eb5-99617f67e0f1
Abb. 2.1.a: Die Übersicht der Integrationen auf der Seite "Eigener Vertriebskanal”
 

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 “Pauschalenslider” 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 “Pauschalenslider” aus und klicken Sie auf “Speichern”. Abhängig vom ausgewählten Integrationstyp, werden nach dem Speichern dann weitere, Integrationstyp-spezifische Felder und Segmente angezeigt.

 249a1d69-d13c-4aef-91e8-84434ffec8b7
Abb. 2.2: Das Segment “Einstellungen” beim Neuanlegen einer Integration
 

2.2.1 Name der Integration

 Segment Einstellungen-1
Abb. 2.1.1: Das Feld “Name der Integration”
 

Hier geben Sie den Namen für die Integration ein. Der Name wird beim Integrationstyp “Pauschalenslider” als Titel über dem Slider (Siehe Bild 1.0.a) ausgegeben. Aus diesem Grund sollten Sie darauf achten, den Namen in allen verfügbaren Sprachen zu pflegen.

2.2.2 Integrationstyp

 63fa8edc-96df-4539-b226-e2b56d17b2fc
Abb. 2.1.2: Das Feld “Integrationstyp”
 

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

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

2.2.3 Einstellungen bei Auswahl des Integrationstyps “Pauschalenslider”

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

 4c9c313a-08ea-47ec-a55e-1d91c31375e9
Abb. 2.2.3: Das Segment “Einstellungen” bei Auswahl des Integrationstyps “Pauschalenslider”
 

2.2.4 Spezifische Einstellungen der Integration “Pauschalenslider”

2.2.4.1 Position der Zielseite

 c871277f-7030-47fa-8207-a9d1d6e7923b
Abb. 2.2.4.1.a: Das Feld “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 Detailansicht der Pauschale im gleichen Inhaltsbereich wie diese Integration.

  • In einem überlagernden Fenster
    Bei Klick auf den „Buchen“- bzw. „Anfrage“-Button öffnet sich die Detailansicht der Pauschale in einem Overlay.

  • Benutzerdefinierte URL
    Bei Klick auf den „Buchen“- oder „Anfrage“-Button wird die hinterlegte URL aufgerufen. Auf der Zielseite muss eine CST 7-Integration eingebunden sein, die die Option “URL-Parameter erlauben” (z. B. die Buchungsstrecke) aktiviert hat. Bei Auswahl dieser Option werden die Felder "Ziel-URL" und "Mehrsprachige Ziel-URL" zur Pflege der URL eingeblendet. 

    d09c59fc-34af-421b-9862-c6f2dbd98fcd
    Abb. 2.2.4.1.b: Die Felder “Ziel-URL und “Mehrsprachige Ziel-URL” erscheinen bei Auswahl der Option “Benutzerdefinierte URL”.

     

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

Bitte beachten Sie:

Wenn Sie die Seite über eine “Benutzerdefinierte URL” aufrufen, müssen Sie darauf achten, dass auf der Integration der Ziel-Buchungsstrecke die Einstellung URL-Parameter erlauben aktiviert ist. Nur dann werden die im Buchungswidget eingegebenen Daten von der Buchungsstrecke übernommen.

2.2.4.2 Ziel-URL

1dda082e-7597-49a7-9ac8-ed3579377df3 
Abb. 2.2.4.2: Das Feld “Ziel-URL”
 

Hier wird die benutzerdefinierte URL angegeben, die durch Klick auf den Buchen- bzw. Anfragebutton 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.

Bitte beachten Sie:

Dieses Feld wir nur angezeigt, wenn zuvor im Feld “Position der Zielseite” die Option “Benutzerdefinierte URL” gewählt wurde (Siehe Bild 2.2.4.1.b).

2.2.4.3 Mehrsprachige Ziel-URL

 8a65fd08-4a54-45e9-9f47-54c335c5d9ad
Abb. 2.2.4.3: Das Feld “Mehrsprachige Ziel-URL”
 

Hier kann je nach Sprache eine unterschiedliche URL hinterlegt werden, die durch Klick auf den Buchen- bzw. Anfragebutton 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. 

Bitte beachten Sie:

Dieses Feld wir nur angezeigt, wenn zuvor im Feld “Position der Zielseite” die Option “Benutzerdefinierte URL” gewählt wurde (Siehe Bild 2.2.4.1.b).

2.2.4.4 Verknüpftes Anfrageformular

 396bec26-9a53-4616-8b49-9f0da875cd23
Abb. 2.2.4.4: Das Feld “Verknüpftes Anfrageformular”
 

Neben der direkten Buchung, gibt es auch die Möglichkeit auf der Pauschalendetailseite für den Benutzer, eine unverbindliche Anfrage an das Hotel zu stellen. Um ein Anfrageformular auswählen zu können, muss zuvor eine Integration vom Typ Anfrageformular angelegt worden sein.

Der Benutzer erhält dann auf der Pauschalendetailseite das gewählte Anfrageformular, wenn er auf den “Anfragen”-Button klickt.

2.2.4.5 Farbschema

 cd2f6cff-a407-4efc-9e25-6aad0290a05b
Abb. 2.2.4.5.a: Das Feld “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.

Wenn Sie ein vordefiniertes Farbschema auswählen, werden die Einstellungen im Segment “Erscheinungsbild” ignoriert.

2.2.4.6 Anzahl Pauschalen

 Einstellungen_Pauschalenslider_Anzahl-Pauschalen
Abb. 2.2.4.6: Das Feld “Anzahl Pauschalen”
 

Hier können Sie angeben, wieviele Pauschalen im Slider maximal angezeigt werden sollen.

2.2.4.7 Label für Buchen-Button

dc2ad195-b7e4-4837-8b1e-abb4de434a9b 
Abb. 2.2.4.7: Das Feld “Label für Buchen-Button”
 

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

2.3 Filter

 d04bba21-ec83-4301-b48a-63aacacb189a
Abb. 2.3.a: Das Segment “Filter” bei Auswahl des Integrationstyps “Pauschalenslider

 

Um Einfluss auf die Daten innerhalb einer Integration zu nehmen, können die Ergebnisse mit Hilfe von Filtern eingeschränkt werden. Hierzu können die einzelnen Untersegmente aufgeklappt und die gewünschten Filter ausgewählt bzw. eingegeben werden. In der Integration “Pauschalenslider” gibt es folgende Filtergruppen, die gefiltert werden können:

  1. Details ausklappen

  2. Hotels

  3. Anzahl Pauschalen

  4. Anzahl Pauschalen pro Hotel

  5. Anzahl Nächte

  6. Pauschalen

  7. Referenzpauschale

  8. Zimmerkategorie

  9. Indikator

  10. Indikatoren ausschließen

  11. Pauschale verfügbar ab

  12. Pauschale verfügbar bis

  13. Spätester Abreisetag der Pauschale

  14. Rate

Wenn z. B. der Pauschalenslider nur Pauschalen für eine bestimmten Zimmerkategorie anzeigen soll, können Sie mit dem Filter die Anzeige eingrenzen:

 60c063f7-b67a-463b-98be-a39a7d0d0cd4
Abb. 2.3.b: Das Segment “Filter” beim Integrationstyp “Pauschalenslider” mit gefilterter Zimmerkategorie
 

2.3.1 URL-Parameter

 99f7207c-b375-455b-a5ca-aea64c980709
Abb. 2.3.1: Das Feld “URL-Parameter”
 

Hier werden die gesetzten Filter als GET-Parameter zur Information angezeigt, um Webmastern eine Hilfestellung zu geben, wie Filter an die Integration übergeben werden könnten. Je nach Auswahl der Filter wird dieses Feld automatisch aktualisiert. Eine generelle Anleitung, wie Parameter an die Buchungsstrecke übergeben werden können, finden Sie hier.

Eine Bearbeitung des Feldes hat keinen Einfluss auf die Filterung der Integration.

2.3 Erscheinungsbild

 09468955-b996-4ae1-8165-254c6b329511
Abb. 2.3: Das Segment “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.

Das Segment “Erscheinungsbild” enthält alle Elemente, die in den Integrationen vorkommen können. Allerdings werden nicht alle Elemente in jeder einzelnen Integrationen verwendet, so dass auch nicht alle Farben angepasst werden müssen.

Die Einstellungen in diesem Segment haben nur eine Auswirkung, wenn im Segment “Einstellungen” bei der Einstellung Farbschema die Option “Eigenes Farbschema verwenden” ausgewählt wurde.

2.4 Erweiterte Einstellungen (CSS/LESS)

 30d013be-fb7e-4d29-9c2a-cf593144f45c
Abb. 2.4: Das Segment “Erweiterte Einstellungen (CSS/LESS)”
 

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

2.4.1 Offset CSS-Selector

 f97b9d74-c428-4e37-9edb-d89a3c599ebb
Abb. 2.4.1.a: Das Feld “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

 90d17139-fc6c-4db8-80ed-e9b281a61289
Abb. 2.4.2.a: Das Feld “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

 11d0bc8c-156e-4248-b2d3-6dacf3e2f151
Abb. 2.4.3.a: Das Feld “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

 79e3fbed-ba4c-4b6a-8670-60f368e04247
Abb. 2.4.4.a: Das Feld “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.

Bitte beachten Sie:

Es gibt aktuell keine Dokumentation für Entwickler über das Markup und das CSS-Klassen-Konzept. Wenn Sie das Standard-CSS überschreiben, sollten Sie genau wissen, was Sie tun und das Ergebnis auf jeden Fall überprüfen.

Fehlerhaftes CSS kann dazu führen, dass die Integration nicht mehr korrekt angezeigt wird und/oder nicht mehr korrekt funktioniert. Wir übernehmen keine Haftung für fehlerhafte Angaben und können Ihnen dazu auch keine Unterstützung anbieten.

2.5 Code-Snippet

Wichtig: die Code-Snippets müssen direkt in die Website integriert werden. Eine Integration als iFrame wird nicht unterstützt und aus folgenden Gründen nicht empfohlen:

  • Deep-Links:

    • es können keine Parameter (An-/Abreisedatum, Anzahl Personen, Zimerkategorie, usw) aus Buchungswidgets an die IBE weitergegeben werden

    • Weiterleitungen von Meta-Search-Kanälen (Google, Trivago, Tripadvisor) kann nicht vollständig übergeben werden

  • Tracking kann nicht ausgewertet werden durch fehlende Referrer

  • Darstellung von Overlays nicht über benötigte Breite

  • Payment-Weiterleitungen an externe Paymentanbieter schlagen fehl

  • Scroll-Verhalten erschwert durch iFrame

 eeb5e8bd-9f1b-4616-8cab-a840f01733ed
Abb. 2.5.a: Das Segment “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

 14e77b76-e3e6-44e5-ba97-e4f39d509358
Abb. 2.5.1.a: Das Feld “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.