Multi-Unterkünfte Kalender - Datumsauswahl Einbettung

Die <cb-multi-property-date-picker> ist eine Webkomponente für Unterkünfte, die zur selben Cloudbeds-Organisation gehören. Sie zeigt ein Dropdown-Menü zur Unterkunftsauswahl, Datumsfelder und eine Suchschaltfläche an. Gäste wählen eine Unterkunft aus, legen Check-in- und Check-out-Daten fest und klicken auf Suchen, um zur Buchungsmaschine oder zu einer benutzerdefinierten URL für diese Unterkunft weitergeleitet zu werden.

Diese Komponente benötigt das Attribut sub-domain. Der Wert muss die Subdomain deiner Cloudbeds-Organisation sein, nicht die Domain deiner Unterkunfts-Website oder eine individuelle URL der Buchungsmaschine einer Unterkunft.

Übersicht

Der Mehr-Unterkünfte-Modus ist für Websites gedacht, die einen Datumsselektor für mehrere Unterkünfte innerhalb einer Cloudbeds-Organisation anzeigen müssen, wie zum Beispiel eine Marke, Gruppe oder Unterkunftssammlung. Er eignet sich gut für:

• Startseiten von Organisationen oder Marken
• Abschnitte „Wähle eine Unterkunft“ + Datumssuche
• Landingpages, die mehrere Unterkünfte auflisten und Gäste in den Buchungsprozess der gewählten Unterkunft führen
• Jede Seite, auf der der Gast zuerst eine Unterkunft auswählen und dann die Daten festlegen muss

Die Komponente lädt die Liste der Unterkünfte der Organisation, zeigt ein durchsuchbares Dropdown-Menü an und leitet die Gäste nach Auswahl einer Unterkunft und der Daten zur Immersive Experience Buchungsmaschine (oder einer benutzerdefinierten URL) für diese Unterkunft weiter.

Bevor Sie beginnen

Bevor Sie den Mehr-Unterkünfte-Datumsselektor installieren, bestätigen Sie Folgendes:

• Ihre Unterkünfte gehören zur selben Cloudbeds-Organisation.
• Sie verfügen über die Organisations-Subdomain für Ihre Gruppen-Buchungsmaschinen-URL.
• Ihre Benutzerrolle beinhaltet Buchungsmaschinen-Rechte, um auf die Buchungsmaschineneinstellungen zuzugreifen und diese zu verwalten.
• Ihr Paket beinhaltet Zugriff auf Premium-Einbettungen oder Ihre Unterkunft hat bereits Premium-Einbettungen aktiviert.

Schritt 1: Fügen Sie das Cloudbeds-Skript hinzu

Fügen Sie das folgende Skript innerhalb des <head>-Bereichs Ihrer Website ein:

Laden Sie das Skript im <head> oder vor der Komponente im <body>, damit es ausgeführt wird, bevor das Komponententag geparst wird.

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

• Fügen Sie die Immersive Experience ganz am Anfang des <head> vor dem CMP-Tag hinzu und fügen Sie das Attribut ein, das verhindert, dass es 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"
• Klassifizieren Sie das untenstehende Skript als notwendig im CMP-Admin-Panel; auch hier kann es je nach Plattform unterschiedlich sein

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

Schritt 2: Fügen Sie das Skript für den Kalender-Datumswähler hinzu

Für den Multi-Unterkünfte-Modus müssen Sie die Subdomain der Organisation im Element übergeben:

<cb-multi-property-date-picker sub-domain="YOUR_SUB_DOMAIN"></cb-multi-property-date-picker>

Mit nur einem Subdomain zeigt die Komponente die standardmäßige Schaltfläche „Suchen“ an und verwendet die Standardsprache und -währung jeder Unterkunft, sobald eine Unterkunft ausgewählt wird.

Hinweis: Für den Multi-Unterkünfte-Kalender wird standardmäßig Englisch als Sprache und USD als Währung ausgewählt, sofern dies nicht durch benutzerdefinierte Parameter wie unten beschrieben überschrieben wird.

Es gibt kein globales custom-url-Attribut. Benutzerdefinierte URLs werden pro Unterkunft mit data-property-url-{code} festgelegt. Hat eine Unterkunft keine benutzerdefinierte URL, wird die standardmäßige gehostete URL der Buchungsmaschine verwendet.

Attribute

Was die Komponente erzeugt

• Beim Laden: Ein Unterkunftsauswahlfeld (durchsuchbares Dropdown-Menü), Check-in- und Check-out-Felder sowie ein Suchbutton (horizontal oder vertikal je nach layout). Das Dropdown-Menü listet alle Unterkünfte der Organisation auf. Durch Klicken auf ein Datumsfeld öffnet sich ein Kalender-Popover.
• Nach Auswahl einer Unterkunft: Der Datumswähler und Kalender verwenden die Einstellungen dieser Unterkunft (Verfügbarkeit, Einschränkungen, Regeln für denselben Tag usw.).
• Bei Suche (durch Klicken auf den Button): Der Gast wird (im selben Tab oder in einem neuen Tab, gesteuert durch open-in-new-tab) zur Buchungsmaschine (oder zur benutzerdefinierten URL) mit der ausgewählten Unterkunft, Check-in-, Check-out-Daten, Sprache und weiteren Abfrageparametern (z. B. Promo, Analysen) weitergeleitet.

So findest du deine Organisations-Subdomain

Der Wert sub-domain ist deine Organisations-Subdomain. Du findest sie in der URL deiner Gruppen-Buchungsmaschine. Es ist der Text, der vor .cloudbeds.com steht.

Im folgenden Beispiel lautet die URL der Gruppen-Buchungsmaschine alona.cloudbeds.com/manage. Die Organisations-Subdomain ist alona.

Du würdest sie so in die Komponente einfügen:

<cb-multi-property-date-picker sub-domain="alona"></cb-multi-property-date-picker>

Benutzerablauf

1. Der Gast sieht auf deiner Seite das Unterkunftsauswahlfeld, die Datumsleiste (Check-in, Check-out) und den Suchbutton.
2. Der Gast wählt eine Unterkunft aus dem Dropdown-Menü aus (er kann tippen, um zu suchen/filtern).
3. Der Gast klickt auf ein Datumsfeld → Ein Kalender-Popover öffnet sich.
4. Der Gast wählt das Check-in-Datum → Der Kalender hebt verfügbare Check-out-Daten hervor.
5. Der Gast wählt das Check-out-Datum → Der Suchbutton wird aktiv.
6. Der Gast klickt auf den Suchbutton → Er wird (im selben Tab oder in einem neuen Tab) zur Buchungsmaschine (oder deiner URL) für die ausgewählte Unterkunft mit den ausgewählten Daten weitergeleitet, wo er ein Zimmer auswählt und die Buchung abschließt.

Funktionen für mehrere Unterkünfte

• Durchsuchbares Unterkunfts-Dropdown: Gäste können tippen, um Unterkünfte nach Namen zu filtern.
• Benutzerdefinierte Reihenfolge: Verwenden Sie property-order, um die Reihenfolge der Unterkünfte im Dropdown-Menü zu steuern.
• Benutzerdefinierte Namen: Verwenden Sie data-property-name-{code}, um freundliche Namen für jede Unterkunft anzuzeigen.
• Benutzerdefinierte URLs: Verwenden Sie data-property-url-{code}, um Gäste für jede Unterkunft zu unterschiedlichen URLs zu leiten.
• Layout: horizontal (Standard) oder vertikal, passend zu Ihrem Seitenlayout.
• Wenn keine Unterkünfte geladen werden: Die Komponente wird trotzdem angezeigt; das Unterkunfts-Dropdown ist deaktiviert und zeigt einen Hover-Tooltip mit der Meldung „Keine Daten gefunden.“

Beispielanwendungen

Grundlegend (nur Organisations-Subdomain)

Dies ist Ihre Organisations-Subdomain. Wir arbeiten aktiv daran, diese ID auf der Unterkunftsseite Ihrer Organisation für einen einfachen Zugriff hinzuzufügen. Bis dahin wenden Sie sich bitte an den Support, der Ihnen die Organisations-ID umgehend bereitstellen kann.

<cb-multi-property-date-picker sub-domain="dcmcu2"></cb-multi-property-date-picker>

Mit optionalen Attributen

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 button-label="Verfügbarkeit prüfen"  
 layout="vertikal"  
 lang="es"  
 currency="eur"  
 class-name="my-multi-date-picker">
</cb-multi-property-date-picker>

Buchungsmaschine in neuem Tab öffnen

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 open-in-new-tab="true"
></cb-multi-property-date-picker>

Benutzerdefinierte Reihenfolge der Unterkünfte

Benutzerdefinierte Reihenfolge der Unterkünfte im Dropdown-Menü. Semikolon-getrennte Unterkunftscodes. Die Unterkünfte in dieser Liste erscheinen zuerst in der angegebenen Reihenfolge. Die übrigen Unterkünfte werden alphabetisch sortiert.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 property-order="2SI0CT;O2YXd0;PROP003"
></cb-multi-property-date-picker>

Benutzerdefinierte Unterkunftsnamen

Benutzerdefinierter Anzeigename pro Unterkunft. Verwenden Sie die Attribute data-property-name-{code}, wobei {code} der Unterkunftscode ist. Überschreibt die Standardnamen der Unterkünfte im Dropdown-Menü.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-name-O2YXd0="Downtown Hotel"  
 data-property-name-2SI0CT="Beach Resort"  
 data-property-name-PROP003="Mountain Lodge"
></cb-multi-property-date-picker>

Benutzerdefinierte Weiterleitungs-URLs

Benutzerdefinierte Weiterleitungs-URL pro Unterkunft. Verwenden Sie data-property-url-{code}-Attribute, wobei {code} der Unterkunftscode ist. Wenn eine Unterkunft ausgewählt wird und ein entsprechendes Attribut vorhanden ist, wird diese URL für die Weiterleitung verwendet. Andernfalls wird die Standard-URL der gehosteten Buchungsmaschine verwendet.

<cb-multi-property-date-picker  
 sub-domain="dcmcu2"  
 data-property-url-O2YXd0="https://example.com/downtown"  
 data-property-url-2SI0CT="https://example.com/beach"
></cb-multi-property-date-picker>

Fehlerbehebung