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, or a short email sign-up block. There is nothing to install and nothing to keep updated - the widget reads from your account, so it stays current on its own.

Snippets live on the Appearance page, under Embed, alongside your booking links and your booking poster.

Add the timetable to your site

1. 1
   Open Appearance and choose Embed in the left-hand list.
2. 2
   Under Timetable, click the copy button to copy the snippet.
3. 3
   In your own website editor, add an embed or custom-code block where you want the timetable to appear, and paste the snippet in.
4. 4
   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

If you collect marketing consent, Appearance also offers an Email sign-up snippet. It puts a short form on your site for your mailing list, and it works the same way - copy, paste, 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 snippets, on the same page or on different pages. One script drives them both, so pasting both does not slow your site down twice.

What carries over from your booking page

Your brand colour, your theme and your page background all carry over, so the widget looks like your booking page rather than a generic form. 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 Appearance page:

• Your layout choice. The widget is always a list, whichever layout your booking page uses. A week grid needs more width than most websites can give a widget, so a grid 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.

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. 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. A week grid needs more width than a widget usually gets, so it would be unreadable. 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.