📌 This article answers the following questions:
- How do I create and configure a widget (booking engine) in elloha?
- How do I integrate my booking engine into my external website?
- How do I choose between the Full, Button-Link or Calendar formats?
- How do I enable Google Analytics or Facebook Pixel tracking in my widget?
Why is this important?
The booking engine (widget) is not just a simple button: it’s your best sales ally. By installing it on your website, you offer your customers a seamless experience, save valuable time by automating confirmations, and, above all, boost your direct sales without paying commission.
Follow the step-by-step guide
Step 1: Go to the booking engine (widget) management section
To set up the integration of your booking engine on your website, follow these steps:
In the left-hand side menu on your screen, click on Distribution.
Then click on the Booking Engines tab.
This page allows you to:
Create new widgets tailored to your website.
View the list of your existing widgets.
Edit the settings of an existing widget.
📌 Good to know: This section is essential for linking your calendar and rates directly to your website via the booking engine integration.
Step 2: Create your widget
Click on ‘Add a widget’ to configure the booking engine using one of the three available formats:
Full: the complete booking engine is displayed directly on your page for immediate visibility as soon as your customers arrive.
Button – Link: a ‘Book’ button is integrated into your menu or calls to action and opens the booking engine when the user clicks on it.
Calendar: your availability calendar is displayed prominently to highlight your free dates.
❗️Important: The Basic subscription allows you to create just one widget. However, if you activate your Basic website, a second widget will appear, corresponding to the one embedded in the site.
Enter the following information:
Widget name: Give your widget a name so you can identify it easily. This can be useful if you use several widgets on different websites or pages.
Booking engine language: Choose the language in which your booking engine will be displayed by default. This allows you to tailor the booking experience to your customers, particularly if you welcome international visitors.
(Users can change the language directly within the booking engine whilst browsing.)Return page URL: Specify the page to which your customers will be redirected after making a booking, or if they go back a page.
We recommend specifying the address of your homepage or a dedicated page.
Link to your privacy policy: You can also add a link to your terms and conditions and privacy policy page to inform your customers about how their personal data is used.
Select the products to feature on your booking engine
In the ‘Which products would you like to list?’ field, select the offers available to your customers when they make a booking:
Show all: all your available accommodation and services are displayed.
Limit the display: the display is restricted to specific categories, such as gift vouchers or concierge services.
💡 Tip: This setting allows you to offer a targeted booking engine, for example if you wish to dedicate a page on your website solely to the sale of your gift vouchers.
Choose which offers to display in your booking engine
The ‘Display offers’ field allows you to precisely define the services you wish to make visible on your booking engine.
Two options are available:
All my accommodation: to automatically display your entire catalogue.
Specific selection: to manually choose the accommodation, activities or services you wish to highlight on your website.
💡 Tip: This selection allows you to tailor the display of your booking engine to suit your business strategy or seasonal trends.
📌 Good to know: You can reuse the same widget on multiple pages or on different websites.
This allows you to easily integrate your booking engine into different locations (homepage, dedicated page, partner site) without having to recreate it.
❗️Important: Privacy policy
A privacy policy is a document that explains what personal data is collected, why, and how it is used and protected.
It provides users with clear and transparent information about how their data is used, as well as their rights (access, amendment, erasure), in particular in accordance with regulations such as the GDPR.
In summary, it serves to ensure transparency and the protection of personal data.
Step 3: Define the information required to make a booking
Certain details are requested automatically by the booking engine: the first name and surname of the main participant, the email address and the telephone number.
In the ‘Required fields for booking’ section, you can choose the additional information your customers will need to provide when making a booking.
In particular, you can enable the following fields:
Address
Postcode
Town
Names of participants
This information enables you to track the booking and facilitates communication with your customers.
Step 4: Enable the Opt-in option (optional)
Enabling the Opt-in option allows you to request your customers’ consent to receive your email communications.
A tick box is added to your booking engine at the time of confirmation.
Your customers can choose whether or not to accept your marketing communications (offers, events and promotions).
This enables you to build a qualified and reusable contact database for your future marketing activities (follow-ups, special offers, loyalty schemes).
📌 Good to know: Using the opt-in feature is recommended to ensure your database complies with data protection regulations (GDPR).
Step 5: Set up your tracking and analytics tools
To analyse your customers’ journey and the source of your bookings, you can integrate your tracking tools directly into the widget.
In the ‘Track my bookings’ section, you can integrate various analytics tools that will help you track your visitors’ actions and the bookings generated.
In particular, you can add:
Your Google Analytics 4 code
Your Facebook Pixel
Additional scripts
Step 6: Configure your widget’s display
Select your engine’s display format from the top right of your screen, choosing from the three available options:
Full
Full
The full engine is displayed directly on your page for immediate visibility as soon as your customers arrive.
Button – Link
Button – Link
A ‘Book’ button is integrated into your menu or calls to action and opens the booking engine when the user clicks on it.
Calendar
Calendar
Your availability calendar is displayed prominently to highlight your free dates.
💡 Tip: Choose the widget format based on your website’s user experience and the booking journey you want to offer your customers.
Step 7: Customise the look of your widget
Customise your widget to create a booking engine that reflects your brand and makes it easy for your future customers to book.
You can change:
the colour of the module
the colour of the text and icons
the level of transparency
the rounding of the corners
the style of the fields
You can also display a link to your gift cards or vouchers.
💡 Tips
- Use dark text on a light background: for example, black text on a white background (hex code #FFFFFF) or light text on a dark background: make sure the font colour you choose stands out clearly against your background colour.
-
Using specific hexadecimal codes (or the colour palette) ensures high contrast.
Step 8: Integrate your booking engine into your website
Your booking engine is ready; there are three ways to put it online and make the most of it:
Copy the link: to share it via email or text message, or to link it to a call-to-action button on your website or social media
Copy the script (widget): this involves copying a code to embed your booking engine directly into the pages of your website.
QR code: Download a QR code to be scanned for your printed materials (flyers, business cards or welcome leaflets)
Step 9: Save your widget
Confirm and finalise your widget’s configuration by clicking ‘Save’.
💡 Reminder: Make sure your prices and schedule are up to date before publishing the widget on your website.