Gruppenbuchungs-Buchungsmaschine – Wie man ein Gruppenbuchungs-Widget erstellt (Fortgeschrittene Option)

Juss Reyes

Aktualisiert 26. Oktober 2026 09:31

Dieser Artikel erklärt, was ein Buchungs-Widget ist und wie man ein Gruppenbuchungs-Widget für die Cloudbeds Buchungsmaschine erstellt.

Wichtige Hinweise

Dieser Artikel dient als zusätzliche Informationsquelle für diejenigen, die bereits mit HTML und CSS vertraut sind.

Die hier angegebenen Schritte sind nur für erfahrene Webentwickler empfohlen. Der Code kann veraltet sein und zusätzliche Anpassungen erfordern.
Cloudbeds bietet keine Unterstützung beim Erstellen eines Gruppenbuchungs-Widgets oder bei der externen Gestaltung/Entwicklung von Hotel-Websites an.
Wir bieten jedoch an:
- Professionell erstellte Websites, die vollständig in die Cloudbeds Buchungsmaschine integriert sind. Erfahre mehr über Cloudbeds Websites hier.
- Anpassungsservices für die Buchungsmaschine, klicke hier, um mehr zu erfahren.

Übersicht

Ein Buchungs-Widget ist eine Funktionalität, die Cloudbeds als Teil des Produkts Buchungsmaschine bereitstellt. Dabei kann das Hotel auf seiner eigenen Website ein Formular mit einfachen Feldern (Check-in-Datum und Check-out-Datum) integrieren, das nach Absenden den Gast mit den ausgewählten Parametern zur Buchungsseite weiterleitet.

Auf dieselbe Weise verfolgt ein Gruppenbuchungs-Widget das Ziel, dieselbe Funktionalität abzubilden, jedoch mit Unterstützung für mehrere Unterkünfte. Es richtet sich an Organisationen und Hotelgruppen, die mehr als eine Unterkunft mit der Buchungsmaschine eingerichtet haben, um Gästen die Suche und Buchung zu erleichtern.

Erfahre mehr über Organisation & Benutzer.

Widget-Typen

Ein widget basierend auf Unterkunft ist ein Widget, das dem Gast ermöglicht, auszuwählen, welches Hotel die Verfügbarkeit anzeigen soll. Die Übermittlung des Widgets leitet den Gast direkt zur Buchungsmaschine der Unterkunft mit den ausgewählten Parametern weiter.

Da es sich um ein Standard-HTML-Formular handelt, kann es an die Bedürfnisse der Verbands-Website mit Layout, CSS usw. angepasst werden, solange diese Standards (Parameternamen und Format) eingehalten werden.

Dies kann durch die Verwendung eines HTML-Formulars wie im folgenden Beispiel erreicht werden:

<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
            <input type="hidden" name="date_format" value="Y-m-d" />
            <p>Unterkunft:</p>
                <select name="widget_property">
                <option value="$property_id">$property_name</option>
                <option value="$property_id">$property_name</option>
                </select>
            <p>Check-in:</p>
            <input type="date" name="checkin" />
            <p>Check-out:</p>
            <input type="date" name="checkout" />
            <input type="submit" />
            </form>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
            <script>
                $( "#widgetBookingForm" ).on( "submit", function( event ) {
                    event.preventDefault();
                    var propertyName = $("[name=widget_property]").val();
                    var checkinDate = $("[name=checkin]").val();
                    var checkoutDate = $("[name=checkout]").val();
                    var url = $(this).attr('action');
                    url = url+propertyName+"#checkin="+checkinDate+"&checkout="+checkoutDate;
                    window.location.href = url;
                    });
            </script>

Code-Legende:

$property_id: Eine der Unterkunfts-IDs, die vom Widget unterstützt werden. Wenn Sie Hilfe bei der Suche benötigen, wenden Sie sich bitte an das Support-Team.
$property_name: Name der Unterkunft, die durch $property_id identifiziert wird

Dieser Widget-Typ leitet den Gast nicht zur Buchungsmaschine weiter, sondern zur Portal-Seite der Vereinigung, die die Ergebnisse aller Unterkünfte der Vereinigung anzeigt, gefiltert nach der ausgewählten Stadt.

Die Grundfunktion dieses Widgets besteht darin, dass der Gast zu einer formatierten URL weitergeleitet wird, die letztendlich dem folgenden Standard entspricht:

https://$association_portal_url/#/?city=$city&check_in=$check_in&check_out=$check_out

Wenn die URL korrekt formatiert ist, wird der Benutzer zur Portal-Seite weitergeleitet, wobei Stadt und Datumsangaben vorausgewählt sind.

Da es sich um ein Standard-HTML-Formular handelt, kann es an die Bedürfnisse der Vereins-Website mit Layout, CSS usw. angepasst werden, solange diese Standards (Parameter-Namen und Format) eingehalten werden.

Dies kann in jeder Sprache, client- oder serverseitig erfolgen. Das folgende Beispiel verwendet HTML, jQuery und JavaScript:

<form action="https://example.cloudbeds.com/#/" method="get">
<p>Stadt:</p>
<select name="city">
<option value="all">Alle Städte</option>
<option>Barcelona</option>
<option>Madrid</option>
</select>
<p>Check-in:</p>
<input type="text" name="check_in" />
<p>Check-out:</p>
<input type="text" name="check_out" />
<input type="submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var params = $(this).serialize();
var url = $(this).attr('action');
url = url+'?'+params;
window.location.href = url;
});
</script>

Code-Legende:

$city: Name der ausgewählten Stadt. Wird verwendet, um die Ergebnisse zu filtern.
$check_in: Check-in-Datum. Wird auf der Buchungsseite vorausgewählt.
$check_out: Check-out-Datum. Wird auf der Buchungsseite vorausgewählt.
$association_portal_url: URL der Portal-Seite der Vereinigung. Die URL sollte wie folgt aussehen: „associationname.cloudbeds.com“

Entdecken Sie die Gruppenbuchungs-Buchungsmaschine

Gruppenbuchungs-Buchungsmaschine – Wie man ein Gruppenbuchungs-Widget erstellt (Fortgeschrittene Option)

Wichtige Hinweise

Übersicht

Widget-Typen

Widget basierend auf Unterkunft

City-basiertes Widget

Kommentare