# 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.

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](/go/admin/appearance), alongside your [booking links](/docs/booking-links) and [booking poster](/docs/share-your-booking-page#print-a-qr-poster).

<Screenshot
  shot="admin-embed"
  mat="cream"
  alt="The embed code window in Booking page settings, showing the copyable snippet for the schedule widget."
  caption="Get the code opens the schedule snippet, with a copy button."
/>

## Add your schedule to your site

<Steps>
  <Step>Open [Booking page](/go/admin/appearance), 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.</Step>
  <Step>Click the copy button.</Step>
  <Step>Paste it into an embed or custom-code block on your site, then publish and check the widget loads.</Step>
</Steps>

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.

<Callout variant="warning">
[Changing your Booking URL](/docs/booking-links#your-booking-page-address) stops any snippet you've already pasted from working. Copy the new snippet and replace the old one on your site.
</Callout>

## 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](/docs/booking-page-layout#choose-what-each-session-tile-shows) 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).

<Callout variant="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](/docs/session-visibility).
</Callout>

## 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](/go/admin/email/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](/docs/email-marketing-audience#four-ways-to-grow-your-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](/docs/integrations#tracking-ad-conversions) from [Settings → Data](/go/admin/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](/docs/private-sessions), private hire. For one location, share a [location link](/docs/booking-links#location-links).

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](/go/admin/settings/policies). Switch that back on.