Le widget est compatible avec un grand nombre de sites web, notamment Wix, WordPress, ContentSquare et bien d'autres. Étant donné la diversité des plateformes, une configuration spécifique peut être nécessaire pour une intégration optimale. Si vous rencontrez encore des difficultés après avoir lu notre documentation sur le widget, nous vous recommandons d'effectuer les vérifications ci-dessous.

1. Le widget affiche un contenu qui ne devrait pas y figurer

Vous pouvez contrôler les réservations qui apparaissent dans le widget en les organisant en catégories. Vérifiez que les filtres correspondants dans la configuration de votre widget sont réglés comme vous le souhaitez.

Une fois la configuration modifiée, copiez le nouveau code généré et collez-le dans votre site.

2. Le widget a un aspect différent de l'aperçu, apparaît coupé, ou ne réagit pas aux clics

Activez le mode compatibilité. Cela isole le widget des styles et du thème de votre site web, ce qui est généralement à l'origine de ces trois symptômes.

Une fois la configuration modifiée, copiez le nouveau code généré et collez-le dans votre site.

3. Le widget calendrier n'est pas responsive sur mobile

« Le widget calendrier s'affiche en vue carte sur mobile. »

Sélectionnez l'option Affichage responsive dans les paramètres d'affichage.
Copiez le nouveau code généré et collez-le dans votre site.

4. Le widget calendrier affiche la vue liste sur ordinateur

« Le widget calendrier s'affiche sous forme de liste sur mon ordinateur au lieu de cartes. »

Il s'agit d'un comportement attendu, et non d'un bug. Le widget calendrier est responsive : il affiche une liste de cours sur les petits écrans et des cartes sur les grands écrans. Mais il choisit l'affichage en fonction de la largeur du conteneur dans lequel se trouve le widget sur votre site, et non de la largeur de l'écran du visiteur. Par défaut, il ne passe en affichage carte que lorsque ce conteneur est plus large que 1280px.

Ainsi, même sur un grand écran d'ordinateur, si la section contenant le widget est plus étroite que 1280px — par exemple parce que votre page a une largeur de contenu maximale, des marges ou une barre latérale — le widget continuera d'afficher la vue liste.

Il existe deux façons de corriger cela :

Élargir le conteneur. Réglez la section contenant le widget sur une largeur d'au moins 1280px (par exemple, pleine largeur). Le widget passera alors automatiquement en affichage carte sur ordinateur.
Abaisser le seuil de bascule. Si vous souhaitez conserver un conteneur plus étroit, ajoutez l'option cardModeDisplayMinWidth à votre code de widget, dans les paramètres "calendar", avec la largeur en pixels à partir de laquelle les cartes doivent s'afficher. Dans cet exemple, les cartes s'affichent dès que le conteneur dépasse 1000px de large :

"config": {
    "calendar": {
        // ...vos options de calendrier existantes...
        "cardModeDisplayMinWidth": 1000
    }
}

Cette option est ajoutée manuellement dans le code. Si vous modifiez ultérieurement les paramètres de votre widget dans le back office et collez le nouveau code généré, pensez à l'ajouter à nouveau.

5. La langue du widget est incorrecte, ou mon propre texte n'est pas traduit

« Mes descriptions et titres ne sont pas traduits » : la langue du widget ne traduit que le texte bsport par défaut, comme les boutons et les libellés (par exemple « Ajouter au panier »). Les titres de cours, descriptions et noms d'activités s'affichent exactement comme vous les avez saisis dans votre back office.

« Mon site web propose plusieurs langues, mais le widget affiche toujours la même » : chaque code de widget est associé à un seul paramètre de langue, donc le même code affiche la même langue sur toutes les versions de votre site. Avec l'option « Automatique », le widget suit la langue du navigateur du visiteur, et non la langue de la page. Pour afficher une langue différente par page, générez un code de widget par langue et collez chacun sur la page correspondante.

Après avoir modifié la configuration, copiez le nouveau code et collez-le dans votre site.

6. Le widget apparaît compressé sur mobile

Les widgets bsport sont responsives par défaut, mais ils ont besoin d'un espace minimum pour s'afficher correctement. Vérifiez que le conteneur dans lequel vous avez inséré le widget est suffisamment large pour bien l'afficher.

7. Le widget calendrier déborde sur mobile

« J'ai inséré le widget calendrier mais il déborde sur mobile. »

Le widget calendrier s'étire jusqu'à la largeur maximale de la page. Si le conteneur contenant le widget a une largeur maximale supérieure à la largeur de l'écran mobile, le calendrier s'étirera jusqu'à cette largeur et débordera.

Vérifiez si le conteneur contenant le widget calendrier possède une règle CSS max-width.
Ajoutez la règle ci-dessous à votre zone CSS personnalisée.
Enregistrez les modifications

div[id*="bsport-widget"] { width: 100%; }

8. Le CSS personnalisé ne fonctionne pas

« J'ai appliqué des règles CSS pour personnaliser les widgets mais elles ne sont pas appliquées. »

Vérifiez si !important a été ajouté à vos règles, et supprimez-le le cas échéant. bsport ajoute déjà !important automatiquement au CSS personnalisé, donc l'ajouter vous-même crée un doublon, ce qui peut casser le style prévu et entraîner un comportement inattendu.

9. Apple Pay et Google Pay n'apparaissent pas comme moyens de paiement

« J'ai activé Apple Pay et Google Pay mais ils n'apparaissent pas dans le parcours d'achat. »

Allez dans Paramètres > Moyens de paiement et vérifiez qu'Apple Pay et Google Pay sont tous les deux sélectionnés.
Ajoutez votre domaine pour les activer sur les widgets.
Enregistrez.

10. Tout autre problème

Pour tout ce qui n'est pas couvert ci-dessus, veuillez nous contacter à support@bsport.io.

Widget : problèmes les plus courants