Add a widget to your site

The snippet

Find your key in Settings, Widgets, then paste this where the widget should appear. Replace the key with your own; everything else stays as written.

<script src="https://broomdesk.com/widget.js"
        data-widget="booking"
        data-key="wgt_your_key_here"
        async></script>

Change data-widget to calculator, lead-form, or reviews for the other widgets.

If your builder strips scripts

Some page builders remove script tags from content blocks. Use the plain iframe instead. It does not resize itself, so set a height that suits your page.

<iframe src="https://broomdesk.com/embed/booking?key=wgt_your_key_here"
        width="100%" height="620" style="border:0"
        title="Booking form"></iframe>

The four widgets

Allowed domains

A new widget starts in test mode, which allows localhost and nothing else, so you can try the snippet on a development server before the site is live. Add your website domain in Settings, Widgets before you publish. Once a domain is listed, the widget runs on that domain and its subdomains, and nowhere else.

The allowlist governs the requests behind the widget too, not just where the frame draws. Prices, open times, bookings, and leads are all checked against it, so a copy of your snippet on someone else's site cannot put a booking into your calendar or a lead into your inbox.

Height and theming

The widget reports its height as visitors move through the steps, so the frame grows and shrinks without an inner scrollbar. Set data-height to control the height before the first measurement, data-theme to dark for dark pages, and data-target to a CSS selector when the widget belongs somewhere other than right after the script tag. Accent color and corner radius come from your widget settings. The frame draws on a transparent background, so your page color shows through around the widget's own card.

Tracking bookings in your own analytics

When a booking completes, the widget fires a broomdesk:booked event on the page with the booking value, so you can pass it to your analytics tool.

document.addEventListener("broomdesk:booked", function (event) {
  // event.detail.revenueCents holds the booking value
  gtag("event", "purchase", { value: event.detail.revenueCents / 100 });
});

If something looks wrong

Nothing appears

Open your browser console. A missing key logs a message naming the attribute to add. If the page is served over https, the script must be too.

It works locally but not on the live site

Test mode covers localhost only, so it never covers the live site. Add the live domain in Settings, Widgets, including any www version you use.

The frame is cut off

A parent element with a fixed height or hidden overflow clips the widget. Give the container room, or set data-height.