Framer crée des sites sous forme d'applications monopages (SPA), ce qui modifie le comportement des widgets intégrés. Le savoir à l'avance permet d'éviter les deux problèmes les plus souvent signalés par les studios : le widget qui n'apparaît pas lorsqu'un visiteur accède à la page depuis une autre partie du site, et les popups confinées dans une petite fenêtre.

Avant de commencer

Générez le code de votre widget dans le back office bsport : Paramètres → Widgets, choisissez le type de widget, configurez vos options, puis faites défiler vers le bas et copiez le code. Chaque fois que vous modifiez 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 — Composant Embed (rapide, avec des limites)

Dans le canvas Framer, cliquez sur Insert → recherchez Embed
Glissez-le sur la page
Dans le panneau de droite, choisissez HTML et collez le code de votre widget
Redimensionnez le cadre et cliquez sur Publier

Le problème des applications monopages

Framer ne recharge pas la page lorsqu'un visiteur passe d'une section à l'autre de votre site — il remplace simplement le contenu sur place. De plus, le composant Embed encapsule votre code dans un iframe, ce qui vous fait perdre le contrôle sur le moment où le script du widget s'exécute. Résultat : le widget peut apparaître vide lors de la première visite — en particulier sur iOS (Safari et Chrome) — et ne s'afficher qu'après une actualisation complète de la page. Comme cela fonctionne après actualisation, le problème passe souvent inaperçu lors des tests.

⚠️ Si vous voyez le widget après actualisation mais pas au premier chargement ni lors de la navigation vers la page, c'est la cause du problème. La solution consiste à remplacer le composant Embed par un composant de code Framer (Méthode 2 ci-dessous), qui charge le script du widget et monte lui-même le widget à chaque affichage de la page.

Méthode 2 — Composant de code (recommandée)

Dans Framer, ouvrez le panneau Assets et créez un nouveau composant de code.

Supprimez le code par défaut et collez le code ci-dessous.

import { useEffect } from "react";// Replace with the parentElement value from your bsport widget code
const WIDGET_ID = "bsport-widget-XXXXXX";export default function BsportWidget() {
  useEffect(() => {
    // Copy these values from your bsport widget code
    const config = {
      parentElement: WIDGET_ID,
      companyId: 1234, // replace with your company ID
      franchiseId: null,
      dialogMode: 1,
      widgetType: "calendar",
      showFab: false,
      fullScreenPopup: false,
      styles: undefined,
      config: {
        calendar: {},
      },
    };    const widgetScriptId = "bsport-widget-cdn";    const loadScript = () => {
      return new Promise((resolve, reject) => {
        if (window.BsportWidget) {
          return resolve("already loaded");
        }
        const existingScript = document.getElementById(widgetScriptId);
        if (existingScript) {
          existingScript.addEventListener("load", resolve);
          existingScript.addEventListener("error", reject);
          return;
        }
        const script = document.createElement("script");
        script.id = widgetScriptId;
        script.src = "https://cdn.bsport.io/scripts/widget.js";
        script.async = true;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    };    const mountWidget = (config, repeat = 1) => {
      if (repeat > 50) return;
      if (!window.BsportWidget) {
        return setTimeout(() => mountWidget(config, repeat + 1), 100 * repeat);
      }
      // Avoid mounting twice
      if (document.getElementById(WIDGET_ID)?.hasChildNodes()) {
        return;
      }
      // Clear a previous registration so the widget can mount again
      const list = window.BsportWidget.el_list_id;
      if (list?.includes(WIDGET_ID)) {
        list.splice(list.indexOf(WIDGET_ID), 1);
      }
      window.BsportWidget.mount(config);
    };    loadScript()
      .then(() => mountWidget(config))
      .catch(console.error);
  }, []);  return <div id={WIDGET_ID}></div>;
}

Dans le code de votre widget bsport, trouvez l'objet à l'intérieur de MountBsportWidget({ ... }) et copiez ses valeurs (ID de l'entreprise, type de widget, options) dans l'objet config ci-dessous.

<script>
...
</script>
<script>
  MountBsportWidget({
    "parentElement": "bsport-widget-441452",
    "companyId": companyId,
    "franchiseId": null,
    "dialogMode": 1,
    "widgetType": "calendar",
    "showFab": false,
    "fullScreenPopup": false,
    "styles": undefined,
    "config": {
      "calendar": {
      }
    }
  });
</script>

Définissez WIDGET_ID sur la valeur de parentElement issue du code de votre widget (par exemple bsport-widget-441452).
Supprimez l'ancien composant Embed de votre page, puis glissez le nouveau composant de code depuis Assets sur la page à sa place.
Réglez la largeur et la hauteur du composant sur Fill afin que le widget ne soit ni tronqué ni masqué.
Publiez, puis testez en accédant à la page depuis une autre page de votre site et sur un iPhone — pas uniquement en actualisant la page.

Pourquoi cela fonctionne

Dans une application monopage, la navigation entre les pages ne déclenche pas de rechargement complet, de sorte que les scripts intégrés — en particulier dans un iframe — peuvent ne pas s'exécuter à nouveau. Le composant de code charge lui-même le script bsport et monte le widget directement dans son propre conteneur à chaque affichage de la page, afin que le widget s'affiche de manière fiable au premier chargement, après une navigation au sein du site, et lors des visites suivantes.

Dépannage

Le widget apparaît après actualisation mais pas au premier chargement ni lors de la navigation depuis une autre page.
Il s'agit du problème lié aux applications monopages décrit ci-dessus. Passez à la Méthode 2.

Une popup s'ouvre mais est tronquée.
Il s'agit de la limitation liée à l'iframe dans la Méthode 1. Passez à la Méthode 2.

Le composant de code n'affiche rien.
Vérifiez que WIDGET_ID correspond bien au parentElement de votre code de widget, que l'ID de l'entreprise est correct, et que le composant est réglé sur Fill.

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, puis republiez. Si vous utilisez la Méthode 2, mettez plutôt à jour les valeurs dans l'objet config.

Le widget ne ressemble pas à l'aperçu du back office.
Activez le mode de compatibilité dans les paramètres de votre widget, puis copiez et collez le nouveau code.

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

Comment intégrer un widget bsport sur Framer