Personnaliser l'intégration de mon calendrier à mon site Web

En plus de l’application Momoyoga pour les yogis et de l’environnement d’administration en ligne pour les studios, vous avez la possibilité d’intégrer le planning des cours sur votre propre site web. Le widget Momoyoga permet aux nouveaux clients comme aux clients existants de réserver facilement des cours directement via votre site. Ajouter un planning de cours à votre site n’a jamais été aussi simple !

Dans cet article

• Comment personnaliser votre intégration via les paramètres de Momoyoga
• Comment personnaliser votre intégration avec le CSS

Comment personnaliser votre intégration via les paramètres de Momoyoga

Nous proposons des options d’intégration du planning telles que WordPress, Squarespace, Wix.com, Joomla et JavaScript. Vous pouvez en savoir plus sur les options d’intégration spécifiques de Momoyoga ici.

Lors de l’intégration de votre planning Momoyoga sur votre site, vous aurez la possibilité de le personnaliser afin qu’il reflète votre image de marque et la mise en page souhaitée.

Pour personnaliser votre planning Momoyoga sur votre site, suivez simplement ces étapes :

1. Connectez-vous à Momoyoga
2. Allez dans Réglages dans le menu de gauche
3. Cliquez sur l’onglet Intégration web
4. Sélectionnez votre fournisseur de site web dans l’aperçu
   
   
   
5. Vous pouvez ensuite personnaliser l’apparence pour qu’elle corresponde à l’identité visuelle et aux préférences de votre studio, notamment :
   
   Format du planning : vue hebdomadaire ou vue en liste
   Ce que vos yogis voient : enseignants, heures de fin des cours, images des cours ou événements
   Option permettant aux yogis de filtrer par enseignant
   Couleurs personnalisées si vous utilisez la fonctionnalité de branding personnalisé de Momoyoga
   
   
6. Vérifiez l’aperçu pour vous assurer que l'intégration correspond à vos attentes.
7. Cliquez sur Voir les instructions de configuration
8. Accédez au panneau d’administration de votre site web et suivez les instructions fournies par Momoyoga

C’est terminé ! Après avoir suivi ces étapes, le planning devrait être visible sur votre site web et personnalisé selon vos préférences.

Comment personnaliser votre intégration avec le CSS

Intégrations multiples sur une même page (site en HTML personnalisé)

Vous pouvez désormais afficher plusieurs plannings sur une seule page web, chacun avec des paramètres différents (par exemple, l’un en vue liste et l’autre en vue hebdomadaire).

Pour cela, allez dans Réglages → Intégration web et suivez les instructions. Lors de l’ajout du code à votre site, vous pouvez insérer autant de conteneurs <div> que nécessaire, en les plaçant exactement là où vous souhaitez afficher chaque planning.

Référence des cours CSS

• .momo-schedule-wrapper — Styles pour l’ensemble du planning
• .momo-schedule-item__image — Styles pour l’image du cours
• .momo-schedule-item__button — Styles pour le bouton du cours
• .momo-schedule-item__title — Styles pour le titre du cours
• .momo-schedule-item__location — Styles pour le lieu du cours
• .momo-schedule-item__description — Styles pour la description du cours
• .momo-schedule-item__duration — Styles pour la durée du cours
• .teacher-avatar — Styles pour l’avatar/photo de l’enseignant
• .momo-list-schedule — Styles pour la mise en page en liste
• .momo-date-pagination — Styles pour la navigation entre les dates
• .momo-schedule-day-title — Styles pour le titre du jour
• .momo-read-more__more — Styles pour le texte « lire plus »
• .momo-teacher-filter — Styles pour le filtre des enseignants

Conseils pour l’integration responsive

Le planning est responsive par défaut, ce qui signifie qu’il s’adapte automatiquement à l’espace disponible. Il réagit à la largeur du conteneur dans lequel il est placé. Ainsi, même sur un ordinateur de bureau, le planning peut apparaître en « version mobile » s’il est affiché dans une section étroite (comme une colonne ou une barre latérale). Si vous souhaitez masquer certains éléments sur des écrans plus larges (ou ajuster l’affichage selon la taille), vous pouvez utiliser une règle CSS comme celle-ci :

@container (min-width: 800px) {

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

}

Remarque:  L’équipe d’assistance de Momoyoga peut vous accompagner pour la configuration générale, mais ne fournit pas de dépannage technique approfondi pour les intégrations de site web. En cas de problème, il est recommandé de contacter votre développeur web.