Use your own design

What it is

Your site lists your classes, prices and teachers with its own fonts, cards and buttons. When a member taps Book on your site, elastudio’s booking opens over your page: sign-in, payment and the booking itself, without leaving your site. If you want blocks you can paste without a designer, see Add booking to your own website instead.

This needs someone who edits your website’s code: a web designer, a developer, or an AI assistant that writes the page for you.

Get the instructions

1. Open Settings (the cog at the bottom of the menu) and, under What members see, select Website.
2. On How members book, choose Your site’s own design.
3. Under Add your website’s address, add your site’s address in Website address and choose Add website. Booking only opens on the websites listed.
4. Choose Copy instructions for your web designer or AI assistant. The text has your studio’s own addresses filled in. See the instructions shows it first.
5. Send it to your designer, or paste it into your AI assistant with what you want the page to look like.

What the instructions say

The copied text has your studio’s addresses in place of the ones below.

1. Read the data. Your studio’s public data is plain JSON, with no key and no cookies, and any website can read it:
   • Schedule: https://elastudio.app/YOUR-STUDIO/api/public/schedule?from=2026-10-13&to=2026-10-26&lang=en (up to 62 days). Each class has id, startsAt and endsAt (UTC), title, teacher (id, name, photoUrl), location, room, spotsLeft and bookingState (open, full_waitlist, full, not_open, closed, started, cancelled, no_book).
   • Prices: .../api/public/products?lang=en. Each has id, name, description, price (amount in cents, currency), credits, validity. It answers 404 while the Prices page is off.
   • Events: .../api/public/events?lang=en. Teachers: .../api/public/teachers?lang=en. About the studio: .../api/public/about?lang=en (404 while that page is off). The studio itself (name, time zone, currency, languages, pages on): .../api/public/studio.
   • Show times in your studio’s time zone, and divide amounts by 100 before formatting them as money.
2. Load booking once. Put the loader line from the instructions in the page’s head, and at least one booking element on the page, for example <els-sign-in></els-sign-in> in the header. Without an element, booking screens cannot open.
3. Open booking from your own buttons by changing the address fragment, for example location.hash = "#els=/class/" + id + "?book=1", or with plain links:

Route	Opens
#els=/class/<class id>	The class, with Book
#els=/class/<class id>?book=1	Straight to booking that class
#els=/pricing	Your prices
#els=/buy/<product id>	Checkout for one pass or plan
#els=/events/<event id>	One event with its tickets
#els=/teachers/<teacher id>	A teacher’s page
#els=/private	Private session request
#els=/about	About the studio
#els=/account	The member’s account (sign in first if needed)

4. A fallback. If the script cannot load, link to your elastudio page instead, for example https://elastudio.app/YOUR-STUDIO/class/<id> or .../pricing.
5. Safety. Build the page with createElement and textContent; never put the data into innerHTML. Use https images only, and do not store members’ data.

Good to know

• Your website’s address must be in the allowed list (Settings tab, Websites that can show your schedule); on any other address booking does not load.
• The booking screens use your Theme, so set it to your site’s colours and fonts.
• There is no other developer access: the public data above and the booking screens are what elastudio offers today.

Booking at an address of your own site

Want the whole booking site at an address such as yourstudio.com/agenda, looking like part of your site? We set it up with you, on the Pro plan. Write to support@elastudio.app. See Choose where e-mail links open.