Advanced Option: Building a Group Booking Widget

Follow

This article is provided as a resource for those already familiar with HTML and CSS. The steps provided here are only suggested for experienced web developers. Cloudbeds does not offer web development services.

What is booking widget?

A “booking widget” is functionality that is provided by Cloudbeds as part of MyBookings 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 associations and hotel groups that have more than one property with mybookings set up, for easier searching and booking for guests. 

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 MyBookings 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 follow 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="post">
<input type="hidden" name="date_format" value="$date_format" />
<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="widget_date" />
<p>Check-Out:</p>
<input type="date" name="widget_date_to" />
<input type="submit" />
</form>

Legend:

  • $date_format: Date format that will be submitted by your widget. Supported values: “Y-m-d” for ISO dates (2016-08-25), “m/d/Y” for US format dates (08/25/2016), “d/m/Y” for UK format dates (25/08/2016).
  • $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 mybookings 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>

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”
Have more questions? Contact Support

Comments

Powered by Zendesk