Skip to main content
All CollectionsDirect BookingSetup
Booking Engine - Integrate the booking engine with your website using links and widgets
Booking Engine - Integrate the booking engine with your website using links and widgets
Updated over a week ago

💡 This guide is for SiteMinder's direct booking engine. If instead you are using Little Hotelier’s integrated booking engine, please see: Link the integrated booking engine to your website

Integrating the Booking Engine to your website

Once you have set-up your property in the booking engine, you will need to integrate the booking engine with your website to allow your guests to make direct bookings online. Integration means that your property’s website will be linked to the booking engine through some links and widgets.

To find the simple URL to link from your website to the Booking Engine:

  1. Click on Setup

  2. Click on Property

  3. Your link will be under " Booking Engine URL " on the left side of the page

If you cannot find any link to the Booking Engine here, it is possible that the URL was not yet set up by our team. Contact our support team if you are unable to continue the integration due to the missing link.


What are widgets?

Widgets act as an interactive component on your website’s interface that get the requested information from your booking engine and present it to the customer.

Widgets can be integrated into your website by someone with technical knowledge of web development. We advise not to load codes in the header when adding code in the bottom of the page for speed purposes.

Widgets allow you to redirect the users to a particular area on your website by creating web links from your Booking Engine.

Widget Wizard
You can use the Widget Wizard to see the widgets available to integrate the booking engine into your website. The Widget Wizard will also provide you with the html code to place this widget on your website.

To use the Widget Wizard:

  1. Click on Setup > Integrations

  2. Select Go to the Widget Wizard

  3. A popup will show up " Embedding Your Booking Engine " with your booking engine's URL. Press Next

  4. On the left side, click Select Widget.

  5. When you have selected a Widget, the Widget Wizard will show you a preview and the code to place into your website 's code

widgetwizard


Types of widget

There are currently three widgets available that you can use to integrate the booking engine with your website.

Hyperlink / Button

The hyperlink widget creates a direct link to the Booking Engine. If you want to have a simple button in your website that says something like "Book Now" which sends the guest to the booking engine when clicked, then you can use this widget.

This widget is the least complex and you can fulfil the same function with a simple html link to your booking engine URL instead (an html element "a"). You can find the Booking Engine URL by clicking Setup and then Property , your link will be under " Booking Engine URL " on the left side of the page.

Customising the Hyperlink
When using the widget from the Widget Wizard, you have some options to customise the way the booking engine will open when guests click on the direct link on your website:

Default Date Settings
Specify pre-selected earliest check in date - Ticking this box allows you to specify the Check-In Date displaying when opening the booking engine. Guests will be able to change dates when on the booking engine.

Occupancy Settings
Specify Occupancy - Ticking this box allows you to specify the occupancies (Adults, children, infants) displaying when opening the booking engine. Guests will be able to change occupancies when on the booking engine.

Language and Currency
Language - You can specify what language the booking engine should display when opening. This is useful if you have your own website translated, and want language-specific links for the booking engine.
You need to set up the languages you want your booking engine to display.
Customers can change the language when on the booking engine.

Specify an alternative Currency - You can specify what currency the booking engine should display when opening. This is useful if you have your own website translated, and want language-specific links for the booking engine.
Customers can change currency when on the booking engine.

Specify value for custom field - Ticking this box allows you to specify a value for the text field of a a custom field that appears on the check out page. This requires the custom field to be active.

Advanced Users
Enabled Debug Information - This setting controls if useful information is shown in the Browser Console. This can be helpful, for example, to identify if Google Analytics has been correctly identified.

After adjusting the customisation, remember to click the blue Update Embed Code to reflect the changes in the provided preview and code.

customisation

Datebox / Calendar Selection Widget

Enables your guest to select a check-in and check-out date range to check availability through the Booking Engine.
Clicking the Check Availability button displays a list of available Rooms and Rates based on the selected date range and number of occupants.

User-added image

Property Availability grid

Allows your customers to view an interactive grid of rates and availability including room details, inclusions, and photos.
By embedding the code, the web page will display a grid with dates and pricing on your website using the theme colours set in the property's extranet.

Region-wide date selection (property groups only)

Allows your guests to view availability based on their selected region for property groups with multiple locations.
Clicking Check Availability will display available rooms with their pricing based on the selected region, property, number of occupants and the date range.
This widget is not available in the Widget Wizard: you will need to contact the support team to request it for your group.

User-added image

Creating a room type specific URL

You may have a website that describes a particular room type and you may want to link the "Book now" button to that specific room type only.
For this situation, you are able to define a room type ID in the URL of your booking engine.
This will allow you to display 1 specific room type upon the first load to your guest.

Creating a room type specific URL with the room type ID:

  1. In your extranet, go to Setup and click the Rooms & Rates tile

  2. Select the room type you wish to link

  3. In the browser, check the URL of the page you'er in. It will look like this: https://app-apac.thebookingbutton.com/extranet/properties/16055/room_types/171710/edit

  4. The number after room_types/ in the URL is the ID of this specific room

  5. Attach room_type=YourroomID , at the end of your booking engine URL (You can find your booking engine URL under Setup > Property > General)

If you use this URL in your website 's Book Now button, it will link directly to your booking engine displaying only that specific room type.

Please note:
The booking engine will only display this specific rom type by itself when opened via the linked Book Now button from your website. If your guest then changes dates or occupancies in the calendar on your booking engine, all room types will display.
This is because the calendar shows the available dates on a property level and not room specific level. So the calendar might show available dates to the guest, even though the specified room type itself is not available and therefore all room type options will display as search results.

Linking to a specific promotion code

You can create URLs for your booking engine, that will display the booking engine to guests with a promotion code already applied.

You can create promotion codes as you need them and then link the promotion code to the applicable room rates. Note that you can also create a promotion code for a group of room types, or create any other kind of group that you would like for each promotion code (for example have a link that only opens all your refundable rates, making the non-refundable invisible). You can create a promotion code without a discount if you are wanting to use it to create a kind of group like "refundable" or "non-refundable".

You can then create a special URL (web address) that links to each promotion code individually. You can take the url of your property from " Setup > Property" under Booking Engine URL and then add at the end: ?promocode=PasteYourPromoCodeHere

For example:

Did this answer your question?