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
  • Memberships: Membership subscriptions you offer

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

  1. Log in to your Classta admin dashboard
  2. Scroll down to the "Get Embed Code" card
  3. Click to expand the card
  4. You'll see your embed code ready to copy
  5. Paste the <script> and <style> tags in the <head> of your page
  6. Paste the <iframe> code where you want the embed to appear.

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

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=memberships     - Show only memberships
  • ?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

Now that you have your embed code, it's time to add it to your website. Here's how to place each part:

The script tag needs to be on the same page as your iframe(s), but it doesn't need to be in the <head>  section. You can simply add it in a Code or HTML block on your page—either in the same block as your first iframe, or in a separate code block above your iframe. You only need this script once per page, even if you have multiple embeds.

The iframe tag goes wherever you want the calendar to appear on the page. You can place it:

  • In your website's page editor (switch to HTML view)
  • In your content management system (CMS) HTML block or custom HTML widget
  • Directly in your website template files if you have access
  • In website builders like WordPress, Squarespace, Wix, or Shopify (using HTML blocks)

Simplest approach: Add both the script and iframe in the same Code/HTML block on your page. This works perfectly and is the easiest method.

Most modern website platforms support iframes, so you should be able to add your calendar to virtually any page. Consider placing it on:

  • Your homepage for maximum visibility
  • A dedicated "Book Now" or "Schedule" page
  • Individual service or class description pages
  • Your contact page as an alternative to phone/email booking

Note: If you customized the URL with ?show= , make sure to update the src  attribute in the iframe tag.

Platform-Specific Instructions

Each website platform has its own way of adding custom HTML. Here are step-by-step instructions for the most popular platforms. The easiest approach is to add both the script and iframe in the same Code/HTML block.

WordPress

  1. Edit the page where you want the calendar to appear
  2. Add a Custom HTML block (in the block editor) or switch to Text/HTML view (in the classic editor)
  3. Paste both the script tag and iframe code in the same block:
<link rel="stylesheet" href="https://classta.co/css/embed-styles.css">
<script src="https://classta.co/js/embed-helper.min.js"></script>
<iframe src="https://classta.co/embed/instructorname" style="width:100%; min-width:320px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Booking Calendar"></iframe>
  1. Save and preview your page

Tip: If you're using a page builder like Elementor or Beaver Builder, look for an "HTML" or "Code" widget/block and paste both pieces of code together.

Squarespace

  1. Edit the page where you want the calendar
  2. Click + to add a block
  3. Select Code from the block options
  4. Paste both the script tag and iframe code in the same code block:
<link rel="stylesheet" href="https://classta.co/css/embed-styles.css">
<script src="https://classta.co/js/embed-helper.min.js"></script>
<iframe src="https://classta.co/embed/instructorname" style="width:100%; min-width:320px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Booking Calendar"></iframe>
  1. Click Save and exit the editor

Note: Squarespace requires you to use their Code block specifically for iframes to work properly.

Wix

  1. Edit the page where you want the calendar
  2. Click + Add → More → HTML iframe
  3. Click Enter Code in the iframe settings
  4. Paste both the link, script tag and iframe code together:
<link rel="stylesheet" href="https://classta.co/css/embed-styles.css">
<script src="https://classta.co/js/embed-helper.min.js"></script>
<iframe src="https://classta.co/embed/instructorname" style="width:100%; min-width:320px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Booking Calendar"></iframe>
  1. Adjust the size if needed (the default settings should work well)
  2. Click Done and publish your page

Alternative: You can also use Wix's Embed element and paste the code there.

Other Platforms

Most modern website platforms support iframes. Look for:

  • HTML blocks or Code blocks in your page editor
  • Custom HTML widgets or elements
  • Embed or iFrame options in your platform's block/widget library

Simply paste both the script tag and iframe code in the same code block. If you're unsure how to add custom HTML on your platform, check your platform's help documentation or support resources.

Using Multiple Embeds on One Page

You might want to have multiple embeds on the same page—for example, one showing just your class calendar and another showing only your bundles. This is totally possible!

Here's how it works:

  • You only need one <script>  tag on the page (in any Code/HTML block)
  • You can add multiple <iframe>  tags wherever you want them to appear
  • Each iframe can have different ?show=  parameters to display different sections

Example:

<!-- In your <head> section -->
<link rel="stylesheet" href="https://classta.co/css/embed-styles.css">
<script src="https://classta.co/js/embed-helper.min.js"></script>


<!-- In the body, wherever you want the class calendar -->
<iframe src="https://classta.co/embed/instructorname?show=classes" style="width:100%; min-width:320px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Booking Calendar"></iframe>


<!-- Somewhere else on the page, for bundles -->
<iframe src="https://classta.co/embed/instructorname?show=bundles" style="width:100%; min-width:320px; border:none; background:transparent;" allowtransparency="true" loading="lazy" title="Class Bundles"></iframe>

This flexibility allows you to create targeted booking experiences on different parts of your website while only loading the script once.

Step 4: Test Your Embed

After adding the embed code:

  1. View your website page in a web browser
  2. Check that the calendar loads properly
  3. Try clicking on a class to ensure the booking modal opens correctly
  4. 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us