Show your timetable on your studio’s website

The timetable add-on puts your live class timetable on a page of your own website. It updates when you change your schedule in Clovo, and visitors can page through the weeks, switch between weekly and monthly views and book from it.

You generate the code for your website in Clovo Dashboard. The code includes your studio, the location and the view you choose, so copy it from the dashboard rather than writing or editing it by hand.

Get your embed code

1. In Clovo Dashboard, go to Setup → Integrations.

2. On the Clovo Website Add-ons card, click Browse add-ons.

   

3. The Timetable tab opens first. Choose a Default location and a Default view. Both are explained below.

4. Leave Script selected. It's marked Recommended.

5. Click the copy button in the top-right corner of the Embed code panel.

   

You'll need access to Setup in Clovo Dashboard to open this screen.

The Live preview under the code shows what visitors will see. To check how the timetable fits a narrower screen, drag the handle on the right edge of the preview. Double-click the handle to return to full width.

Choose the defaults

Default location

The location you choose here is the one visitors see first. If your studio has more than one location, visitors can use the location picker at the top of the timetable to choose a single location or All locations.

If each location has its own page on your website, create one code per page: choose the first location, copy the code, paste it into that location's page, and then repeat for the next location.

Show all locations with your embed code

If your studio has more than one location, you can show their classes together in one embedded timetable:

1. In Setup → Integrations → Website Add-ons, open the Timetable tab and choose All locations under Default location.
2. Choose Weekly — rows or Monthly as the Default view. Weekly — columns is only available for a single location; if it was selected, choosing All locations switches the view to Weekly — rows.
3. Copy the updated Embed code and paste it into your website's HTML or embed block, replacing any previous timetable code. This works with both Script and Fixed-height iframe.

Visitors can still choose a single location. To use Columns, they must select a single location first. With All locations selected, View Week returns from Monthly to Rows.

Default view

Choose the layout visitors see first:

• Weekly — columns shows the week as a calendar, with a column for each day.
• Weekly — rows lists the week's upcoming classes day by day, with full details.
• Monthly shows a month calendar and the classes for the selected day.

Visitors can switch views, so the default only sets where they start. Columns is available only when a single location is selected. Each view is shown in what visitors see.

Copy the code again after changing a default

When you change a setting, the embed code and preview update to match. The code already on your website does not change. To apply a new location or view to your site, copy the updated code and use it to replace the code on your page.

Add the code to your website

Paste the code where you want the timetable to appear. Most website builders have a block for this, usually called something like HTML, Code, Custom code or Embed.

• Paste both lines together. The timetable needs the complete code in the same block to appear.
• You don't need to set a height. The timetable becomes part of your page and scrolls with it, rather than sitting in a box of its own.
• The code includes an Open timetable link. Visitors see this link in place of the timetable if the timetable can't load, and it opens the timetable in a new tab.

Some builders only run embedded code on the published page, not in the editor. If the timetable doesn't appear while you're editing, publish the page and check the live version.

If your website runs on WordPress, you can also use the Clovo WordPress Plugin.

What visitors see

In a weekly view, visitors use the arrows to change weeks and the Rows and Columns buttons to change layout. Back to current week returns to this week.

To open the monthly calendar, select View Month. Select View Week to return to the weekly layouts and week arrows. Visitors can change location in either view if your studio has more than one.

Weekly — columns

Columns gives visitors a calendar of the week, as shown at the top of this article.

Weekly — rows

Rows lists upcoming classes by day, with descriptions, instructors and any program notes. Days with no upcoming classes are left out.

Monthly

A calendar of the month. A dot marks each day that has classes. Visitors choose a day to see its classes beside the calendar, and use the arrows above the calendar to move between months.

On phones and narrow pages

When the page is narrow, such as on a phone or in a narrow column of your website, the Columns view becomes a list of each day's classes so nothing needs to scroll sideways. Long descriptions are shortened, with Show more to expand them.

Details that apply to every view

• Times are in each location's time zone. When showing all locations, each class uses its own location's time zone.
• Book buttons need your landing page. The Book button opens the class on your Clovo landing page, so it only appears when your landing page is switched on under Setup → Landing page. See share your timetable with clients for setting it up.
• Classes that have begun can't be booked. They show Class started or Class ended instead of a Book button.
• Booking numbers aren't shown. The timetable doesn't show how many people have booked or how many places a class has.

If your website blocks scripts

Some website builders don't allow scripts on a page. If yours doesn't, choose Fixed-height iframe above the embed code and copy that code instead.

The iframe shows the same timetable inside a box of a fixed height. If the timetable is taller than the box, visitors scroll inside it, which is less comfortable on phones. You can change the height value in the code to suit your page. Use the script when your website allows it.

If your website uses the older iframe code

If you added the timetable to your website before September 2026, your page probably uses the older iframe code. You can recognise it by an address containing /iframe/timetable/.

That code still works, and you don't need to change it. We recommend replacing it with a new code from Clovo Dashboard to give your visitors a better experience:

• The timetable fits your page and scrolls with it, instead of scrolling inside a box.
• You choose which location and view visitors see first. The older code always opens on the location that comes first alphabetically.
• If the timetable can't load, visitors still get a link to open it.

To update, delete the older code from your page and paste the new code in the same place.

Troubleshooting

Only an “Open timetable” link appears. The timetable hasn't loaded. Reload the page, then check the embed code if the link still appears on its own. Check that the code was pasted into a block that allows scripts and that both lines are there. If your web developer has set up a content security policy for your site, ask them to allow https://studio.clovo.au for scripts, connections, styles and images. If your builder doesn't allow scripts at all, use the Fixed-height iframe code.

Upcoming classes show without Book buttons. Check that your landing page is switched on under Setup → Landing page. Classes that have already started or ended can't be booked from the timetable.

The timetable opens on the wrong location or view. Choose the settings you want on the Website Add-ons screen, copy the code again and replace the code on your page.

“No classes scheduled this week” appears. Check which location the timetable is showing, and that classes are scheduled for that location in the week shown.