Bevor du startest
Erstelle deinen Widget-Code im bsport-Backoffice: Settings → Widgets, wähle den Widget-Typ aus, konfiguriere deine Optionen, scrolle dann nach unten und kopiere den Code. Bei jeder Änderung einer Einstellung wird ein neuer Code generiert, den du auf deiner Website einfügen musst, damit die Änderung wirksam wird.
Methode 1 — Embed-Element (empfohlen)
Öffne die Seite im Webflow Designer
Klicke auf das Add-Panel (+) und suche Embed unter Components
Ziehe es an die Stelle der Seite, an der das Widget erscheinen soll
Füge deinen Widget-Code in den Code-Editor ein und klicke auf Save & Close
Klicke auf Publish
⚠️ Das Widget wird im Designer nicht angezeigt. Webflow zeigt dort stattdessen einen grauen Platzhalter an. Das ist normal — veröffentliche die Website oder nutze das Vorschau-Augensymbol, um das echte Widget zu sehen.
Zwei Dinge solltest du beim Embed-Element selbst einstellen:
Gib dem übergeordneten Container eine Breite von 100 %, damit das Widget responsiv sein kann
Lass die Höhe auf auto stehen, statt sie fest einzustellen, damit das Widget mit seinem Inhalt mitwachsen kann
Methode 2 — Custom Code auf Seiten- oder Website-Ebene
Nutze diese Methode, wenn dasselbe Widget auf jeder Seite erscheinen soll oder wenn das Skript laden muss, bevor die Seite dargestellt wird.
Einzelne Seite: Page Settings (das Zahnradsymbol neben dem Seitennamen) → Custom Code → Before </body> tag
Gesamte Website: Project Settings → Custom Code → Footer Code
Website-weiter Code gilt für jede veröffentlichte Seite. Bevorzuge daher die Option auf Seitenebene, außer du brauchst das Widget wirklich überall.
Fehlerbehebung
Das Widget wird auf der veröffentlichten Website angezeigt, aber nicht im Designer.
Das ist normales Verhalten. Webflow führt eingebettete Skripte im Designer-Canvas grundsätzlich nicht aus.
Änderungen aus dem Backoffice werden nicht angezeigt.
Die Konfiguration aktualisiert sich nicht automatisch auf deiner Website. Kopiere den neu generierten Code, ersetze den alten vollständig und veröffentliche die Website erneut.
Das Widget sieht anders aus als in der Backoffice-Vorschau.
Das Stylesheet deiner Website beeinflusst es möglicherweise. Aktiviere den Compatibility Mode in deinen Widget-Einstellungen und füge den neuen Code dann ein.
Der Code-Editor akzeptiert den Code nicht.
Das Embed-Element von Webflow hat ein Limit von 50.000 Zeichen. Der bsport-Widget-Code liegt deutlich darunter. Falls du dieses Limit erreichst, prüfe, ob versehentlich noch anderer Code mit eingefügt wurde.
Das Widget wird abgeschnitten oder wirkt zu eng dargestellt.
Prüfe die Breite des übergeordneten Containers und einen eventuell gesetzten max-width-Wert und kontrolliere die mobilen Breakpoints separat im Designer.
Es erscheint gar nichts.
Prüfe, ob die Website veröffentlicht wurde, nachdem du den Code hinzugefügt hast — Änderungen in Webflow sind erst nach dem Veröffentlichen live.
Kommst du nicht weiter? Kontaktiere unser Support-Team mit der Seiten-URL und einem Screenshot — wir schauen es uns an.