Skip to main content
All CollectionsSettingsWidgetsWebsite integration
Integrate a Calendar widget on your website
Integrate a Calendar widget on your website

You will find bellow how to integrate the calendar of group classes on your website

Kevin Bagayoko avatar
Written by Kevin Bagayoko
Updated over a year ago

Step 1

Set up the widget.

In Settings > Widget:

  • Choose the type of popup

  • Choose the Calendar component to modify the calendar settings.
    Note that every modification will impact all calendar widgets if you have several.
    You can preview the widget on the right side of the screen and repeat step 2 each time you want a modification to be implemented

In "configuration" you can update the same settings as for the calendar settings on the marketplace :

  • You can choose how the calendar will be displayed whereas it is :

    • week view list

    • week view card. Note that with this display the cards can appear quite small on the mobile view, if you members are used to book sessions on mobile, we recommend that you select the responsive display juste below

    • responsive display: the calendar will be in card view for desktop and list view for mobile to make it more mobile friendly for your members

    • Sessions of the day only

    • For the card in responsive view, you can choose to separate morning, afternoon and evening sessions. If you have a lot of free timeslots during the week we recommend to turn off this setting so that sessions are displayed one below the other

  • Decide what information is going to be highlighted in the title of the session

    • the activity

    • the teacher. You can adjust how the teacher name is highlighted by changing the general calendar setup

    • The schedule

  • Choose if you want to filter the calendar to display sessions of only one or selected teachers. If the field is left empty, by default all teachers' sessions will be displayed. Note that the member can still choose to unfilter the calendar by clicking on the "teacher" button on the right

  • Choose if you want to filter the calendar to display sessions of a selected location only if you have several. This setting is available only for certain managers' subscription, please contact your account manager if you wish to have access to this setting

  • Choose if you want to filter the calendar to display sessions of only one or selected establishments if you have several. If the field is left empty, by default all establishments' sessions will be displayed. Note that the member can still choose to unfilter the calendar by clicking on the "establishment" button on the right

  • Choose if you want to filter the calendar to display sessions of only one or selected activities. If the field is left empty, by default all activities' sessions will be displayed. Note that the member can still choose to unfilter the calendar by clicking on the "activity" button on the right

  • Choose if you want to filter the calendar to display sessions of only one or selected level. If the field is left empty, by default all levels' sessions will be displayed. Note that the member can still choose to unfilter the calendar by clicking on the "level" button on the right

Step 2

Copy and paste the widget.

Copy the widget by clicking on the icon provided.

Paste this code into an HTML module on the Calendar page of your website.

Did this answer your question?