Embed Booking Widget

Add a "Book a Class" button to your existing website. When visitors click it, a booking modal opens right on your page — no redirect needed.

Requirements

Before you can embed the booking widget, make sure:

• Your Stripe account is connected (Settings > Payouts)
• Your subscription is active (or you're within your free trial)
• You have at least one upcoming class on your schedule

Getting Your Embed Code

1. Go to Dashboard > Settings > Embed Widget
2. You'll see your embed code — a single <script> tag
3. Click Copy to copy it to your clipboard

The embed code looks like this:

<script src="https://studiobase.org/api/embed/your-studio" async></script>

Adding It to Your Website

Paste the embed code into your website's HTML, just before the closing </body> tag.

Option 1: Floating Button (Default)

With no extra setup, the widget appears as a floating "Book a Class" button in the bottom-right corner of your site. It stays visible as visitors scroll.

This works great for most websites and requires no changes to your page layout.

Option 2: Inline Placement

If you'd rather place the button somewhere specific on your page, add this HTML element where you want the button to appear:

<div id="studiobase-widget"></div>

The widget will detect this element and inject the button there instead of floating.

What Visitors See

The Button

A branded "Book a Class" button styled with your studio's brand color. The button includes a calendar icon and responds to hover and click with subtle animation.

The Booking Modal

When a visitor clicks the button:

1. Class Selection — A list of your upcoming classes with available spots, showing time, name, instructor, and price
2. Enter Details — The visitor enters their name and email address
3. Checkout — They're taken to a secure Stripe checkout page to complete payment
4. Confirmation — After payment, they see a booking confirmation

Customization

The widget automatically uses your studio brand color from Settings > Branding. This color is applied to:

• The button background
• Modal accent colors
• Hover and focus states

To change the color, update your brand color in Settings > Branding — the embed widget will pick up the change automatically.

Waivers

If your studio requires a waiver, visitors will be prompted to accept it before completing their booking — just like on your main StudioBase site.

Mobile Experience

The widget is fully responsive:

• Desktop: A centered modal with your class list (420px wide)
• Mobile: A full-screen overlay that slides up from the bottom

Security

• The embed script is served over HTTPS
• Payment processing goes through Stripe's secure checkout
• No sensitive data is stored in the embedded widget
• The script is cached for 5 minutes for fast repeat loads

Troubleshooting

The button doesn't appear on my site

• Verify your Stripe account is connected and active
• Check that your subscription is active (or trial hasn't expired)
• Make sure the script tag is placed before </body>
• Check your browser's developer console for errors

The modal shows "Booking Unavailable"

• Your subscription may have expired — check Settings > Subscription
• Your Stripe account may need attention — check Settings > Payouts

No classes appear in the widget

• Make sure you have upcoming (future) classes on your schedule
• Cancelled classes won't appear
• Classes that are full won't appear

Styling conflicts with my website

• The widget uses its own isolated styles that shouldn't conflict with your site
• If you notice issues, check for CSS that targets iframe elements globally

Need Help?

If you run into any issues setting up the embed widget, contact us at support@studiobase.org with your studio URL and a link to the page where you've added the widget.