Installing the direct-booking widget on your hotel website

About 30 minutes plus testing · you need website edit access and an activated widget licence

The direct-booking widget reads live availability from your PMS and writes confirmed reservations straight back. This guide takes you from embed code to a tested booking flow on the three most common website setups.

Step 1 — Activate the widget licence

If you have not already, add the booking-widget module to your basket and complete checkout. Activation (API key handshake + room mapping) is normally done within 24 hours; you will receive an email when the widget is ready to embed.

Step 2 — Copy the embed code

In your client area, open the widget’s installation tab. You get two lines: a script tag and a placeholder div with your property ID. Keep them together — the script looks for the div at load time.

Step 3 — Paste it into your site

• WordPress: use a Custom HTML block where the booking section should appear, or paste into your theme template if you want it site-wide. Page builders (Elementor, WPBakery) have equivalent HTML widgets.
• Webflow: add an Embed element and paste both lines. Publish the site — the widget does not render in the designer preview.
• Hand-built sites: paste before the closing body tag on any page where bookings should be possible; the widget initialises itself.

Step 4 — Map room types and rates

The widget pulls room types, rate plans and availability from your PMS automatically, but the display names shown to guests come from your mapping screen. Check that each your PMS room type maps to one widget entry, that sold-out room types are set to hide, and that your cancellation wording matches what you actually load into rate-plan descriptions.

Step 5 — Style it to your brand

Choose one of the twelve templates in the client area, then adjust accent colour, button radius and typography scale. Templates respect your site’s font stack by default; forcing a specific font requires one line of CSS documented in the installation tab. All templates meet WCAG 2.1 AA contrast.

Step 6 — Test end to end

Make a test booking on a real device: pick dates, enter guest details, complete the reservation and confirm it appears in your PMS with the correct rate and source tag. Then cancel it in your PMS and watch the widget free the inventory. Also test a same-day arrival and a multi-room search — those two paths catch most mapping mistakes.