ℹ️ Cet article sera mis à jour au fur et à mesure que nous déploierons de nouvelles améliorations dans les prochains mois.
Le widget Calendrier de bsport vous permet d'afficher votre emploi du temps directement sur votre site web, afin que vos clients puissent consulter et réserver des cours sans quitter votre site. Vous trouverez ces options dans Paramètres > Widgets, à l'étape 2 · Configuration de l'onglet Configurer, une fois le widget Calendrier sélectionné.
1. Affichage
Choisissez la présentation du calendrier. L'aperçu à droite se met à jour à mesure que vous modifiez chaque option.
Vue hebdomadaire, mode liste — les séances sont listées les unes en dessous des autres sur la semaine.
Vue hebdomadaire, mode carte — les séances apparaissent sous forme de cartes. En affichage responsive, vous pouvez choisir de séparer les séances du matin, de l'après-midi et du soir. Si vous avez beaucoup de créneaux libres dans la semaine, nous vous recommandons de désactiver ce paramètre afin que les séances s'affichent les unes en dessous des autres.
Affichage responsive — le calendrier s'affiche en mode carte par défaut et passe en mode liste sur mobile.
Séances du jour — seules les séances du jour en cours s'affichent, sans en-têtes ni filtres.
2. Informations mises en avant dans le titre du cours
Informations mises en avant dans le titre du cours vous permet de choisir quelle information apparaît en premier sur chaque carte du calendrier : Service, Professeur ou Emploi du temps.
3. Options de filtre
Les filtres aident les clients à trouver les cours qui correspondent à leurs préférences. Vous pouvez filtrer le calendrier par :
Professeur — afficher les cours animés par des professeurs spécifiques.
Service — filtrer par type de cours, par exemple Yoga, Pilates ou HIIT.
Établissements — afficher les cours d'un établissement spécifique.
Niveau — filtrer par niveau de difficulté, par exemple Débutant, Intermédiaire ou Tous niveaux.
Filtres du calendrier sur mobile
Sur mobile, la barre de recherche et les filtres s'affichent horizontalement, ce qui oblige les clients à faire défiler latéralement pour tous les voir. Pour modifier cela, collez l'un des extraits ci-dessous dans votre éditeur de CSS personnalisé.
Afficher tous les filtres — répartit les filtres sur plusieurs lignes afin qu'ils soient tous visibles en même temps :
@media (max-width: 500px) { .bs-marketplace-filters__list { flex-wrap: wrap; justify-content: center; }}
Masquer tous les filtres — supprime entièrement les filtres sur mobile :
@media (max-width: 500px) { .bs-marketplace-filters__list { display: none; }}
Collez l'un ou l'autre extrait dans la zone CSS personnalisé du widget Calendrier dans votre back-office, sous Paramètres > Widgets > CSS.
Pour masquer un élément spécifique plutôt que toute la barre de filtres, consultez notre guide sur la suppression d'un élément à l'aide de CSS personnalisé :
4. Publier le widget sur votre site web
Une fois votre widget configuré, ouvrez l'étape 3 · Publier.
Sélectionnez Copier le code d'intégration.
Rendez-vous dans l'éditeur de votre site web.
Ajoutez un bloc HTML ou un élément de code, puis collez le code.
Pour vérifier le widget avant de l'ajouter à votre site, copiez plutôt le lien d'aperçu depuis cette même étape.
Important : la configuration définie dans le Back-Office ne se met pas à jour automatiquement sur votre site web. Chaque fois que vous modifiez la configuration, un nouveau code d'intégration est généré. Vos changements n'apparaissent qu'une fois le nouveau code collé dans votre site web.
Si vous rencontrez des problèmes, consultez notre article sur les problèmes les plus courants liés aux widgets. Pour toute autre question, contactez votre Account Manager.