Skip to main content

Website Widget

Add this widget to your studio's own website and visitors can browse your live class schedule, appointment services, membership plans, and retail products — and book or buy, right from your site — without leaving your page.

Navigation label — Website Widget (Settings tab): EN: Website Widget · IT: Widget del sito web · FR: Widget du site web · DE: Website-Widget · ES: Widget del sitio web · PT: Widget do site · NL: Website-widget

Before you start​

The website widget is a small embeddable panel with up to four tabs — Calendar, Appointments, Memberships, and Products — each backed by the same public data your mobile app clients see, plus a visitor can create an account, log in, book a class or appointment, and purchase a membership or product, all inside the widget itself.

You'll need:

  • Access to Settings in the Agon desktop app (studio manager only).
  • The ability to paste a snippet of HTML into your website's editor (Squarespace, Wix, WordPress, or a custom site all work — anywhere you can add a custom "embed" or "HTML" block).

What the widget shows​

Once embedded, the widget shows a header with your studio name and brand accent color, and a tab bar with up to four tabs:

  • Calendar — every upcoming scheduled class: name, date and time, instructor (when assigned), and how many spots are left (or "Full"). Clicking a class opens its detail, with a Book (or Join Waitlist, once full) button.
  • Appointments — your active appointment services. Clicking one opens a step-by-step booking flow: choose an instructor, choose a date, choose an available time slot.
  • Memberships — every membership plan that's both active and marked sellable online, with a Purchase button on each.
  • Products — your retail catalog (active products with stock available), with a Buy button on each. There's no cart — each Buy click starts its own checkout for one unit of that product.

It never shows client rosters or instructor contact information — only what a visitor could reasonably see or do from your public website.

Booking or buying requires an account​

Browsing every tab is always public — no login needed. The moment a visitor clicks Book, Join Waitlist, Purchase, or Buy, a login/signup modal opens if they aren't already logged in. Signing up only asks for an email, password, and full name; logging in or signing up completes the original action automatically — the visitor never has to click twice. This session exists only in the browser tab's memory: refreshing the page, or closing and reopening the widget, logs the visitor out again (a deliberate choice — the widget never stores a session in localStorage or a cookie, since it runs inside a sandboxed iframe on a page Agon doesn't control).

Booking a class or an appointment deducts a membership credit exactly like it does in the mobile app. Purchasing a membership or a product opens Stripe's hosted checkout in a new browser tab (not inside the widget) — the visitor completes payment there, and that tab shows a plain success/cancelled confirmation and can be closed once they're done.

Finding your embed snippet​

  1. Open the Agon desktop app and go to Settings.

  2. Click the Website Widget tab.

  3. Copy the embed snippet shown there. It looks like this:

    <iframe
      src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id"
      sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
    </iframe>

  4. Paste the snippet into your website's HTML/embed block, exactly as copied — including the sandbox attribute. Don't remove or shorten it: allow-popups in particular is required for the Stripe checkout tab described above, and the rest are the minimum permissions the widget needs to run safely on your page.

Adding it to your website​

The exact steps depend on your website builder, but the pattern is the same everywhere:

  1. In your website editor, add a new "Embed", "HTML", or "Custom Code" block to the page where you want the widget to appear.
  2. Paste the snippet you copied from Settings → Website Widget.
  3. Save and publish the page.
  4. Visit your live website and confirm it loads with your studio's schedule.

Embedding just one tab​

By default the snippet embeds all four tabs with the tab bar visible. To embed only one — for example, just the class calendar on your homepage, with no tab bar and no way to switch tabs — add a ?widget= query parameter to the src URL with one of these values: calendar, appointments, memberships, or products. For example:

<iframe
  src="https://your-tunnel-url.trycloudflare.com/widget/your-public-studio-id?widget=calendar"
  sandbox="allow-scripts allow-forms allow-same-origin allow-popups">
</iframe>

This is entirely optional — leave the snippet exactly as copied from Settings if you want the full four-tab widget.

Important: your snippet changes when your Agon backend restarts​

Your studio's tunnel address (the https://...trycloudflare.com part of the snippet) is temporary by design — it's generated fresh each time your Agon backend restarts, and the old address stops working. This is not a bug.

Whenever you restart your Agon backend (or your computer), go back to Settings → Website Widget, copy the new snippet, and update it on your website. Until you do, the widget on your live site will show an error to visitors instead of your schedule. If you customized the snippet with a ?widget= parameter (see above), re-add it to the new snippet — Settings always gives you the plain, full-widget URL.

If you need a permanent address that never changes, that requires a paid Cloudflare Tunnel setup rather than the free Quick Tunnel Agon uses by default — this isn't something Agon configures automatically today.

What if something goes wrong?​

The widget shows "Studio not found" on my website Your embed snippet is out of date — most likely because your Agon backend restarted and got a new tunnel address. Go to Settings → Website Widget, copy the current snippet, and replace the one on your website.

The widget shows no classes, or fewer than I expect The Calendar tab only shows classes that are still upcoming (not already started) and still in "scheduled" status. Cancelled classes and classes already in the past won't appear. Check the Classes page to confirm the class is scheduled correctly.

My website builder won't let me paste an <iframe> or "Custom Code" block Some website builders restrict custom HTML on free plans. Check your website builder's plan — most (Squarespace, Wix, WordPress) require at least their entry paid tier to add custom embed code.

A visitor says nothing happened after they clicked Purchase or Buy Stripe checkout opens in a new browser tab, not inside the widget itself — the visitor may have a pop-up blocker preventing it, or may not have noticed the new tab. Ask them to check for a blocked pop-up notification, or check their browser's other open tabs.

A visitor signed up in the widget but says they can't log into the mobile app They should be able to — signing up through the widget creates the same kind of client account as signing up through the mobile app, using whichever email and password they entered.

The widget looks broken or unstyled on my site Make sure you copied the whole snippet, including the sandbox attribute, and that you didn't accidentally edit the src URL. If the tunnel address changed since you last copied it, re-copy a fresh snippet from Settings → Website Widget.