Help

Embed on your website

Put your schedule (timetable) on your own website - Squarespace, Wix, WordPress and more - with a snippet you paste once. Booking opens on your booking page.

Who can do this: admins only 4 min read

Paste one snippet into your website to show a live list of your upcoming sessions in your own colours. Changes appear on their own within a minute or so. The snippet is on the Embed tab of Booking page, alongside your booking links and booking poster.

The embed code window in Booking page settings, showing the copyable snippet for the schedule widget.
Get the code opens the schedule snippet, with a copy button.

Add your schedule to your site

  1. 1
    Open Booking page, choose Embed along the top, and click Get the code. On a small screen there are no tabs - scroll down to the Embed section, where the snippets are already on the page.
  2. 2
    Click the copy button.
  3. 3
    Paste it into an embed or custom-code block on your site, then publish and check the widget loads.

It works in Squarespace, Wix, WordPress, Webflow, Framer and Shopify. On WordPress.com (the hosted service, not a self-hosted WordPress site) it needs the Business plan or higher with hosting features turned on - lower plans remove the snippet when you save.

Warning

Changing your Booking URL stops any snippet you've already pasted from working. Copy the new snippet and replace the old one on your site.

Booking opens in a new tab

The widget shows what's on and how many spaces are left, but no prices and no one's own bookings. When someone picks a session, your booking page opens in a new tab and they book and pay there as usual.

What carries over from your booking page

Your brand colour, theme, page background and tile display choices carry over. Your layout, logo and header banner don't - the widget is always a list. For a dark website, set your booking page Theme to Dark (this changes your booking page too).

Note

A Featured only session shows in a narrow widget (a sidebar or phone) but not a full-width one. To be sure an event is seen, also place it in the calendar.

Size and position the widget

The widget grows to fit its content.

  • Width: style it with your own CSS. The snippet includes id="bookasession-embed", so #bookasession-embed { max-width: 720px; margin: 0 auto; } centres it in a column.
  • Height while loading: add data-bookasession-height="900" to the <div> so your page doesn't jump. The default is 640 pixels.
  • Screen reader title: add data-bookasession-title="Our sauna schedule" to the <div>.

Don't edit data-bookasession-embed or data-bookasession-slug - they tell it what to show.

Add an email sign-up block

The sign-up block is an email box and a Subscribe button in your brand colour, with no background of its own. In Marketing, click Sign-up form (top right, or beside Import your list while your list is still small) and copy the snippet under On your own website. It can sit alongside the schedule widget. See growing your subscriber list for how the form works.

Your site's CSS doesn't reach inside the block, so add your own heading above it and use these optional <div> attributes:

  • data-bookasession-surround="dark" flips the text and email box for a dark background.
  • data-bookasession-radius="0" sets corner roundness in pixels, from 0 (square) to 32. The default is 8.
  • data-bookasession-name="1" asks for a first name as well as an email. Off by default.

Track it in your own analytics

The widget sends three events to window.dataLayer for Google Tag Manager (Plausible, Fathom or a bare Meta pixel won't receive them):

  • bookasession_view - the widget loaded. This is the only event the sign-up block sends.
  • bookasession_filter - a visitor filtered by location or booking type.
  • bookasession_select_session - a visitor clicked a session.

Data Layer Variables bookasession.sessionName (the session clicked) and bookasession.view (which widget) add detail.

There is no purchase event, because booking happens on bookasession.org, so treat bookasession_select_session as the conversion. To send sales to an ad platform, forward a booking.created webhook from Settings → Data through Zapier or Make - it carries the customer's ad click id.

Common questions

  1. Will this affect my search rankings? No. The widget is marked so search engines don't index it, so your booking page stays the single result for your sessions.

  2. Can I show only one location, or only one session type? Not from the snippet, but visitors can filter by location and, if you offer private sessions, private hire. For one location, share a location link.

  3. I pasted the snippet and nothing appears. Check that your builder kept the <script> tag (some strip scripts on lower plans), that you published, and that your Booking URL hasn't changed. The WordPress editor preview doesn't show the widget, so check the published page. If scripts are stripped, add a button linking to your booking page instead.

  4. My sign-up block shows a not-found message. The form only works while checkout asks about marketing emails, under Settings → Policies. Switch that back on.

Was this helpful?