Einzelner Unterkunft Kalender – Datumsauswahl Einbettung

Übersicht

Diese Komponente ist für Integrationen konzipiert, die eine Datumssuche auf Unterkunftsebene auf deiner Website benötigen. Sie eignet sich gut für:

• Startseite oder Hero-Bereich deiner Seite
• Buchungs- oder „Verfügbarkeit prüfen“-Abschnitte
• Landingpages, die Nutzer in den vollständigen Buchungsprozess führen
• Jede Seite, auf der du möchtest, dass Daten ausgewählt werden, bevor der Gast die Buchungsmaschine erreicht

Die Komponente zeigt die Verfügbarkeit auf Unterkunftsebene (über alle Zimmertypen hinweg), nicht ein bestimmtes Zimmer. Nach der Datumsauswahl wird der Gast zur Buchungsmaschine weitergeleitet, um ein Zimmer auszuwählen und die Reservierung abzuschließen.

Einrichtung

Um Buchungsmaschine-Webkomponenten zu einer externen Website hinzuzufügen, müssen wir zunächst das Immersive Experience Script im head des HTML-Dokuments einfügen:

Das <cb-property-date-picker> ist eine Webkomponente, die eine Datumsauswahlleiste für deine Unterkunft bereitstellt. Sie zeigt die Check-in- und Check-out-Felder, einen Kalender-Popover und einen Suchbutton an. Wenn der Gast Daten auswählt und auf Suchen klickt, wird er mit diesen Daten zur Buchungsmaschine weitergeleitet, wo er ein Zimmer auswählen und die Buchung abschließen kann.

Eine Liste von Best Practices, wenn ein Nutzer einen CMP verwendet:

• Füge die Immersive Experience ganz am Anfang des head vor dem CMP-Tag hinzu und verwende das Attribut, das verhindert, dass sie blockiert wird. Es ist besser, nicht alle in der Dokumentation anzugeben, da sie je nach Plattform unterschiedlich sein können
  • Cookiebot: data-cookieconsent="ignore"
  • OneTrust: data-ignore-consent="true"
  • Quantcast: data-quantcast-ignore="true"
• Klassifiziere das untenstehende Script im CMP-Admin-Panel als notwendig; auch hier kann es je nach Plattform Unterschiede geben

<script src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js" type="text/javascript"></script>

Installation

Fügen Sie das Cloudbeds-Webkomponenten-Skript im <head> Ihres HTML-Dokuments ein (oder vor der Komponente im <body>). Das Skript muss geladen sein, bevor ein <cb-property-date-picker>-Tag verwendet wird, damit die Komponente registriert wird.

Grundlegende Verwendung

<script  
src="https://static1.cloudbeds.com/booking-engine/latest/static/js/immersive-experience/cb-immersive-experience.js">
</script>

Was die Einrichtung bewirkt

• Das Laden dieses Skripts registriert die <cb-property-date-picker>-Komponente auf der Seite.
• Nachdem das Skript geladen ist, können Sie ein oder mehrere <cb-property-date-picker>-Tags beliebig platzieren. Jede Instanz zeigt die Datums-Auswahlleiste (Check-in, Check-out und Suchbutton) an und leitet, wenn der Gast Datumsangaben auswählt und auf Suchen klickt, zur Buchungsmaschine (oder Ihrer benutzerdefinierten URL) mit den ausgewählten Datumsangaben weiter, wie unten beschrieben.

Verwendung der Komponente

Minimal erforderliches Beispiel

Sie können die Komponente nur mit dem data-property-code des Skripts verwenden (ohne Attribute am Element) oder den Unterkunftscode direkt am Element übergeben:

<cb-property-date-picker  
property-code="YOUR_PROPERTY_CODE"
></cb-property-date-picker>

Mit nur dem Unterkunftscode (im Skript oder am Element) zeigt die Komponente den Standard-Suchbutton „Search“ an und verwendet die Standardsprache und Währung Ihrer Unterkunft.

Attribute

Was die Komponente erzeugt

• Beim Laden der Seite: Eine Datumsleiste mit Check-in- und Check-out-Feldern sowie einem Suchbutton (horizontal oder vertikal, abhängig vom layout). Das Tippen/Klicken auf ein Datumsfeld öffnet ein Kalender-Popover.
• Im Popover wählt der Gast Check-in- und Check-out-Daten aus. Der Kalender zeigt die Verfügbarkeit auf Unterkunftsebene sowie alle Einschränkungen oder Raten, die Ihre Unterkunft aktiviert hat.
• Bei der Suche (Button-Klick): Der Gast wird (im selben Tab oder in einem neuen Tab, abhängig von open-in-new-tab) zur Buchungsmaschine weitergeleitet mit:
  • Dem ausgewählten Check-in-Datum
  • Dem ausgewählten Check-out-Datum
  • Sprache und weiteren Abfrageparametern (z. B. Promo, Analysen)

Wenn Sie custom-url festlegen, werden dieselben Abfrageparameter (checkin, checkout, widget_source, promo, Analysen) an diese URL angehängt, sodass Ihre Seite den Ablauf fortsetzen kann.

So finden Sie Ihren Unterkunftscode

Ihr Unterkunftscode ist die eindeutige Kennung in der URL Ihrer Buchungsmaschine. Sie finden ihn in den PMS-Einstellungen unter der Registerkarte Buchungsmaschinenübersicht:

Benutzerablauf

1. Der Gast sieht die Datumsleiste (Check-in, Check-out, Suchbutton) auf Ihrer Seite.
2. Der Gast klickt auf ein Datumsfeld → Ein Kalender-Popover öffnet sich.
3. Der Gast wählt das Check-in-Datum → Der Kalender hebt verfügbare Check-out-Daten hervor.
4. Der Gast wählt das Check-out-Datum → Der Suchbutton wird aktiv.
5. Der Gast klickt auf den Suchbutton → Er wird zur angegebenen URL (Immersive Experience oder gehostete URL) der Buchungsmaschine mit den ausgewählten Daten weitergeleitet, wo er ein Zimmer auswählt und die Buchung abschließt.

Funktionen des Datums-Auswahlfelds

Das Kalender-Popover beinhaltet:

• Verfügbarkeitsanzeige: Verfügbarkeit auf Unterkunftsebene (kombiniert über alle Zimmertypen).
• Einschränkungsanzeigen: Mindestaufenthalt, Geschlossen für Anreise und weitere Einschränkungen (wenn in Ihren Unterkunftseinstellungen aktiviert).
• Anzeige des niedrigsten Preises: Niedrigster verfügbarer Tarif pro Tag (wenn in Ihren Unterkunftseinstellungen aktiviert).
• Reservierungen am selben Tag: Buchung für das heutige Datum (wenn in Ihren Unterkunftseinstellungen aktiviert).
• Lokalisierte Benutzeroberfläche: Bezeichnungen und Meldungen folgen dem von Ihnen gesetzten lang-Attribut.

Konfiguration der Unterkunft

Einige Verhaltensweisen hängen von Ihren Unterkunftseinstellungen in Cloudbeds ab. Diese werden im Cloudbeds-Dashboard konfiguriert, nicht über Komponentenattribute:

Beispiele zur Verwendung

Grundlegend (Property-Code im Element)

<cb-property-date-picker  
property-code="O2YXd0"
></cb-property-date-picker>

Mit optionalen Attributen

<cb-property-date-picker  
property-code="O2YXd0"  
button-label="Verfügbarkeit prüfen"  
layout="vertical"  
lang="es"  
currency="eur"  
class-name="my-date-picker"
></cb-property-date-picker>

Buchungsmaschine in einem neuen Tab öffnen

<cb-property-date-picker  
property-code="O2YXd0"  
open-in-new-tab="true"
></cb-property-date-picker>

Mit einer benutzerdefinierten Weiterleitungs-URL

Wenn Sie custom-url verwenden, wird der Gast nach der Datumsauswahl zu Ihrer URL weitergeleitet. Die URL erhält die Parameter checkin, checkout, widget_source, promo und Analysen, damit Ihre Seite den Buchungsprozess fortsetzen kann.

<cb-property-date-picker  
property-code="O2YXd0"  
custom-url="https://example.com/booking"
></cb-property-date-picker>

Häufig gestellte Fragen