Embed on your website

Show your sessions on your own website, so people can see what's on without leaving your site - then book in a new tab on your booking page.

Session gives you a small snippet you paste into your own website. It renders a live widget on your page: your upcoming sessions, in your own colours. There is nothing to install and nothing to keep updated - the widget reads from your account, so it stays current on its own.

The snippet lives under Booking page, on the Embed tab behind Get the code, alongside your booking links and your booking poster.

There is a second widget for your mailing list sign-up form. It works the same way, but you copy it from a different place - see add an email sign-up block below.

Add the timetable to your site

1. 1
   Open Booking page and choose Embed along the top. On a small screen there are no tabs - scroll down to the Embed section instead.
2. 2
   Click Get the code, just under the preview's description. On a small screen the snippets are already on the page, so there is nothing to open.
3. 3
   Click the copy button to copy the snippet.
4. 4
   In your own website editor, add an embed or custom-code block where you want the timetable to appear, and paste the snippet in.
5. 5
   Save and publish your page, then open it and check the widget loads.

The snippet is two lines of ordinary HTML - one <div> where the widget appears and one <script> that loads it. It works in the code blocks Squarespace, Wix, WordPress, Webflow, Framer and Shopify all provide. Try it on a page you can preview privately first, so you can check the width and spacing before it goes live on your homepage.

Booking opens in a new tab

When someone picks a session in the widget, it opens your booking page in a new tab, and they book there. The widget itself is for browsing: seeing what's on, filtering the list, and checking how many spaces are left. It never takes a payment.

This is deliberate, and worth knowing before you paste it in. Sign-in, member prices, gift vouchers and card payment all need to be on your own booking page to work reliably, so that is where the customer completes the booking. On a computer, hovering a session shows a Book button so it is clear where the click goes.

Two things follow from it:

• Prices are on your booking page, not in the widget. The widget lists what's on, how long each session runs and how many spaces are left. The customer sees your prices - including any member rate they qualify for - when the session opens on your booking page.
• The widget does not show someone their own bookings. Customers manage bookings from your booking page or from the link in their confirmation email - see customers managing bookings.

Add an email sign-up block

You can put a short mailing-list sign-up form on your site the same way. Its snippet lives with your mailing list, not here - open Marketing and click Sign-up form at the top of the page. That window shows you a live preview of the block before you paste it, and holds the link and printable QR code for the same form under Link or QR code, so everything that points at it is in one place.

1. 1
   Open Marketing and click Sign-up form at the top right.
2. 2
   Under On your own website, click the copy button to copy the snippet.
3. 3
   Paste it into an embed or custom-code block on your site, then save and publish.

Everyone who signs up gets a confirmation email first and only joins your list once they click the link in it, so your list only ever holds addresses that confirmed. See email marketing for what to do with the list once you have one.

You can use both widgets, on the same page or on different pages. One script drives them both, so pasting both does not slow your site down twice.

Fitting the sign-up block to your site

The sign-up block is deliberately plain: an email box, a Subscribe button, and no background of its own. It sits on whatever colour your page already is, so on most sites you can paste it and leave it alone. Write your own heading above it - "Join our mailing list", or whatever suits your site - and it will read as part of your page rather than as an inserted form.

Three optional attributes cover the rest. Add any of them to the <div>:

• data-bookasession-surround="dark" if the block sits on a dark background. It flips the text and the email box so both stay readable. Leave it off for a light background.
• data-bookasession-radius="0" to square off the corners of the box and button, so they match your own. Any number of pixels up to 32 - 0 for square, 20 for a pill. The default is 8.
• data-bookasession-name="1" to ask for a first name as well as an email, so you can greet people by name in your emails. Off by default, because it turns a one-line block into three.

The button already uses your brand colour, so there is no setting for it.

What carries over from your booking page

This section is about the timetable widget. The sign-up block takes only your brand colour and the three settings above - see Fitting the sign-up block to your site.

Your brand colour, your theme and your page background all carry over, so the timetable looks like your booking page rather than a generic list. So does what each session row shows - the display choices you made for spaces, duration, session name and location apply here too.

Two things do not carry over, and both are settings on the same Booking page settings:

• Your layout choice. The widget is always a list, whichever layout your booking page uses. A calendar needs more width than most websites can give a widget, so it would be unreadable at the sizes embeds actually get.
• Your logo and header banner. The widget has no page header for them to sit in. It is a panel of sessions, not a copy of the whole page.

Size and position the widget

The widget sits inside your page and grows to fit its content, so it does not scroll separately. Your own page's scroll is the only scroll.

• To control the width, style the block with your own site's CSS. The snippet includes id="bookasession-embed", so a rule like #bookasession-embed { max-width: 720px; margin: 0 auto; } centres it in a column.
• To reserve a specific height while it loads, add data-bookasession-height="900" to the <div>. The widget reserves that much space until it knows its real height, which stops your page jumping as it appears. Keep the number realistic - a page of sessions is roughly 640 tall.
• To change what a screen reader announces, add data-bookasession-title="Our sauna timetable" to the <div>.

Track it in your own analytics

The widget reports what happens inside it to window.dataLayer, so Google Tag Manager can pick it up with no extra setup on your side. If you use Plausible, Fathom or a bare Meta pixel rather than Tag Manager, these events will not reach you - tell us if that is you, and we will add a route that does. Three events, each prefixed so they cannot clash with your own:

• bookasession_view - the widget loaded on the page.
• bookasession_filter - a visitor filtered by location or booking type.
• bookasession_select_session - a visitor clicked a session, which is the moment they left for your booking page.

In Tag Manager, a Data Layer Variable of bookasession.sessionName reads which session was clicked, and bookasession.view tells a timetable widget apart from an email sign-up one.

To get the sale itself into your analytics or your ad platform, send it server-side rather than from a browser. Add a webhook on booking.created from Settings → Data, point it at a Zapier or Make scenario, and have that forward the purchase to wherever you want it - Meta's Conversions API, Google's offline conversions, or a spreadsheet. That route is more reliable than a pixel would have been anyway, because it survives ad blockers, the iOS tracking prompt and Safari's cookie limits. Webhooks and the API has the full event list.

The email sign-up block reports only bookasession_view, with no sign-up event. Because everyone confirms by email, a submission is a request rather than a subscriber, and the block answers spam and genuine sign-ups identically on purpose - so an event on submit would count bots as sign-ups. Your real subscriber numbers are in the customers directory.

Common questions

1. Can I put this on my own domain instead of linking out? The widget itself sits on your domain - your visitors browse your sessions on your page. Booking then opens your booking page at bookasession.org/your-name in a new tab. Full booking inside the widget is not something Session does today.

2. Do I need a developer? No. Every major website builder has an embed, HTML or custom-code block. Paste the snippet into one of those and save.

3. Will this affect my search rankings? No. The widget is marked so search engines do not index it separately, which keeps your booking page as the single result for your sessions rather than putting two of our pages in competition.

4. Can I have the timetable and the email sign-up on the same page? Yes. Paste both snippets - the timetable one from Booking page settings, the sign-up one from Marketing -> Sign-up form. One script serves them both.

5. Can I show only one location, or only one session type? Not from the snippet. The widget shows your whole timetable, and the visitor narrows it themselves using the filters at the top - locations if you run more than one, and a private hire filter if you offer private sessions. To point someone at a single location, share a location link instead.

6. The widget is showing a list, but my booking page is set to Calendar. Is it broken? No - the widget is always a list, just as your booking page is on a phone. A calendar needs more width than a widget usually gets, so it would be unreadable at the sizes embeds are given. Your booking page keeps the layout you chose.

7. My logo isn't showing in the widget. That is expected. The widget has no page header, so there is nowhere for a logo or header banner to sit. Your colours and theme do carry over.

8. I pasted the snippet and nothing appears. Check three things: that your website builder saved the <script> tag as well as the <div> (some strip scripts on lower plans), that you published the page rather than only saving a draft, and that your Booking URL has not changed since you copied the snippet. If your builder strips scripts, link to your booking page instead - see your booking links.

9. Do I have to update the snippet when I add sessions or change my timetable? No. The widget reads from your account, so new sessions, changed times and cancellations all appear on their own - allow a minute or so for a change to reach every visitor.