Cloudbeds Booking Engine Immersive Experience 2.0 einrichten und anpassen

Einführung

Die Cloudbeds Booking Engine Immersive Experience 2.0 bettet den Buchungsprozess direkt in die Website Ihrer Unterkunft ein, ohne iframe-basierte Maskierung zu verwenden. Ihre Website muss über eine Zulassungsliste autorisiert sein, und das unterstützte Loader-Skript muss im HTML der Website installiert sein, bevor die Webkomponente gerendert werden kann.

Verwenden Sie diese Anleitung für die Implementierung selbst sowie für technische Überlegungen, die den Buchungsablauf beeinflussen können, einschließlich Consent Management Platforms (CMPs), Website-Builder, Tracking, Suchparameter und benutzerdefinierte Gestaltung. Für einen allgemeinen Überblick über die Buchungsmaschine siehe Cloudbeds Buchungsmaschine: Alles, was Sie wissen müssen.

Inhaltsverzeichnis

• Über Immersive Experience 2.0
• Immersive Experience 2.0 installieren
• Cookie-Zustimmung und CMP-Einrichtung
• Einrichtungsüberlegungen und Fehlerbehebung
• Suchparameter und Tracking
• Immersive Experience 2.0 anpassen

Über Immersive Experience 2.0

Die Cloudbeds Buchungsmaschine Immersive Experience 2.0 ist eine webbasierte Komponente, mit der Gäste die Verfügbarkeit suchen, Zimmer und Raten auswählen, Gästedaten eingeben und die Zahlung direkt über die Website Ihrer Unterkunft abschließen können. Sie kann als Vollseiten-Erlebnis implementiert oder über einen Jetzt buchen-Button geöffnet werden.

Wesentliche Vorteile

Die Immersive Experience 2.0 bietet einzigartige Funktionen, die das Buchungserlebnis Ihrer Gäste auf Ihrer eigenen Website verbessern:

• Höhere Konversionsraten: Weniger Klicks, schnellere Ladezeiten und ein einheitliches Markenerlebnis führen zu mehr Buchungen.
• Mehr Anpassungsmöglichkeiten: Gestalten Sie ein einzigartiges und unvergessliches Gästeerlebnis ohne die Einschränkungen eines Standard-iframes.
• Datengetriebenes Wachstum: Greifen Sie auf wichtige Kennzahlen und Einblicke zu, um Ihren Buchungsprozess zu optimieren und Direktbuchungen zu steigern.
• Mehr Vertrauen: Der sichere, nahtlose Buchungsablauf stärkt das Vertrauen der Gäste und motiviert sie, die Reservierung abzuschließen.

Webbasierte vs. iframe-basierte Komponenten

Im Gegensatz zu iframe-basierten Systemen bietet diese integrierte webbasierte Komponente:

• Schnellere Ladezeiten der Website
• Erweiterte Markenanpassung
• Einheitlicher Buchungsablauf, der sicherstellt, dass Gäste von der ersten Suche bis zum Abschluss der Zahlung auf der Website bleiben

So sieht es aus

Die Immersive Experience 2.0 bietet zwei flexible Einbettungsoptionen, die zum Design und Nutzerfluss der Website Ihrer Unterkunft passen. Sie können wählen, ob Sie eine Vollseiten-Immersive Experience einbetten oder eine Pop-up-Immersive Experience erstellen und einbetten möchten.

• Das Full-Page-Embed funktioniert genau so, wie der Name sagt: Es platziert die komplette Buchungsmaschine direkt auf einer Seite deiner Website und bietet den Gästen eine durchgängige, vollständig immersive Buchungserfahrung von Anfang bis Ende.

Das Full-Page-Embed hält den Gast auf der Website der Unterkunft, während er verfügbare Zimmer sucht, Raten überprüft und seine Reservierung zusammenstellt.

Während des Check-outs geben Gäste ihre Kontaktdaten, optionale Zusatzinformationen, weitere Gäste und Kommunikationspräferenzen ein, ohne den eingebetteten Buchungsprozess zu verlassen.

Vor Abschluss der Buchung können Gäste die Check-in-, Check-out-, Stornierungs- und weitere Allgemeine Geschäftsbedingungen der Unterkunft überprüfen.

• Die Pop-up-Embed-Option bietet eine elegante und moderne Alternative. Wenn ein Gast auf den Button „Jetzt buchen“ klickt, schiebt sich ein Seitenpanel sanft vom Bildschirmrand herein und bietet eine kompakte, aber voll funktionsfähige Buchungserfahrung, ohne die aktuelle Seite zu verlassen.

Bei der Pop-up-Implementierung öffnet der Gast die Immersive Experience über den „Jetzt buchen“-Button der Unterkunft, während die ursprüngliche Website hinter dem Buchungsfenster sichtbar bleibt.

Der Buchungsprozess umfasst:

• Verfügbarkeitsuche
• Zimmerauswahl
• Ratenanzeige
• Upselling-Möglichkeiten
• Eingabe von Gastinformationen
• Sichere Zahlungsabwicklung

Preisgestaltung und Verfügbarkeit

Der Zugriff auf Immersive Experience 2.0 hängt von Ihrem Cloudbeds-Abonnement ab. Wenn Premium-Einbettungen in Ihrem Paket enthalten sind, können Sie Immersive Experience 2.0 im Premium-Bereich der Einbettungen-Registerkarte aufrufen.

Wenn Premium-Einbettungen nicht in Ihrem Paket enthalten sind, kann im Premium-Bereich die Option Vertrieb kontaktieren angezeigt werden. Klicken Sie auf Vertrieb kontaktieren, um weitere Informationen zum Upgrade auf ein Paket mit Premium-Einbettungen anzufordern.

Benutzerdefinierte Zahlungsmethoden und Gateway-Unterstützung

• Empfehlungen zur Gateway-Unterstützung: Wir empfehlen nicht, nicht unterstützte Zahlungsgateways in der Immersive Experience zu verwenden. Sobald Gateways nicht mehr auf einer Cloudbeds-Domain liegen, haben wir keine Kontrolle über Sicherheit oder PCI-Konformität.
• Aktuelle Einschränkungen: Benutzerdefinierte Zahlungsmethoden sollten derzeit nur in gehosteten Umgebungen verwendet werden.
• Zukünftige Unterstützung: Das Cloudbeds Payments-Team arbeitet daran, offizielle Unterstützung für diese Gateways über benutzerdefinierte Verbindungen innerhalb der PMS-Benutzeroberfläche bereitzustellen. Dieses Feature ist für die Veröffentlichung im Jahr 2026 geplant. Kunden können mit genaueren Informationen zum Zeitpunkt der Veröffentlichung rechnen, sobald wir uns dem Lieferdatum nähern.
• Support-Weg: Für implementierungsspezifische Anleitungen oder Fragen zu benutzerdefinierten Zahlungsmethoden wenden Sie sich bitte direkt an unser Cloudbeds Payments-Team. Dieses verwaltet das gesamte Payments-SDK und ist am besten geeignet, Ihnen zu helfen.

Immersive Experience 2.0 installieren

Schließen Sie die folgende Einrichtung ab, um Ihre Website-Domain zu autorisieren, das unterstützte Immersive Experience-Skript zu laden und die Komponente der Buchungsmaschine zu Ihrer Website hinzuzufügen. Die Schritte gelten sowohl für die Vollseiten- als auch für die Jetzt buchen-Button-Implementierungen.

Schritt 1: Premium-Einbettungen-Zugang bestätigen

Schritt 2: Fügen Sie Ihre Domain zu den zugelassenen Domains hinzu

Fügen Sie die Domain, auf der Sie die Immersive Experience 2.0 installieren möchten, im Abschnitt Zugelassene Domains der ausgewählten Premium-Einbettung hinzu. Sie können bis zu 5 Domains hinzufügen.

1. Wählen Sie im Kontomenü die Einstellungen
2. Klicken Sie auf Buchungsmaschine
3. Klicken Sie auf die Registerkarte Einbettungen.
4. Wählen Sie im Abschnitt Premium die Immersive Experience-Option aus, die Sie installieren möchten.
5. Klicken Sie in der Karte Zugelassene Domains auf Domain hinzufügen.
6. Geben Sie die Domain ein, auf der die Immersive Experience installiert wird, und speichern Sie Ihre Änderungen.

Schritt 3: Fügen Sie das Immersive Experience-Skript hinzu

Fügen Sie das folgende Skript in das <head>-Element des HTML-Dokuments Ihrer Website ein:

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Schritt 4: Betten Sie die Buchungsmaschine ein

Sie können die Immersive Experience auf zwei Arten darstellen:

• Standardmodus (Vollseiten-Einbettung): Auch bekannt als „Vollseiten-Einbettung“, ist dies der Standardmodus, bei dem die Buchungsmaschine vollständig in die Host-Website integriert ist. Um sie einzubetten, fügen Sie den folgenden Code-Schnipsel an der Stelle im HTML ein, an der sie angezeigt werden soll:

<cb-immersive-experience mode="standard" property-code="{PROPERTY_CODE}" />

• Popup-Modus (Jetzt buchen-Button): In diesem Modus wird die Buchungsmaschine als Popup mit fester Position und Overlay dargestellt. Um einen Jetzt buchen-Button hinzuzufügen, der die Immersive Experience in einem Popup öffnet:

<cb-book-now-button property-code="{PROPERTY_CODE}" />

Cookie-Zustimmung und CMP-Einrichtung

Wenn Ihre Website eine Consent Management Platform (CMP) verwendet, konfigurieren Sie die Immersive Experience so, dass die erforderlichen Cloudbeds-Ressourcen als essenziell behandelt werden und nicht blockiert sind, bevor der Buchungsablauf geladen werden kann. Befolgen Sie die anbieter-spezifische Einrichtung unten, bevor Sie die Website-Änderungen veröffentlichen.

Verwenden Sie die für Ihre CMP zutreffende anbieter-spezifische Einstellung:

• Cookiebot: data-cookieconsent="ignore"
• OneTrust: data-ignore-consent="true"
• Quantcast: data-quantcast-ignore="true"
• Termly: Fügen Sie die untenstehende benutzerdefinierte Blockierungskarte vor dem Termly-Skript ein, idealerweise nahe am Anfang des HTML-Codes.

<script data-termly-config>
 window.TERMLY_CUSTOM_BLOCKING_MAP = {
  "cloudbeds.com": "essential",
  "clientstream.launchdarkly.com": "essential",
  "clientsdk.launchdarkly.com": "essential",
  "tile.openstreetmap.org": "essential",
  "tokenex.com": "essential",
  "stripe.com": "essential",
  "stripe.network": "essential",
  "braintreegateway.com": "essential",
  "dlocal.com": "essential",
  "authorize.net": "essential",
  "pagosonline.net": "essential",
  "paypal.com": "essential",
  "adyen.com": "essential"
 };
</script>

Klassifizieren Sie den Immersive Experience Loader in Ihrer CMP-Konfiguration als notwendig oder essenziell. Verwenden Sie den aktuellen Loader-Einstiegspunkt unten. Die direkte Verwendung von cb-immersive-experience.js ist veraltet.

<script
  data-entry="immersive"
  src="https://static1.cloudbeds.com/booking-engine/latest/loader.js"
  nonce="+imGC13HmyB6zTZ1eTnZMw=="
  integrity="sha384-hd98w88pqnDT+lRLwyII/mRmbacols+VWYZF3HKdxnIlTYO+cF38GA1/I/+V8U4a"
  crossorigin="anonymous"
  type="text/plain"
  data-categories="essential"
></script>

Einrichtungshinweise und Fehlerbehebung

Die folgenden Abschnitte heben Verhaltensweisen und Implementierungsdetails hervor, die vor dem Livegang hilfreich zu wissen sind.

<style>
/* Geltungsbereich auf die Buchungsmaschinen-Wurzel beim Überschreiben */
.cb-bookingengine-root {
  --booking-engine-zIndices-sticky: 1100;
  --booking-engine-zIndices-modal: 1400;
  --booking-engine-zIndices-popover: 1500;
  --booking-engine-zIndices-tooltip: 1800;
}
</style>

Suchparameter und Tracking

Immersive Experience kann unterstützte Suchparameter beim ersten Laden der Anwendung auslesen und mit webseitenbasierten Analyse- und Werbetools zusammenarbeiten. Verwenden Sie die untenstehenden Referenzabschnitte, wenn Sie Suchwerte übergeben, das Tracking konfigurieren oder die Parameter von Google Hotel Ads verstehen möchten.

Immersive Experience 2.0 anpassen

Gestalten Sie die Immersive Experience mit Komponentenattributen sowie eigenem CSS/JS auf Ihrer Website individuell.

<cb-book-now-button
  property-code="{PROPERTY_CODE}"
  class-name="cb-book-now-button"
  label="Jetzt buchen"
  height="90vh"
  width="90vw"
/>

<style data-cb-immersive-experience-root>
  :is(#cb-bookingengine, .cb-bookingengine-root) {
    h1 {
      font-family: serif;
      font-size: 24px;
    }
  }
</style>

Nächster operativer Schritt

Nachdem Sie Immersive Experience 2.0 auf Ihrer autorisierten Domain installiert und getestet haben, sehen Sie sich die Anleitung zur Registerkarte Einbettungen der Cloudbeds Booking Engine an, wenn Sie weitere Einbettungsoptionen vergleichen oder konfigurieren möchten.