Add booking to your own website

What members get

Booking blocks put your schedule, prices and booking inside your own website. Members open a class, sign in with an e-mail code or Google, buy a pass, pay by card or Pix and book, all on your page. The blocks use your published Theme.

Booking on your own website is on every plan, including Free.

Where to find it

Open Settings (the cog at the bottom of the menu) and, under What members see, select Website. The page opens on the How members book tab, which asks How do you want members to book? with three cards:

• Your elastudio page: no website needed; share the link or QR code.
• Booking blocks on your website: the steps below.
• Your site’s own design: your site draws the schedule itself and booking opens over it. See Use your own design.

Choose Booking blocks on your website. Its steps open underneath.

1. Add your website’s address

1. Under Add your website’s address, type the exact address in Website address, starting with https, for example https://www.example.com, without a path.
2. Choose Add website. Add both versions if your site has them, with and without www.

Booking runs only on the addresses in this list. The full list, with Remove and a Note for each address, is on the Settings tab under Websites that can show your schedule.

Note: Removing a website stops the schedule and booking on that site at once, and members signed in there are signed out.

2. Build the code

1. Under Add booking to your website, pick What to show: Schedule (the main one for most sites), One class, Prices, Events, One event, Member account, Book button, Sign in button, Private sessions or About the studio. Prices, Private sessions and About the studio show only while that page is on in Public pages; otherwise they show a short “not available” line. Private sessions also need the Starter plan or above.
2. Set the options, such as Layout, Teacher, Class, Days shown (7 to 28) and Show filters.
3. Choose Language (Follow the page uses your site’s language) and Light or dark.
4. Under Version, choose Fixed version (recommended, with a security check), Always the latest, or Frame.
5. Check the Preview on Phone and Computer.

3. Paste it into your site

Choose Copy under Code to paste. Paste it once per page where booking should appear. For more blocks on the same page, repeat only the second line.

Site builders that block scripts

Wix, Squarespace, WordPress.com on the free plans and Google Sites may refuse script code, or put it in a box that cuts it off.

1. Try first with the builder’s own HTML or embed block (Wix: Embed code; Squarespace: Code block; WordPress: Custom HTML block). If the schedule shows, you are done.
2. If it does not, choose Frame under Version, copy the code again and paste it into the same kind of block. Google sign-in and payments then open in a new tab.
3. On Google Sites, use Insert, Embed, Embed code with the Frame code.
4. If your builder accepts neither, link to your elastudio page instead: in How members book, Your elastudio page has the link and its QR code.

Make it look like your site

• Colours, fonts and shapes come from Theme. Set your Theme to your website’s colours and fonts, and every block follows it, on your site and on your elastudio page.
• Light or dark and Layout in the code apply only to that block.
• Your own buttons can open booking screens. With the code on the page, any link or button of your site whose address starts with #els= opens that screen over your page:

Your link	What opens
<a href="#els=/pricing">Prices</a>	Your prices, with buy buttons
<a href="#els=/account">My account</a>	The member’s bookings, passes and orders (sign in first if needed)
<a href="#els=/class/CLASS-ID?book=1">Book</a>	Booking for one class
<a href="#els=/buy/PRODUCT-ID">Buy</a>	Checkout for one pass or plan
<a href="#els=/private">Private sessions</a>	Private session request

The page needs at least one booking block for these links to work; a Sign in button in your header is enough. To find a class’s or a pass’s id, choose Book button or One class in What to show, pick it, and copy the id from the code.

What is not possible: the blocks cannot be restyled one by one with your own CSS, because they are sealed from your site’s styles so your site cannot break them. To build the schedule entirely in your site’s own design, see Use your own design.

If your site has a security policy

Most sites do not need this. If your site sends a Content Security Policy, copy the addresses under If your site has a security policy, on the Settings tab, into it. If the policy blocks the payment form, members pay on Stripe’s own page and come back to your site.