Skip to main content

How to Integrate the Schedule into Your Website via JavaScript

Updated today

Zenamu offers a script that lets you embed your class schedule directly on your website. Your site will display a list of classes taking place in the next 30 days. The list is fully responsive (automatically adjusts to fit different devices and screen sizes) and works well with other components on the page.

The integration is simple and takes no more than 5 minutes. You just copy a small piece of code and paste it into your website. Basic HTML and JavaScript knowledge is required (we recommend working with your webmaster on this).

If you run your website on a content management system, integration is also possible. See our tutorials for embedding a schedule into Webnode, WordPress or Wix.com.

Adding to Your Website -- Step by Step

1. Insert script

There are two ways to insert the script:

a. In the header (<head>) of the HTML page

Place the following code between the <head> tags of your website. If you insert the script in the header, don't forget the defer attribute -- otherwise the schedule won't be displayed.

Class schedule

<script defer src="https://zenamu.com/calendar/list.js" crossorigin></script>

Workshops

<script defer src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Courses

<script defer src="https://zenamu.com/calendar/courses.js" crossorigin></script>

b. In the body (<body>) of the HTML page

Place the following code at the bottom of the HTML page, just before the closing </body> tag:

Class schedule

<script src="https://zenamu.com/calendar/list.js" crossorigin></script>

Workshops

<script src="https://zenamu.com/calendar/workshops.js" crossorigin></script>

Courses

<script src="https://zenamu.com/calendar/courses.js" crossorigin></script>

2. Insert element

Add the following <div> to the place on your website where you want the schedule to appear:

Class schedule

<div id="zenamu-calendar" calendar-id="[your calendar ID]"></div>

Workshops

<div id="zenamu-workshops" calendar-id="[your calendar ID]"></div>

Courses

<div id="zenamu-courses" calendar-id="[your calendar ID]"></div>

[your calendar ID] -- replace this with your unique ID, which you can find in your Zenamu admin panel.

  • You can find the code in your admin panel (log in to Zenamu and go to Settings > Public Schedule > Integration with your website).

3. Done!

Here's what the embedded schedule looks like:

Workshops

Courses

Did this answer your question?