Customise the website integration

Besides the Momoyoga app for yogis and the online admin environment for studios, you have the possibility to integrate the class schedule on your own website. The Momoyoga widget allows new and existing customers to easily book classes through your own website. Placing a class schedule on your own website has never been easier! 

In this article

• How to customise your website integration using Momoyoga's widget settings 
• How to customise your website integration using CSS

How to customise your website integration using Momoyoga's widget settings 

We offer schedule integration options such as WordPress, Squarespace, Wix.com, Joomla, and JavaScript. You can read more about the specific integration options of Momoyoga here.

When integrating your Momoyoga schedule to your website, you will be given the option to customize your integration so that it reflects your brand and desired layout. 

To customize your Momoyoga schedule on your website, simply follow these steps:

1. Log in to Momoyoga
2. Go to Settings in the left menu
3. Click on the Website Widget tab
4. Select your website provider in the overview
   
   
   
5. You can then customise the appearance to match your studio’s branding and preferences, including:
   
   Schedule display format: weekly view or list view
   What your yogis see: teachers, class end times, class or event images
   Option to allow yogis to filter by teacher
   Custom colours if using Momoyoga’s custom branding feature
   
   
6. Check the preview to ensure it looks as desired
7. Click on View Setup Instructions
8. Go to your website admin panel and follow the instructions provided by Momoyoga

You’re done! After following these steps, the schedule should be visible on your website and customized based on your chosen appearance.

How to customise your website integration using CSS

Multiple integrations within the same page for a Custom HTML website

You can now place more than one schedule on a single web page, and each schedule can use different settings (for example, one can be List View and another can be Weekly View). To do this, go to Settings → Website Integration and follow the instructions there. When adding the code to your website, you can insert as many <div> containers as you need, placing each one exactly where you want a schedule to appear on the page.

CSS class reference

• .momo-schedule-wrapper — Styles for the entire schedule area
• .momo-schedule-item__image — Styles for the class image
• .momo-schedule-item__button — Styles for the class button
• .momo-schedule-item__title — Styles for the class title
• .momo-schedule-item__location — Styles for the class location
• .momo-schedule-item__description — Styles for the class description text
• .momo-schedule-item__duration — Styles for the class duration
• .teacher-avatar — Styles for the teacher’s avatar/photo
• .momo-list-schedule — Styles for the List View layout
• .momo-date-pagination — Styles for the date navigation (paging between dates)
• .momo-schedule-day-title — Styles for the schedule day title
• .momo-read-more__more — Styles for the read more text
• .momo-teacher-filter — Styles for the teacher filter

Responsive display tips

The schedule is responsive by default, which means it automatically adjusts based on the available space. It responds to the width of the container it’s placed in. So even on a desktop computer, the schedule may look like a “mobile view” if it’s inside a narrow section of the page (for example, a smaller column or sidebar). If you want to hide certain details on larger layouts (or adjust what shows at different sizes), you can use a CSS rule like this:

@container (min-width: 800px) {

  .momo-schedule-item__duration { display: none; }

}

Note:  Please note that while Momoyoga’s support team can guide you through general setup, they do not provide in-depth technical troubleshooting for website integrations. If you encounter issues, it’s best to reach out to your website developer.