Embedding your class schedule on any website (plain HTML)

If you can edit your site's HTML directly — a custom-built site, a static site generator, a theme template, or a "custom code" / "embed HTML" block on a platform not covered by its own guide — you can add TelosGym's live class schedule with two lines of markup and no other setup.

On WordPress or Wix? See their dedicated guides instead — links at the bottom of this article.

Get an embed key

1. In your TelosGym staff dashboard, go to Settings → External embeds → Create key.
2. For Site URL, enter the exact origin your page is served from (e.g. https://www.yourstudio.com).

The key only works from the exact origin it was created for, so this must match your live site's real domain — not a staging or preview URL.

Add the embed

Paste both lines wherever you want the schedule to appear on the page, replacing YOUR_EMBED_KEY with the key from the step above:

<div data-telos-schedule data-key="YOUR_EMBED_KEY"></div>
<script src="https://studioos-production-c31b.up.railway.app/static/public-schedule-widget.js"></script>

That's the whole embed — no other setup, no account, and no separate script tags to add elsewhere on the page.

More than one schedule on the same page? (For example, two different studio locations.) You only need one copy of the <script> tag, no matter how many <div data-telos-schedule> elements are on the page — it automatically finds and renders every one.

Reskinning

The schedule inherits your page's font by default and picks sensible default colours. To match your site's own colours and font, set these CSS custom properties on the <div> itself — or on any ancestor element, if you'd rather set them once for the whole page:

<div data-telos-schedule data-key="YOUR_EMBED_KEY" style="--telos-accent:#2563eb; --telos-radius:8px;"></div>

• --telos-accent: Buttons, links and "spots left"
• --telos-font: Font family
• --telos-bg: Card background
• --telos-text: Body text colour
• --telos-radius: Corner rounding

Showing fewer or more days

By default the schedule shows the next 14 days of classes. To change that, add a data-days attribute (any value from 1 to 30):

<div data-telos-schedule data-key="YOUR_EMBED_KEY" data-days="7"></div>

Display options

Two more settings live alongside your embed keys under Settings → External embeds. They apply to every embed of your schedule everywhere — no per-site setup and no embed code changes:

• Show studio name — on by default. Turn it off if you're embedding on your own site, where repeating your studio's name in the widget header is redundant.
• Spaces shown as — either "12 spots left" (the default, shows the exact number) or "Spaces Available" (no number shown). A fully-booked class always shows Full either way.

Changes typically show up within about 45 seconds of saving — no need to touch the embed itself.

What this does and doesn't do

• Display and link-out only. Each class shows a Book link to your TelosGym-hosted booking page — no booking or payment happens on your own site.
• Runs entirely in your visitor's browser. Nothing is proxied through your web server, and nothing beyond TelosGym's normal brief response cache is stored.
• Always current. The schedule is fetched live each time the page loads, not baked in at build time.

Structured data for SEO (custom server-side integrations)

The widget above renders client-side, so while visitors see your live schedule, most search crawlers won't see structured event data in your page's initial HTML.

If you're building your own integration directly against the schedule API — GET /api/public/v1/schedule/ with the same embed key, called from your own server rather than the browser — the response includes a structured_data field. This is a ready-made schema.org Event listing (one entry per class, covering name, time, capacity, spots remaining, your booking link, and studio location where set).

Output that field's value as-is, server-side, inside a JSON-LD block so it's present in the HTML your page actually serves:

<script type="application/ld+json">
  <!-- paste the structured_data value here -->
</script>

You don't need to write any of the schema.org mapping yourself.

This only applies if you're calling the API yourself. If you're using the <div data-telos-schedule> widget, its behaviour is unchanged.

Troubleshooting

Nothing renders / blank space where the schedule should be
Almost always an origin mismatch: the key's registered Site URL doesn't match the page's actual domain. Note that www. and no-www. count as different origins. Re-check it under Settings → External embeds.

Works on one page but not another
Check the <script> tag is actually present on that page too — or put it in a shared header/footer include so every page gets it automatically.

Styling looks off
The CSS custom properties only apply where they're set. If you set them on <body> or another shared ancestor instead of the <div> itself, check nothing else on the page is overriding the same custom property names.

On WordPress or Wix instead?

• WordPress — install the TelosGym Schedule plugin for a native shortcode and block. See Embedding your class schedule with the TelosGym Schedule WordPress plugin.
• Wix — see Embedding your class schedule on a Wix site: same widget, added via Wix's own HTML embed element.