Framer baut Websites als Single-Page-Applications (SPAs), was sich darauf auswirkt, wie eingebettete Widgets sich verhalten. Wenn du das von vornherein weißt, vermeidest du die beiden Probleme, die Studios am häufigsten melden: Das Widget erscheint nicht, wenn ein Besucher von einer anderen Seite der Website zur Seite navigiert, und Popups sind auf eine kleine Box beschränkt.
Bevor du startest
Erzeuge deinen Widget-Code im bsport Backoffice: Einstellungen → Widgets, wähle den Widget-Typ aus, konfiguriere deine Optionen, scrolle dann nach unten und kopiere den Code. Jedes Mal, wenn du eine Einstellung änderst, wird ein neuer Code erzeugt, und du musst die neue Version auf deiner Website einfügen, damit die Änderung wirksam wird.
Methode 1 — Embed-Komponente (schnell, mit Einschränkungen)
Klicke im Framer-Canvas auf Insert → suche nach Embed
Ziehe sie auf die Seite
Wähle im rechten Panel HTML aus und füge deinen Widget-Code ein
Passe die Größe des Rahmens an und klicke auf Publish
Das Single-Page-App-Problem
Framer lädt die Seite nicht neu, wenn ein Besucher zwischen Bereichen deiner Website wechselt — der Inhalt wird stattdessen direkt ausgetauscht. Zusätzlich verpackt die Embed-Komponente deinen Code in ein iframe, wodurch du die Kontrolle darüber verlierst, wann das Widget-Skript ausgeführt wird. Das Ergebnis: Das Widget kann beim ersten Besuch leer erscheinen — besonders auf iOS (Safari und Chrome) — und erst nach einem vollständigen Neuladen angezeigt werden. Da es beim Neuladen funktioniert, bleibt das Problem beim Testen oft unbemerkt.
⚠️ Wenn du das Widget beim Neuladen siehst, aber nicht beim ersten Laden oder beim Navigieren zur Seite, liegt genau das vor. Die Lösung besteht darin, die Embed-Komponente durch eine Framer-Code-Component zu ersetzen (Methode 2 unten), die das Widget-Skript lädt und das Widget selbst jedes Mal einbindet, wenn die Seite angezeigt wird.
Methode 2 — Code-Component (empfohlen)
Öffne in Framer das Panel Assets und erstelle eine neue Code-Component.
Lösche den Standardcode und füge den folgenden Code ein.
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>;
}Suche in deinem bsport-Widget-Code das Objekt innerhalb von
MountBsportWidget({ ... })und kopiere dessen Werte (Company-ID, Widget-Typ, Optionen) in dasconfig-Objekt unten.<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>Setze
WIDGET_IDauf den Wert vonparentElementaus deinem Widget-Code (zum Beispielbsport-widget-441452).Lösche die alte Embed-Komponente von deiner Seite und ziehe anschließend die neue Code-Component aus Assets an deren Stelle auf die Seite.
Setze die Breite und Höhe der Komponente auf Fill, damit das Widget nicht abgeschnitten oder ausgeblendet wird.
Klicke auf Publish und teste dann, indem du von einer anderen Seite deiner Website zur Seite navigierst und auf einem iPhone prüfst — nicht nur durch Neuladen.
Warum das funktioniert
In einer Single-Page-App löst der Wechsel zwischen Seiten kein vollständiges Neuladen aus, sodass eingebettete Skripte — besonders innerhalb eines iframes — möglicherweise nicht erneut ausgeführt werden. Die Code-Component lädt das bsport-Skript selbst und bindet das Widget jedes Mal, wenn die Seite angezeigt wird, direkt in ihren eigenen Container ein. So wird das Widget zuverlässig angezeigt — beim ersten Laden, nach der Navigation innerhalb der Website und bei erneuten Besuchen.
Fehlerbehebung
Das Widget erscheint beim Neuladen, aber nicht beim ersten Laden oder beim Navigieren von einer anderen Seite.
Das oben beschriebene Single-Page-App-Problem. Wechsle zu Methode 2.
Ein Popup öffnet sich, ist aber abgeschnitten.
Die iframe-Einschränkung aus Methode 1. Wechsle zu Methode 2.
Die Code-Component zeigt nichts an.
Prüfe, ob WIDGET_ID mit dem parentElement aus deinem Widget-Code übereinstimmt, ob die Company-ID korrekt ist und ob die Komponente auf Fill gesetzt ist.
Änderungen, die im Backoffice vorgenommen wurden, werden nicht angezeigt.
Die Konfiguration aktualisiert sich auf deiner Website nicht automatisch. Kopiere den neu erzeugten Code und ersetze den alten vollständig, dann veröffentliche erneut. Wenn du Methode 2 verwendest, aktualisiere stattdessen die Werte im config-Objekt.
Das Widget sieht anders aus als in der Backoffice-Vorschau.
Aktiviere den Kompatibilitätsmodus in deinen Widget-Einstellungen, kopiere dann den neuen Code und füge ihn ein.
Kommst du nicht weiter? Kontaktiere unser Team mit der Seiten-URL und einem Screenshot — wir schauen uns das an.