How to Embed Your Booking Calendar into Your Website

Embed your Classta booking calendar directly into your website so clients can book classes, services, and bundles without leaving your site. This creates a seamless booking experience and keeps everything in one place.

What Gets Embedded?

Your embedded calendar includes:

Classes: Your full class calendar with all available sessions
Services: 1-on-1 services and appointments
Bundles: Session bundles and class packages

All bookings made through the embedded calendar are processed securely, and clients can complete payments directly within the widget.

Step 1: Get Your Embed Code

Log in to your Classta admin dashboard
Scroll down to the "Get Embed Code" card
Click to expand the card
You'll see your embed code ready to copy

The embed code looks like this:

<iframe src="https://classta.co/embed/instructorname" style="width:100%; min-width:320px; min-height:700px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Booking Calendar"></iframe>

<script src="https://classta.co/js/embed-helper.min.js"></script>

Important: Make sure to include both the <iframe> tag and the <script> tag. The script ensures the iframe expands properly when clients click to book, providing a better user experience.

Step 2: Customize What Appears (Optional)

By default, your embed shows all sections (classes, services, and bundles). You can customize which sections appear by adding a ?show= parameter to the embed URL.

Options:

?show=classes - Show only the class calendar
?show=bundles - Show only class bundles
?show=services - Show only services
?show=classes,bundles - Show calendar and bundles
?show=classes,services - Show calendar and services
?show=bundles,services - Show bundles and services
?show=all or no parameter - Show all sections (default)

Example: If you only want to show classes and services, your embed URL would be:

https://classta.co/embed/instructorname?show=classes,services

Step 3: Add to Your Website

Copy the embed code from your dashboard
Paste it into your website's HTML where you want the calendar to appear
If you customized the URL with ?show= , make sure to update the src attribute in the iframe

Where to add it:

In your website's page editor (HTML view)
In your content management system (CMS) HTML block
Directly in your website template files

Step 4: Test Your Embed

After adding the embed code:

View your website page in a web browser
Check that the calendar loads properly
Try clicking on a class to ensure the booking modal opens correctly
Test on mobile devices to ensure it's responsive

Tips for Best Results

Width: The embed is set to 100% width by default, so it will adapt to your page layout
Height: The minimum height is 700px to ensure content displays properly. The iframe will automatically expand when clients click to book
Mobile-friendly: The embed is fully responsive and works on all devices
Updates: Any changes you make to your classes, services, or bundles in Classta will automatically appear in your embedded calendar

Troubleshooting

The calendar doesn't appear:

Make sure you copied both the <iframe> and <script> tags
Check that your website allows iframes (some platforms restrict them)
Verify your subdomain is correct in the embed URL

The booking modal doesn't open:

Ensure the embed helper script (embed-helper.min.js ) is included
Check your browser's console for any error messages

Only certain sections show:

Check if you added a ?show= parameter to the URL
Remove the parameter or change it to ?show=all to show everything

Need Help?

If you're having trouble embedding your calendar, make sure:

Your website platform supports iframes (most do)
You're using the correct subdomain from your Classta account
Both the iframe and script tags are included in your HTML

Your embedded calendar will automatically stay in sync with your Classta account, so any updates you make will appear on your website instantly.