Wix bietet zwei Möglichkeiten, ein bsport-Widget auf deiner Website einzubinden. Beide funktionieren, verhalten sich aber sehr unterschiedlich – und die Methode, die Wix zuerst vorschlägt, ist diejenige, hinter der sich die meisten Probleme verbergen, die Studios melden. Dieser Artikel führt dich durch beide Methoden, erklärt die Wix-Einschränkungen hinter diesen Problemen und zeigt, wie du sie vermeidest.
Soll das für dich eingerichtet werden? Die empfohlene Methode (Methode 2) besteht darin, benutzerdefinierten Code zu deiner Wix-Website hinzuzufügen. Wenn wir das für dich umsetzen sollen, wende dich an den bsport-Support und schicke uns eine Mitarbeiter-Einladung für deine Wix-Website (in Wix: Settings → Roles & Permissions). Den Rest übernehmen wir.
Bevor du startest
Erzeuge 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. 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-HTML-Element (schnell, mit Einschränkungen)
Klicke im Wix-Editor auf Add Elements → Embed Code → Embed HTML
Ziehe das Element auf die Seite, an der das Widget erscheinen soll
Klicke auf Enter Code und füge deinen Widget-Code ein
Passe die Größe des Elements sowohl im Desktop- als auch im Mobilmodus an und klicke auf Publish
Was du vor dieser Methode wissen solltest: das iFrame
Wix platziert alles, was über das Embed-HTML-Element hinzugefügt wird, automatisch in einem iFrame – einem Rahmen mit fester Größe, der nicht mit seinem Inhalt mitwächst. Das liegt an der Funktionsweise von Wix, nicht am Widget selbst, und führt zu vier wiederkehrenden Problemen:
Das Widget ist auf eine Box mit fester Größe beschränkt. Es kann nicht über die für das Element festgelegte Größe hinauswachsen und sich nicht an seine Umgebung anpassen, obwohl das Widget selbst responsiv ist.
Das Scrollen funktioniert auf Mobilgeräten und Tablets nicht richtig. Wenn der Inhalt höher ist als der Rahmen, können Besucher oft nicht dorthin scrollen – eine Touch-Geste innerhalb eines iFrames mit fester Höhe wird meist von der Seite statt vom Rahmen erfasst. Das ist das am häufigsten gemeldete Symptom.
Popups und Dialoge sind eingeschlossen. Ein Dialog mit Kursdetails oder zur Zahlung kann nur den Rahmen abdecken, nicht die ganze Seite, und wirkt dadurch abgeschnitten.
Das Tracking erreicht deine Seite nicht. Ereignisse, die das Widget sendet, bleiben innerhalb des Rahmens, sodass Google Tag Manager oder andere Analysetools auf deiner Wix-Website sie nicht erfassen.
Solltest du eines dieser Probleme feststellen, empfehlen wir Methode 2.
Kalender auf Wix: Embed-HTML-Element beibehalten und Probleme beheben
Wenn du das Kalender-Widget hinzufügst und das Embed-HTML-Element beibehalten möchtest – zum Beispiel, um es weiterhin per Drag-and-Drop im Wix-Editor platzieren zu können – kannst du die beiden Hauptprobleme des iFrames mit ein paar zusätzlichen Skripten beheben:
der Kalender wird abgeschnitten, wenn sich seine Höhe ändert (zum Beispiel beim Wechsel der Woche)
Buchungs- und Beschreibungs-Popups öffnen sich zu weit oberhalb oder unterhalb des sichtbaren Bildschirmbereichs
Folge unserer Schritt-für-Schritt-Anleitung: Kalender auf Wix: Größenanpassung und Popup-Position korrigieren.
Diese Option erfordert eine verbundene Domain und einen Wix-Premium-Plan. Sie macht die Widget-Ereignisse jedoch nicht für Google Tag Manager sichtbar – nutze dafür Methode 2.
Methode 2 – Custom Code (empfohlen)
Dabei wird das Widget direkt in die Seite eingebunden statt in einen Rahmen. Es passt sich dann an seine natürliche Höhe an, scrollt mit der Seite mit, öffnet Dialoge über die gesamte Seite, und seine Ereignisse sind für dein Tracking sichtbar.
Wichtig: Auf diese Weise hinzugefügte Widgets lassen sich nicht per Drag-and-Drop verschieben. Das Widget erscheint nicht als Element im Wix-Editor, du kannst es dort also weder platzieren noch in der Größe anpassen. Stattdessen wird seine Position im Code festgelegt: Du gibst im Code an, in welchem Bereich der Seite das Widget erscheinen soll (der targetSelector, unten erklärt). Um das Widget später zu verschieben, änderst du diesen Wert im Code.
Schritte
Gehe in deinem Wix-Dashboard zu Settings → Custom Code
Klicke auf Add Custom Code
Füge den unten stehenden Code ein, nachdem du die unter Zu ersetzende Werte beschriebenen Werte angepasst hast
Wähle unter Add Code to Pages die betreffende Seite statt aller Seiten aus
Stelle Place Code in auf Body - end
Gib einen Namen an, den du später wiedererkennst, klicke dann auf Apply und Publish
Der 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>
Zu ersetzende Werte
companyId– ersetze1234durch deine bsport-Firmen-ID. Du findest sie im Widget-Code, der in deinem Backoffice erzeugt wird.containerId– ein beliebiger Name für den Container des Widgets, zum Beispielbsport-widget-planning. Verwende für jedes Widget auf derselben Seite einen anderen Namen.widgetType– der Typ des Widgets, das angezeigt werden soll, zum Beispielcalendar. Kopiere ihn aus derwidgetType-Zeile deines Backoffice-Widget-Codes.targetSelector– wo das Widget auf der Seite erscheint. Dies ist ein CSS-Selektor, der auf den Bereich verweist, in den das Widget eingefügt wird. Öffne dazu deine veröffentlichte Seite in Chrome, klicke mit der rechten Maustaste auf den Bereich, in dem das Widget erscheinen soll, wähle Inspect und dann mit Rechtsklick auf das hervorgehobene Element Copy → Copy selector. Das ersetzt das Drag-and-Drop: Um das Widget zu verschieben, änderst du diesen Wert.config– die Optionen des Widgets. Kopiere dasconfig-Objekt aus deinem Backoffice-Widget-Code, damit das Widget die von dir gewählten Filter und Anzeigeoptionen beibehält.
Um mehr als ein Widget anzuzeigen, füge unter WIDGET INSTANCES einen weiteren createBsportWidget({ ... })-Block hinzu, mit eigener containerId, eigenem targetSelector, widgetType und config.
Wenn das Widget nicht dort erscheint, wo du es möchtest, oder du lieber keinen Code bearbeiten willst, wende dich an den bsport-Support – wir richten es für dich ein.
Vergleich der beiden Methoden
Embed-HTML-Element (Drag-and-Drop)
Lässt sich im Wix-Editor einfach visuell platzieren
Unterliegt allen oben genannten iFrame-Einschränkungen
Geeignet für ein kurzes Widget mit fester Höhe auf dem Desktop
Custom Code (in den Body eingefügt)
Kein iFrame – das Widget passt sich frei an und scrollt mit der Seite mit
Dialoge öffnen sich über die gesamte Seite
Tracking-Ereignisse erreichen deine Seite
Kein Drag-and-Drop: Die Platzierung wird im Code über
targetSelectorfestgelegt
Login-Button zu deinem Header hinzufügen
Das Login-Button-Widget von bsport kann nicht per Drag-and-Drop zu einem Wix-Header hinzugefügt werden: Wix-Header akzeptieren das Embed-HTML-Element überhaupt nicht.
Mit Methode 2 ist dies dennoch möglich. Wenn du den Code des Login-Buttons über Settings → Custom Code in den Seitenkörper einfügst, wird er im Header ohne iFrame-Hülle platziert. Da dies bedeutet, die Position des Buttons im Code festzulegen, übernehmen wir das in der Regel für dich – siehe Wie wir dir helfen können unten.
Fehlerbehebung
Besucher können auf Mobilgeräten nicht durch alle Inhalte scrollen.
Das liegt an der oben beschriebenen iFrame-Einschränkung. Wechsle zu Methode 2.
Ein Popup öffnet sich, wird aber abgeschnitten.
Das Widget befindet sich in einem iFrame. Wechsle zu Methode 2 – oder sieh dir für das Kalender-Widget den Abschnitt Kalender auf Wix oben an.
Google Tag Manager erfasst keine Widget-Ereignisse.
Ereignisse können das iFrame nicht verlassen. Wechsle zu Methode 2.
Das Widget erscheint bei Methode 2 nicht.
Prüfe, ob targetSelector auf einen Bereich verweist, der auf dieser Seite existiert, ob die Firmen-ID korrekt ist und ob der Code unter Add Code to Pages der richtigen Seite zugewiesen ist.
Im Backoffice vorgenommene Änderungen werden nicht angezeigt.
Die Konfiguration wird auf deiner Website nicht automatisch aktualisiert. Kopiere den neu erzeugten Code und ersetze den alten vollständig. Bei Methode 2 aktualisierst du stattdessen die Werte widgetType und config in deinem Custom Code.
Das Widget sieht anders aus als in der Backoffice-Vorschau oder reagiert nicht auf Klicks.
Aktiviere den Compatibility Mode in deinen Widget-Einstellungen und kopiere dann den neuen Code erneut ein.
Es erscheint gar nichts.
Prüfe, ob das Widget nicht doppelt hinzugefügt wurde – sowohl über ein Embed-Element als auch über Custom Code. Zwei Kopien auf einer Seite stehen miteinander in Konflikt.
Das Layout wirkt beengt.
Das Widget ist responsiv, braucht aber Platz. Stelle sicher, dass der umgebende Bereich breit genug ist, und prüfe die mobile Ansicht separat im Wix-Editor.
Wie wir dir helfen können
Der Wechsel zur Custom-Code-Methode erfordert Änderungen innerhalb deiner Wix-Website: das Hinzufügen oder Bearbeiten von Code unter Settings → Custom Code sowie manchmal die Anpassung von Layout oder Styling der Seite. Wenn du möchtest, dass wir das übernehmen, helfen wir dir gerne dabei:
Ein vorhandenes Widget aus dem iFrame zu lösen, um Scroll- und Popup-Probleme zu beheben
Den Login-Button über Custom Code zu deinem Header hinzuzufügen
Größe, Platzierung und Überlauf des Widgets anzupassen
Deinen Webentwickler durch die Umsetzung zu begleiten
Dafür benötigen wir eine Mitarbeiter-Einladung für deine Wix-Website (in Wix: Settings → Roles & Permissions). Wende dich an unser Support-Team, den Rest übernehmen wir.
Kommst du nicht weiter? Wende dich mit der Seiten-URL und einem Screenshot an unser Support-Team, und wir schauen es uns an.