Zimmer Kalender - Datumsauswahl Einbettung

Dies bietet eine einfache Lösung, um einen Jetzt buchen-Button für ein bestimmtes Zimmer auf Ihrer Website hinzuzufügen – ohne den gesamten Buchungsablauf neu zu gestalten.

Das Zimmer-Kalender-Embed ist eine leichte immersive Webkomponente, die einen Kalender öffnet, Gästen die Auswahl von Datumsangaben ermöglicht und sie direkt mit allen vorausgefüllten Informationen zu Ihrer Buchungsmaschine weiterleitet. Weniger Reibung, mehr Buchungen. Alle profitieren davon.

Was das ist (und wann Sie es verwenden sollten)

Verwenden Sie den Zimmer-Kalender, wenn Gäste ein bestimmtes Zimmer oder eine Einheit buchen sollen und nicht nur „die Unterkunft allgemein“. Er eignet sich ideal für:

• Detailseiten von Zimmern
• Zimmer-Listen-Seiten
• Marketing- oder Kampagnen-Landingpages
• Promotionsseiten mit einem einzelnen Zimmer

Was Gäste erleben

So sieht der Ablauf aus Sicht eines Gastes aus:

1. Gast klickt auf Jetzt buchen
2. Ein Kalender öffnet sich in einem modalen Fenster
3. Gast wählt Check-in- und Check-out-Datum
4. Gast klickt auf Weiter
5. Ein neuer Tab öffnet sich mit der konfigurierten Buchungs-URL, bereits vorausgefüllt mit:
   • Ausgewählten Datumsangaben
   • Dem korrekten Zimmer oder der Einheit

Was Sie vor dem Start benötigen

Stellen Sie sicher, dass Sie Folgendes haben:

• Ihre Cloudbeds-Buchungsmaschine (Unterkunftscode)
• Die Zimmer-ID, die Sie buchen möchten (unten erklärt)
• Zugriff, um den HTML-Code Ihrer Website zu bearbeiten

Um Ihren Unterkunftscode zu finden, können Sie Ihren Link zur Buchungsmaschine heranziehen und die eindeutige Kennung extrahieren.

Option 1: Zimmertyp-ID

Verwenden Sie diese Option, wenn Gäste ein beliebiges verfügbares Zimmer innerhalb einer Zimmerkategorie buchen sollen. Um Ihre Zimmer-ID (rid) zu finden:

1. Gehen Sie zu Konto → Einstellungen ➜ Unterkunft →  Registerkarte Zimmer

2. Klicken Sie dann auf den Namen der Unterkunft (Zimmertyp), den Sie benötigen

   

3. Schauen Sie in die Adressleiste des Browsers; die ganz am Ende der URL angezeigte Nummer ist die ID des Zimmertyps

   

Zum Beispiel ist bei der URL https://hotels.cloudbeds.com/connect/100000#/manage/roomTypes/123456 → die Zimmer-ID 123456.   

Option 2: Einheiten-ID

Verwenden Sie diese Option, wenn Gäste ein bestimmtes physisches Zimmer (Einheit) buchen sollen, anstatt irgendein Zimmer innerhalb eines Zimmertyps. So finden Sie Ihre Einheiten-ID:

1. Gehen Sie zu Konto → Einstellungen ➜ Unterkunft →  Registerkarte Zimmer, und suchen Sie dann die gewünschte Zimmer-Einheit, die Sie einbetten möchten.
2. Klicken Sie neben der spezifischen Zimmer-Einheit auf Bearbeiten.
3. Öffnen Sie die Entwicklertools Ihres Browsers und wählen Sie die Registerkarte Netzwerk aus.
4. Suchen Sie in den Netzwerk-Anfragen den API-Aufruf [find_one].
5. Finden Sie im Antwort-Payload das Feld mit der Bezeichnung "id" — dieser Wert ist die Einheiten-ID, die Sie verwenden werden.

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

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

Eine Liste von Best Practices, wenn ein Benutzer ein CMP verwendet:

• Fügen Sie die Immersive Experience ganz am Anfang des <head>-Bereichs vor dem CMP-Tag hinzu und verwenden Sie das Attribut, das verhindert, dass sie blockiert wird. Es ist besser, nicht alles in der Dokumentation anzugeben, da diese 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 im CMP-Administrationsbereich 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>

Schritt 2: Füge den Datumsauswahl-Button hinzu

Platziere diesen Tag an der Stelle, an der der Jetzt buchen-Button erscheinen soll:

<cb-accommodation-date-picker  
property-code="DEIN_UNTERKUNFTS_CODE"  
rid="DEINE_ZIMMER_ID"
></cb-accommodation-date-picker>

Nach dem Hinzufügen wird der Button automatisch angezeigt.

Optionale Anpassung

Du kannst den Button und die Benutzeroberfläche mit diesen optionalen Attributen anpassen:

Beispiel:

<cb-accommodation-date-picker  
property-code="YOUR_PROPERTY_CODE"  
rid="YOUR_ROOM_ID"  
button-label="Dieses Zimmer reservieren"  
lang="de"
custom-url="https://example.com/booking"
></cb-accommodation-date-picker>

Kalenderfunktionen, die Gäste sehen

Je nach den Einstellungen Ihrer Unterkunft kann der Kalender Folgendes anzeigen:

• Buchungsbeschränkungen (Mindestaufenthalt, gesperrte Daten usw.)
• Täglich niedrigster verfügbarer Tarif
• Check-in am selben Tag (wenn aktiviert)
• Vollständig lokalisierte Sprache und Formatierung

All dies wird direkt aus Ihrer Cloudbeds-Konfiguration übernommen – es ist keine zusätzliche Einrichtung erforderlich.

Einstellungen der Unterkunft, die das Verhalten beeinflussen

Diese Funktionen werden in Cloudbeds gesteuert:

• Reservierungen am selben Tag – Ermöglicht Buchungen für heute
• Einschränkungsindikatoren – Zeigt Buchungsregeln im Kalender an
• Anzeige der niedrigsten Raten – Zeigt die günstigste verfügbare Rate pro Tag an

Wenn etwas nicht angezeigt wird, ist der erste Schritt Ihre Cloudbeds-Einstellungen.