Zenamu offers a script that lets you embed your class schedule directly on your website. Your site shows the schedule in the view you choose under Schedule view (see How do I choose the view of the embedded schedule? below). The schedule 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>
Events and 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>
Events and 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>
Events and 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 copy the complete code, with your calendar ID already filled in, in your admin panel: go to Settings > Schedule page, open the Public schedule tab, and in Widgets for your website expand Schedule, Events and workshops or Courses. The same section also has the code for an Appointments widget.
3. Done!
Here's what the embedded schedule looks like:
Events and workshops
Courses
How do I choose the view of the embedded schedule?
The code for the schedule is the same for every view. The view is a setting in Zenamu:
Go to Settings > Schedule page and open the Public schedule tab.
In Widgets for your website, expand Schedule.
Under Schedule view, click Weekly calendar with class schedule, List of next 30 upcoming or Weekly list. Zenamu saves your choice right away, and you don't need to change the code on your website.
The list view isn't limited to 30 days: it shows your upcoming classes 30 at a time, and visitors can load more. Visitors can also switch to another view in the schedule.