Framer bouwt sites als single-page applications (SPA's), wat invloed heeft op het gedrag van ingesloten widgets. Als je dit van tevoren weet, voorkom je de twee problemen die studio's het vaakst melden: de widget verschijnt niet wanneer een bezoeker vanaf elders op de site naar de pagina navigeert, en pop-ups blijven beperkt tot een klein vak.

Voordat je begint

Genereer je widgetcode in het bsport back office: Instellingen → Widgets, kies het widgettype, stel je opties in, scroll vervolgens naar beneden en kopieer de code. Telkens wanneer je een instelling wijzigt, wordt een nieuwe code gegenereerd, en moet je de nieuwe versie op je site plakken om de wijziging door te voeren.

Methode 1 — Embed-component (snel, met beperkingen)

Klik in het Framer-canvas op Insert → zoek naar Embed
Sleep het op de pagina
Kies in het rechterpaneel HTML en plak je widgetcode
Pas de grootte van het frame aan en klik op Publish

Het single-page app-probleem

Framer laadt de pagina niet opnieuw wanneer een bezoeker tussen onderdelen van je site navigeert — de inhoud wordt ter plekke vervangen. Daarnaast plaatst de Embed-component je code in een iframe, waardoor je geen controle meer hebt over wanneer het widgetscript wordt uitgevoerd. Het gevolg: de widget kan leeg verschijnen bij het eerste bezoek — vooral op iOS (Safari en Chrome) — en pas zichtbaar worden na een volledige vernieuwing van de pagina. Omdat het na een vernieuwing wel werkt, blijft het probleem bij het testen vaak onopgemerkt.

⚠️ Zie je de widget wel na een vernieuwing, maar niet bij het eerste laden of bij navigatie naar de pagina? Dan is dit de oorzaak. De oplossing is om de Embed-component te vervangen door een Framer code component (Methode 2 hieronder), die het widgetscript laadt en de widget bij elke weergave van de pagina opnieuw mount.

Methode 2 — Code component (aanbevolen)

Open in Framer het paneel Assets en maak een nieuwe code component aan.

Verwijder de standaardcode en plak de onderstaande code.

import { useEffect } from "react";// Vervang dit door de parentElement-waarde uit je bsport-widgetcode
const WIDGET_ID = "bsport-widget-XXXXXX";export default function BsportWidget() {
  useEffect(() => {
    // Kopieer deze waarden uit je bsport-widgetcode
    const config = {
      parentElement: WIDGET_ID,
      companyId: 1234, // vervang door je bedrijfs-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);
      }
      // Voorkom dat de widget twee keer wordt gemount
      if (document.getElementById(WIDGET_ID)?.hasChildNodes()) {
        return;
      }
      // Wis een eerdere registratie zodat de widget opnieuw kan worden gemount
      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>;
}

Zoek in je bsport-widgetcode het object binnen MountBsportWidget({ ... }) en kopieer de waarden (bedrijfs-ID, widgettype, opties) naar het config-object hieronder.

<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>

Stel WIDGET_ID in op de parentElement-waarde uit je widgetcode (bijvoorbeeld bsport-widget-441452).
Verwijder de oude Embed-component van je pagina en sleep vervolgens de nieuwe code component vanuit Assets op diezelfde plek op de pagina.
Stel de breedte en hoogte van de component in op Fill, zodat de widget niet wordt afgekapt of verborgen.
Klik op Publish en test vervolgens door vanaf een andere pagina van je site naar de pagina te navigeren en op een iPhone te kijken — niet alleen met een vernieuwing.

Waarom dit werkt

In een single-page app zorgt navigeren tussen pagina's niet voor een volledige herlaadbeurt, waardoor ingesloten scripts — zeker binnen een iframe — mogelijk niet opnieuw worden uitgevoerd. De code component laadt het bsport-script zelf en mount de widget telkens rechtstreeks in zijn eigen container wanneer de pagina wordt weergegeven, zodat de widget betrouwbaar wordt weergegeven bij het eerste laden, na navigatie binnen de site en bij terugkerende bezoeken.

Problemen oplossen

De widget verschijnt na een vernieuwing, maar niet bij het eerste laden of bij navigatie vanaf een andere pagina.
Dit is het hierboven beschreven single-page app-probleem. Gebruik Methode 2.

Een pop-up opent, maar wordt afgekapt.
Dit is de iframe-beperking uit Methode 1. Gebruik Methode 2.

De code component toont niets.
Controleer of WIDGET_ID overeenkomt met de parentElement uit je widgetcode, of het bedrijfs-ID juist is, en of de component is ingesteld op Fill.

Wijzigingen in het back office worden niet weergegeven.
De configuratie wordt niet automatisch bijgewerkt op je site. Kopieer de nieuw gegenereerde code en vervang de oude volledig, publiceer daarna opnieuw. Gebruik je Methode 2, werk dan in plaats daarvan de waarden in het config-object bij.

De widget ziet er anders uit dan de voorbeeldweergave in het back office.
Schakel Compatibiliteitsmodus in bij je widgetinstellingen, kopieer en plak vervolgens de nieuwe code.

Kom je er niet uit? Neem contact op met ons supportteam met de pagina-URL en een screenshot, dan kijken we ernaar.

Een bsport-widget integreren op Framer