Group Booking Engine - How to build a Group Booking Widget (Advanced Option)

Juss Reyes

Updated July 09, 2024 18:11

This article explains what is a booking widget and how to build a Group Booking Widget for the Cloudbeds Booking Engine.

Important things to note

This article is provided as an additional informational resource for those already familiar with HTML and CSS.
The steps provided here are only suggested for experienced web developers. The code may become outdated and require additional work on it.
Cloudbeds does not offer assistance with building a group booking widget, or with external hotel website design/development.
We do offer:
- Professionally built websites, fully integrated with the Cloudbeds Booking Engine. Learn more about Cloudbeds Websites here.
- Booking Engine customization services, click here to learn more.

Overview

A booking widget is functionality provided by Cloudbeds as part of the Booking Engine product, where the hotel can integrate with their own websites a form with simple fields (check-in date and check-out date) that, when submitted, will redirect the guest to the booking page, with the parameters selected.

The same way, a group booking widget goal is to replicate the same functionality, but supporting multiple properties. It is meant for organizations and hotel groups that have more than one property with the Booking Engine set up, for easier searching and booking for guests.

Learn more about Organization & Users.

Widget types

Property-based widget

A property-based widget is a widget that allows the guest to choose which hotel should return availability. The submission of the widget will transfer the guest directly to the hotel Booking Engine page with the parameters selected.

As it is a standard HTML form, it can be adapted to the association website needs with layout, CSS, etc. As long as it follows these standards (parameter names and format).

This can be achieved by using an HTML form as the example below:

<form action="https://hotels.cloudbeds.com/reservas/" method="get" id="widgetBookingForm">
            <input type="hidden" name="date_format" value="Y-m-d" />
            <p>Property:</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 legend:

$property_id: One of the property IDs that will be supported by the widget. If you need help to find it, please contact support team.
$property_name: Name of the property ID identified by $property_id

City-based widget

This widget type will not redirect the guest to the Booking Engine page, instead, it will be redirected to the association portal page that will show the results of all properties that belong to the association filtered by the selected city.

The basic functionality of this widget is that it should redirect the guest to a formatted URL, that in the end will be on the following standard:

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

If the url is formatted correctly, the user will be redirected to the portal page, with the city and dates pre-selected.

As it is a standard HTML form, it can be adapted to the association website needs with layout, CSS, etc. As long as it follow these standards (parameter names and format).

This can be done in any language, client or server-side, the example below uses HTML, jQuery and JavaScript:

<form action="https://example.cloudbeds.com/#/" method="get">
<p>City:</p>
<select name="city">
<option value="all">All Cities</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 legend:

$city: Name of the selected city. It will be used to filter the results.
$check_in: Check-in date. It will be pre-selected on booking page.
$check_out: Check-out date. It will be pre-selected on booking page.
$association_portal_url: Url of the portal page related to the association. The url should look like: “associationname.cloudbeds.com”

Explore the Group Booking Engine