Sharing and Embedding your Booking Widget

We have rolled out a major update to how you can share and embed your booking widget on your existing website.

Sharing an individual event or class

To share just a singular event, head to 'Classes', then 'All' from your Dashboard.

Press 'Manage' on the class you want to embed.

Navigate to 'Share' from the top bar.

Choose the page you want to share from the dropdown menu.

'Event' listing is the whole event. 'Booking Options' will show the variety of options that can be booked for this event, if you have any. 'Public dates' will take customers straight to the date selection screen, whereas 'Booking calendar' is your private availability, again if you have that set up.

Now you have a variety of options.

If you still want the page you embed to effectively be on a separate webpage, as before, you can 'Get the link for your event listing'.

If not, and you want to embed the page on your website without it navigating to a new page, choose between 'Embed the entire page' and 'Embed your booking options'.

In this example, we are going to embed the entire page.

These are the options you have to choose from. They all look slightly different but function in much the same way, so it is really a matter of preference.

We've gone for a Popover here -

As you can see, there are a lot of customisation options! You can change the content and embed mode again to try out the other designs, change the icon in the bottom right (on other designs this is a text button), the icon colour, size, and button colour, as well as round or square the corners.

You can choose to preview your design in a desktop or mobile view, then go ahead and click on your button or icon!

Once you're happy with how your design looks, press 'Get the code'.

A popup containing the embed code will appear.

Press 'Copy code' which will copy the code to your clipboard. Then you can paste it onto your website builder as you please!

(Coming soon - where to place embed code on common website builders such as Squarespace and Wordpress).

Sharing your Booking pages

To share your booking pages rather than an individual event, as above, follow these steps.

From your Dashboard, click on 'Booking Widget' then 'Share'.

Again, there are a lot of options for you to choose from! You can still choose to share the link to your homepage, or other pages, in the top section.

To use the new features, take a look at the options under 'Embed your widget'. In this example, we're going to embed the Timetable page.

Now you can pick from these designs! The picture below is a 'Standard' page.

You can see a preview of your design on the right, and change the width and height of the popup. Each design has slightly different customisable elements, so have a play around to find what works for you!

Once you're happy with how your design looks, press 'Get the code'.

A popup containing the embed code will appear.

Press 'Copy code' which will copy the code to your clipboard. Then you can paste it onto your website builder as you please!

(Coming soon - where to place embed code on common website builders such as Squarespace and Wordpress).