De website-integratie aanpassen

Naast de Momoyoga-app voor yogi's en de online beheeromgeving voor studio's, heb je de mogelijkheid om het lesrooster op je eigen website te integreren. Met de Momoyoga-widget kunnen nieuwe en bestaande klanten eenvoudig lessen boeken via je eigen website. Je lesrooster op je eigen website plaatsen was nog nooit zo eenvoudig!

In dit artikel

• Je website-integratie aanpassen met de widget-instellingen van Momoyoga
• Je website-integratie aanpassen met CSS

Je website-integratie aanpassen met de widget-instellingen van Momoyoga

We hebben mogelijkheden om je lesrooster te integreren, bijvoorbeeld op Wordpress, Squarespace, Wix.com, Joomla, en JavaScript. Meer over de specifieke integratiemogelijkheden van Momoyoga lees je hier.

Wanneer je je Momoyoga-lesrooster op je website integreert, krijg je de mogelijkheid om de integratie aan te passen zodat deze aansluit bij je huisstijl en gewenste lay-out.

Om je Momoyoga-lesrooster op je website aan te passen, volg je gewoon deze stappen:

1. Log in op Momoyoga
2. Ga naar de Instellingen in het linkermenu
3. Klik op het tabblad Website Widget 
4. Selecteer je websiteprovider in het overzicht
   
   
   
5. Je kunt vervolgens het uiterlijk aanpassen aan de huisstijl en voorkeuren van je studio, waaronder:
   
   Weergaveformaat van het rooster: een weekoverzicht of lijstweergave
   Wat je yogi's zien: docenten, eindtijden van lessen, afbeeldingen van lessen of evenementen
   Optie om yogi's te laten filteren op docent 
   Aangepaste kleuren als je Momoyoga’s persoonlijke stijl gebruikt
6. Klik op het voorbeeld om er zeker van te zijn dat alles naar je zin is
7. Klik op Installatie-instructies
8. Ga naar het beheerderspaneel van je website en volg de instructies van Momoyoga.

Dat is alles! Na het volgen van deze stappen zou het lesrooster zichtbaar moeten zijn op je website en aangepast moeten zijn aan het door jou gekozen uiterlijk.

Je website-integratie aanpassen met CSS

Meerdere integraties binnen dezelfde pagina voor een aangepaste HTML-website

Je kunt nu meer dan één lesrooster op een webpagina plaatsen, en elk lesrooster kan verschillende instellingen gebruiken (het ene kan bijvoorbeeld een lijstweergave zijn en het andere een weekweergave). Ga hiervoor naar Instellingen → Website-integratie en volg de instructies daar. Wanneer je de code aan je website toevoegt, kun je zoveel <div>-containers invoegen als je nodig hebt, en elke container precies daar plaatsen waar je een lesrooster op de pagina wilt weergeven.

CSS class reference

• .momo-schedule-wrapper — Stijlen voor het hele lesroostergebied
• .momo-schedule-item__image — Stijlen voor de lesafbeelding
• .momo-schedule-item__button — Stijlen voor de lesbutton
• .momo-schedule-item__title — Stijlen voor de lestitel
• .momo-schedule-item__location — Stijlen voor de leslocatie
• .momo-schedule-item__description — Stijlen voor de tekst van de lesbeschrijving
• .momo-schedule-item__duration — Stijlen voor de duur van de les
• .teacher-avatar — Stijlen voor de avatar/foto van de docent
• .momo-list-schedule — Stijlen voor de layout van de lijstweergave
• .momo-date-pagination — Stijlen voor de datumnavigatie (bladeren tussen datums)
• .momo-schedule-day-title — Stijlen voor de titel van de dag van het lesrooster
• .momo-read-more__more — Stijlen voor de tekst ‘lees meer’
• .momo-teacher-filter — Stijlen voor het filter ‘docent’

Tips voor een responsieve weergave

Het lesrooster is standaard responsief, wat betekent dat het zich automatisch aanpast aan de beschikbare ruimte. Het reageert op de breedte van de container waarin het is geplaatst. Dus zelfs op een desktopcomputer kan het lesrooster eruitzien als een ‘mobiele weergave’ als het zich in een smal gedeelte van de pagina bevindt (bijvoorbeeld een kleinere kolom of zijbalk). Als je bepaalde details in grotere lay-outs wilt verbergen (of wilt aanpassen wat er bij verschillende formaten wordt weergegeven), kun je een CSS-regel zoals deze gebruiken:

@container (min-width: 800px) {

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

}

Opmerking: Houd er rekening mee dat het ondersteuningsteam van Momoyoga weliswaar hulp kan bieden bij de algemene installatie, maar geen diepgaande technische ondersteuning biedt voor website-integraties. Als je problemen ondervindt, kun je het beste contact opnemen met de ontwikkelaar van je website.