Advisory guide · updated 29 July 2026

Installing the Direct Deal Widget on a boutique hotel website

A featherweight 38 KB booking form that does not fight the aesthetic of a serif-heavy boutique site. This is the installation script we walk through on Hotelminder onboarding calls.

Of every module on the Hotelminder shortlist, Direct Deal Widget has the shortest install path. Two working days from the scoping call to a widget rendering live on your staging domain. But short does not mean careless — the rollout still needs a DNS record, a design pass, and a two-week A/B against your existing booking engine before you should switch the traffic over. This guide is the exact sequence we run for a boutique property.

Before you touch any code

Confirm three things. First, your website has a single owner or a working relationship with the agency that maintains it — the widget is one script tag, but if your site is on a locked-down enterprise CMS with no deploy access, the install can drag out into weeks. Second, you have designer access to your brand tokens (fonts, colour hexes, radius, letter spacing) or the agency can produce them in a few hours. Third, your SiteMinder connection to Hotelminder is green — see the connection guide if not.

Step 1 — DNS entry for the widget origin

The widget loads from widget.mindermod.org, which is fine, but for boutique properties we prefer the widget to appear to load from your own domain. Add a CNAME record: book.your-domain.comwidget.mindermod.org. Wait for propagation (usually under twenty minutes on Cloudflare, sometimes up to an hour on legacy registrars). Once it resolves, we issue a Let's Encrypt certificate on our side automatically — you do not need to manage the TLS.

Step 2 — Drop the script tag

Add a single line to the page where the widget should render. For most boutique hotels this is either the homepage hero or a dedicated /book page. The tag looks like this:

<script src="https://book.your-domain.com/hm.js" data-property="your-property-id" async></script>

Then a placeholder element where the widget will mount: <div id="hm-book"></div>. That is the full markup. Everything else — dates, room selection, guest details, upsells — is rendered by the widget itself, driven by the availability and rates it reads live from your SiteMinder subscription over the official SiteMinder API.

Step 3 — Tokens.css for your palette

The widget ships with three unopinionated skins (editorial serif, sans minimal, boutique navy). Pick the closest to your brand and then override with a Tokens.css file that we host under your subdomain. The variables that matter for most boutique hotels: --hm-brand, --hm-brand-2, --hm-radius, --hm-font-head, --hm-font-body. Set them in a single small file, we redeploy in seconds. No JavaScript override needed and no touching the widget bundle.

Advisory note. Do not try to match your website's colours pixel-for-pixel on day one. Boutique websites often use one hero colour that clashes horribly on a form background. Ask your designer for a "form-friendly" palette variant — usually a desaturated version of the brand hue plus a warm neutral. Your booking conversion rate will thank you.

Step 4 — Two-week A/B against your existing engine

Do not remove SiteMinder Channel Manager Engine (or whichever booking engine you currently use) on day one. Run the Direct Deal Widget in parallel on a 50/50 traffic split for two full weeks. We ship a lightweight A/B assignment cookie that survives page reloads; the split is stable per visitor. After fourteen days you will have real numbers on start-to-book rate, average booking value, and cart-abandon rate at each step. In our boutique pilots the Widget won on start-to-book eight times out of ten, but there is one case (a Vienna heritage property with a very specific corporate-code flow) where the old engine held its ground and we told the property to keep it.

Step 5 — Cut the old engine

If the A/B is decisive, remove the old engine's script from your page and replace with the Widget-only setup. Keep the old engine's account live for at least thirty days as a fallback — bookings already in flight will finalise there. After thirty days, we recommend closing it to stop the extra invoice.

Housekeeping — accessibility, analytics, edge cases

The widget passes WCAG AA on all three skins and is keyboard-navigable from the first field to the confirmation state. Analytics events are emitted as standard dataLayer.push calls if you have Google Tag Manager, or as custom events on the window if you do not. If your property uses a specific analytics tool that we have not seen before, tell your advisor on the onboarding call and we will map the events.