Wix propose deux façons d'ajouter un widget bsport à votre site. Les deux fonctionnent, mais elles se comportent très différemment — et celle que Wix suggère en premier est celle à l'origine de la plupart des problèmes signalés par les studios. Cet article vous guide à travers les deux méthodes, explique les limites de Wix à l'origine de ces problèmes, et montre comment les éviter.

Vous préférez que nous nous en occupions pour vous ? La méthode recommandée (méthode 2) consiste à ajouter du code personnalisé à votre site Wix. Si vous souhaitez que nous la mettions en place, contactez le support bsport et envoyez-nous une invitation de collaborateur pour votre site Wix (dans Wix : Settings → Roles & Permissions). Nous prendrons le relais ensuite.

Avant de commencer

Générez le code de votre widget dans le back office bsport : Settings → Widgets, choisissez le type de widget, configurez vos options, puis faites défiler vers le bas et copiez le code. À chaque modification d'un paramètre, un nouveau code est généré, et vous devez coller la nouvelle version sur votre site pour que la modification prenne effet.

Méthode 1 — Élément Embed HTML (rapide, avec des limites)

Dans l'éditeur Wix, cliquez sur Add Elements → Embed Code → Embed HTML
Faites glisser l'élément sur la page où vous souhaitez placer le widget
Cliquez sur Enter Code et collez le code de votre widget
Redimensionnez l'élément à la fois en mode bureau et mobile, puis Publiez

Ce qu'il faut savoir avant de choisir cette méthode : l'iframe

Wix place automatiquement tout ce qui est ajouté avec l'élément Embed HTML dans un iframe — un cadre de taille fixe qui ne s'agrandit pas en fonction de son contenu. C'est ainsi que Wix est conçu, cela ne vient pas du widget, et cela provoque quatre problèmes récurrents :

Le widget est confiné dans un cadre de taille fixe. Il ne peut pas dépasser la taille définie pour l'élément, et il ne peut pas s'adapter à son environnement, même si le widget lui-même est responsive.
Le défilement ne fonctionne pas correctement sur mobile et tablette. Si le contenu est plus haut que le cadre, les visiteurs ne parviennent souvent pas à y faire défiler la page — un geste de balayage tactile dans un iframe de hauteur fixe est généralement capté par la page plutôt que par le cadre. C'est le problème le plus fréquemment signalé.
Les fenêtres pop-up et les boîtes de dialogue sont piégées. Une fiche détaillée de séance ou une boîte de dialogue de paiement ne peut couvrir que le cadre, pas la page entière, et peut donc apparaître tronquée.
Le suivi n'atteint pas votre page. Les événements envoyés par le widget restent à l'intérieur du cadre, de sorte que Google Tag Manager ou tout autre outil d'analyse installé sur votre site Wix ne les détectera pas.

Si vous rencontrez l'un de ces problèmes, nous vous conseillons d'utiliser la méthode 2.

Calendrier sur Wix : conserver l'élément Embed HTML et le corriger

Si vous ajoutez le widget Calendrier et souhaitez conserver l'élément Embed HTML — par exemple pour pouvoir continuer à le positionner par glisser-déposer dans l'éditeur Wix — vous pouvez corriger ses deux principaux problèmes d'iframe grâce à quelques scripts supplémentaires :

le calendrier qui se retrouve tronqué lorsque sa hauteur change (par exemple lors du changement de semaine)
les fenêtres pop-up de réservation et de description qui s'ouvrent trop haut ou trop bas par rapport à l'écran du visiteur

Suivez notre guide pas à pas : Calendrier sur Wix : corriger le redimensionnement et la position des pop-up.

Cette option nécessite un domaine connecté et un forfait Wix premium. Elle ne rend pas les événements du widget visibles par Google Tag Manager — pour cela, utilisez la méthode 2.

Méthode 2 — Custom Code (recommandée)

Cette méthode place le widget directement dans la page plutôt que dans un cadre. Il s'étend ainsi à sa hauteur naturelle, défile avec la page, ouvre ses boîtes de dialogue sur toute la page, et ses événements sont visibles par votre outil de suivi.

Important : les widgets ajoutés de cette façon ne se déplacent pas par glisser-déposer. Le widget n'apparaît pas comme un élément dans l'éditeur Wix, vous ne pouvez donc pas le faire glisser ni le redimensionner directement. Sa position est définie dans le code : vous indiquez au code dans quelle section de la page placer le widget (le targetSelector, expliqué ci-dessous). Pour déplacer le widget par la suite, modifiez cette valeur dans le code.

Étapes

Rendez-vous dans votre tableau de bord Wix → Settings → Custom Code
Cliquez sur Add Custom Code
Collez le code ci-dessous, après avoir remplacé les valeurs décrites dans Valeurs à remplacer
Sous Add Code to Pages, choisissez la page spécifique plutôt que toutes les pages
Réglez Place Code in sur Body - end
Donnez-lui un nom que vous reconnaîtrez facilement plus tard, puis cliquez sur Apply et Publish

Le code

<script>
(function() {
    'use strict';

    // ─── SHARED CDN LOADER ───
    function loadCDN() {
        if (!window._bsportCDNPromise) {
            window._bsportCDNPromise = new Promise((resolve) => {
                if (window.BsportWidget) return resolve();
                if (!document.getElementById('bsport-widget-cdn')) {
                    const script = document.createElement('script');
                    script.id = 'bsport-widget-cdn';
                    script.src = 'https://cdn.bsport.io/scripts/widget.js';
                    script.onload = resolve;
                    document.head.appendChild(script);
                } else {
                    const interval = setInterval(() => {
                        if (window.BsportWidget) { clearInterval(interval); resolve(); }
                    }, 100);
                }
            });
        }
        return window._bsportCDNPromise;
    }

    // ─── WAIT FOR ELEMENT WITH RETRY ───
    function waitForElement(selector, timeout = 15000) {
        return new Promise((resolve) => {
            // 1. Check immediately
            const found = document.querySelector(selector);
            if (found) return resolve(found);

            // 2. Otherwise observe DOM changes
            const observer = new MutationObserver(() => {
                const el = document.querySelector(selector);
                if (el) {
                    observer.disconnect();
                    clearTimeout(timer);
                    resolve(el);
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });

            // 3. Fallback timeout
            const timer = setTimeout(() => {
                observer.disconnect();
                resolve(null);
            }, timeout);
        });
    }

    // ─── REUSABLE WIDGET FACTORY ───
    function createBsportWidget({ containerId, widgetType, targetSelector, config }) {
        let mounted = false;
        let mountAttempts = 0;
        const maxMountAttempts = 5;

        async function addContainer() {
            const existing = document.getElementById(containerId);
            if (existing) {
                return true;
            }

            const parentContainer = await waitForElement(targetSelector, 15000);
            if (!parentContainer) {
                return false;
            }

            const container = document.createElement('div');
            container.id = containerId;
            parentContainer.appendChild(container);
            return true;
        }

        function mountWidget() {
            if (mounted) return;

            mountAttempts++;
            if (mountAttempts > maxMountAttempts) {
                return;
            }

            loadCDN().then(() => {
                const container = document.getElementById(containerId);
                if (!container) {
                    setTimeout(mountWidget, 500);
                    return;
                }

                if (typeof window.BsportWidget?.mount !== 'function') {
                    setTimeout(mountWidget, 500);
                    return;
                }

                try {
                    window.BsportWidget.mount({
                        parentElement: containerId,
                        companyId: 1234, // REPLACE with your company ID
                        franchiseId: null,
                        dialogMode: 1,
                        widgetType,
                        showFab: false,
                        fullScreenPopup: false,
                        styles: undefined,
                        config
                    });
                    mounted = true;
                } catch (e) {
                    mounted = false;
                    setTimeout(mountWidget, 500);
                }
            });
        }

        function init() {
            async function start() {
                const added = await addContainer();
                if (added) mountWidget();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => setTimeout(start, 3000));
            } else {
                start();
            }
        }

        init();
    }

    // ─── WIDGET INSTANCES ───
    createBsportWidget({
        containerId: 'bsport-widget-planning', // REPLACE with a name of your choice
        targetSelector: 'main[id="PAGES_CONTAINER"] section > div:nth-child(2) > div', // REPLACE with the section where the widget should appear
        widgetType: 'calendar', // REPLACE with your widget type
        config: { // REPLACE with the config from your widget code
            calendar: {
            }
        }
    });

})();
</script>

Valeurs à remplacer

companyId — remplacez 1234 par votre identifiant d'entreprise bsport. Vous le trouverez dans le code du widget généré dans votre back office.
containerId — le nom de votre choix pour le conteneur du widget, par exemple bsport-widget-planning. Utilisez un nom différent pour chaque widget présent sur la même page.
widgetType — le type de widget que vous souhaitez afficher, par exemple calendar. Copiez-le depuis la ligne widgetType du code de votre widget dans le back office.
targetSelector — l'endroit où le widget apparaît sur la page. Il s'agit d'un sélecteur CSS pointant vers la section dans laquelle le widget est ajouté. Pour le trouver, ouvrez votre page publiée dans Chrome, faites un clic droit sur la section où vous souhaitez placer le widget, choisissez Inspect, puis faites un clic droit sur l'élément surligné et choisissez Copy → Copy selector. C'est ce qui remplace le glisser-déposer : pour déplacer le widget, modifiez cette valeur.
config — les options du widget. Copiez l'objet config depuis le code de votre widget dans le back office afin que le widget conserve les filtres et options d'affichage que vous avez choisis.

Pour afficher plusieurs widgets, ajoutez un autre bloc createBsportWidget({ ... }) sous WIDGET INSTANCES, avec son propre containerId, targetSelector, widgetType et config.

Si le widget n'apparaît pas à l'endroit souhaité, ou si vous préférez ne pas modifier de code, contactez le support bsport et nous nous en occuperons pour vous.

Comparaison des deux méthodes

Élément Embed HTML (glisser-déposer)

Facile à positionner visuellement dans l'éditeur Wix
Soumis à toutes les limites de l'iframe décrites ci-dessus
Convient pour un widget court et de hauteur fixe sur ordinateur

Custom Code (injecté dans le corps de la page)

Pas d'iframe — le widget s'étend librement et défile avec la page
Les boîtes de dialogue s'ouvrent sur toute la page
Les événements de suivi atteignent votre site
Pas de glisser-déposer : le positionnement est défini dans le code avec targetSelector

Ajouter le bouton de connexion à votre en-tête

Le widget du bouton de connexion bsport ne peut pas être ajouté à un en-tête Wix par glisser-déposer : les en-têtes Wix n'acceptent tout simplement pas l'élément Embed HTML.

Cela reste possible avec la méthode 2. En injectant le code du bouton de connexion dans le corps de la page via Settings → Custom Code, il est placé dans l'en-tête sans l'enveloppe iframe. Comme cela implique de positionner le bouton dans le code, nous nous en chargeons généralement pour vous — voir Comment nous pouvons vous aider ci-dessous.

Dépannage

Les visiteurs ne peuvent pas faire défiler tout le contenu sur mobile.
Il s'agit de la limite de l'iframe décrite ci-dessus. Passez à la méthode 2.

Une pop-up s'ouvre mais est tronquée.
Le widget se trouve à l'intérieur d'un iframe. Passez à la méthode 2 — ou, pour le widget Calendrier, consultez Calendrier sur Wix ci-dessus.

Google Tag Manager ne détecte pas les événements du widget.
Les événements ne peuvent pas sortir de l'iframe. Passez à la méthode 2.

Le widget n'apparaît pas avec la méthode 2.
Vérifiez que targetSelector pointe vers une section existant bien sur cette page, que l'identifiant d'entreprise est correct, et que le code est bien assigné à la bonne page dans Add Code to Pages.

Les modifications effectuées dans le back office ne s'affichent pas.
La configuration ne se met pas à jour automatiquement sur votre site. Copiez le code nouvellement généré et remplacez entièrement l'ancien. Avec la méthode 2, mettez plutôt à jour les valeurs widgetType et config dans votre code personnalisé.

Le widget a un aspect différent de l'aperçu du back office, ou ne répond pas aux clics.
Activez le Compatibility Mode dans les paramètres de votre widget, puis copiez et collez le nouveau code.

Rien n'apparaît du tout.
Vérifiez que le widget n'a pas été ajouté deux fois — à la fois via un élément Embed et via Custom Code. Deux copies sur une même page entreront en conflit.

La mise en page est trop étroite.
Le widget est responsive mais a besoin d'espace. Assurez-vous que la section qui le contient est suffisamment large, et vérifiez séparément l'affichage mobile dans l'éditeur Wix.

Comment nous pouvons vous aider

Passer à la méthode Custom Code implique d'effectuer des modifications directement sur votre site Wix : ajouter ou modifier du code dans Settings → Custom Code, et parfois ajuster la mise en page ou le style de la page. Si vous préférez que nous nous en occupions, nous serons heureux de :

Sortir un widget existant de l'iframe pour corriger les problèmes de défilement et de pop-up
Ajouter le bouton de connexion à votre en-tête via Custom Code
Ajuster la taille, le placement et le débordement du widget
Accompagner votre développeur web dans la mise en œuvre

Pour cela, nous avons besoin d'une invitation de collaborateur pour votre site Wix (dans Wix : Settings → Roles & Permissions). Contactez notre équipe support, nous prendrons le relais ensuite.

Toujours bloqué ? Contactez notre équipe support avec l'URL de la page et une capture d'écran, nous y jetterons un œil.

Comment intégrer un widget bsport sur Wix