Wix biedt twee manieren om een bsport-widget aan je site toe te voegen. Beide werken, maar ze gedragen zich heel verschillend — en de methode die Wix als eerste voorstelt, is degene die achter de meeste problemen zit die studio's melden. Dit artikel leidt je door beide methodes, legt de Wix-beperkingen achter die problemen uit en laat zien hoe je ze kunt vermijden.
Wil je liever dat wij het voor je instellen? De aanbevolen methode (Methode 2) houdt in dat je aangepaste code aan je Wix-site toevoegt. Als je wilt dat wij dit voor je implementeren, neem dan contact op met bsport-support en stuur ons een uitnodiging als medewerker voor je Wix-site (in Wix: Instellingen → Rollen & machtigingen). Wij nemen het dan verder van je over.
Voordat je begint
Genereer je widgetcode in de bsport back office: Instellingen → Widgets, kies het widgettype, stel je opties in en scroll vervolgens naar beneden om de code te kopiëren. Elke keer dat je een instelling wijzigt, wordt er een nieuwe code gegenereerd, en moet je de nieuwe versie op je site plakken om de wijziging door te voeren.
Methode 1 — Embed HTML-element (snel, met beperkingen)
Klik in de Wix Editor op Elementen toevoegen → Code insluiten → HTML insluiten
Sleep het element naar de pagina waar je de widget wilt plaatsen
Klik op Code invoeren en plak je widgetcode
Pas de grootte van het element aan, zowel in de desktop- als in de mobiele weergave, en klik op Publiceren
Wat je moet weten voordat je deze methode kiest: de iframe
Wix plaatst alles wat je toevoegt met het Embed HTML-element automatisch in een iframe — een kader met een vaste grootte dat niet meegroeit met de inhoud. Dit zit zo in de bouw van Wix, en heeft niets met de widget zelf te maken, maar het veroorzaakt vier terugkerende problemen:
De widget zit vast in een kader met een vaste grootte. Hij kan niet groter worden dan de grootte die je voor het element hebt ingesteld en kan zich niet aanpassen aan zijn omgeving, ook al is de widget zelf responsief.
Scrollen werkt niet goed op mobiel en tablet. Als de inhoud hoger is dan het kader, kunnen bezoekers er vaak niet naartoe scrollen — een swipebeweging binnen een iframe met een vaste hoogte wordt meestal opgepikt door de pagina in plaats van door het kader. Dit is het meest gemelde probleem.
Pop-ups en dialoogvensters zitten vast. Een sessiedetail of betaalvenster kan alleen het kader bedekken, niet de hele pagina, waardoor het afgesneden kan lijken.
Tracking bereikt je pagina niet. Gebeurtenissen die de widget verstuurt, blijven binnen het kader, waardoor Google Tag Manager of andere analysetools op je Wix-site ze niet zien.
Als je een van deze problemen tegenkomt, raden we aan om Methode 2 te gebruiken.
Agenda op Wix: behoud het Embed HTML-element en los het op
Als je de agenda-widget toevoegt en het Embed HTML-element wilt behouden — bijvoorbeeld zodat je hem nog steeds met slepen en neerzetten kunt plaatsen in de Wix Editor — kun je de twee belangrijkste iframe-problemen oplossen met een paar extra scripts:
de agenda wordt afgesneden wanneer de hoogte verandert (bijvoorbeeld bij het wisselen van week)
boekings- en beschrijvingspop-ups openen te ver boven of onder het scherm van de bezoeker
Volg onze stapsgewijze handleiding: Agenda op Wix: formaatprobleem en pop-uppositie oplossen.
Deze optie vereist een gekoppeld domein en een premium Wix-abonnement. Hiermee worden widgetgebeurtenissen niet zichtbaar voor Google Tag Manager — gebruik daarvoor Methode 2.
Methode 2 — Custom Code (aanbevolen)
Hierdoor wordt de widget rechtstreeks in de pagina geplaatst in plaats van in een kader. Hij past zich dan aan zijn natuurlijke hoogte aan, scrollt mee met de pagina, opent dialoogvensters over de hele pagina, en de gebeurtenissen zijn zichtbaar voor je tracking.
Belangrijk: widgets die op deze manier zijn toegevoegd, kunnen niet via slepen en neerzetten worden verplaatst. De widget verschijnt niet als element in de Wix Editor, dus je kunt hem daar niet verslepen of van grootte veranderen. In plaats daarvan wordt de positie in de code ingesteld: je geeft in de code aan in welke sectie van de pagina de widget moet komen (de targetSelector, hieronder uitgelegd). Om de widget later te verplaatsen, wijzig je deze waarde in de code.
Stappen
Ga naar je Wix-dashboard → Instellingen → Custom Code
Klik op Aangepaste code toevoegen
Plak de onderstaande code, nadat je de waarden onder Te vervangen waarden hebt aangepast
Kies onder Code toevoegen aan pagina's voor de specifieke pagina in plaats van alle pagina's
Stel Code plaatsen in in op Body - end
Geef het een naam die je later herkent, klik dan op Toepassen en Publiceren
De 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, // VERVANG door je bedrijfs-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', // VERVANG door een naam naar keuze
targetSelector: 'main[id="PAGES_CONTAINER"] section > div:nth-child(2) > div', // VERVANG door de sectie waar de widget moet verschijnen
widgetType: 'calendar', // VERVANG door je widgettype
config: { // VERVANG door de config uit je widgetcode
calendar: {
}
}
});
})();
</script>
Te vervangen waarden
companyId— vervang1234door je bsport-bedrijfs-ID. Je vindt deze in de widgetcode die in je back office is gegenereerd.containerId— een willekeurige naam voor de container van de widget, bijvoorbeeldbsport-widget-planning. Gebruik een andere naam voor elke widget op dezelfde pagina.widgetType— het type widget dat je wilt tonen, bijvoorbeeldcalendar. Kopieer dit van de regelwidgetTypein je widgetcode uit de back office.targetSelector— waar de widget op de pagina verschijnt. Dit is een CSS-selector die verwijst naar de sectie waarin de widget wordt geplaatst. Om deze te vinden, open je de gepubliceerde pagina in Chrome, klik je met de rechtermuisknop op de sectie waar je de widget wilt, kies je Inspecteren, klik je vervolgens met de rechtermuisknop op het gemarkeerde element en kies je Copy → Copy selector. Dit vervangt slepen en neerzetten: om de widget te verplaatsen, wijzig je deze waarde.config— de opties van de widget. Kopieer hetconfig-object uit je widgetcode in de back office zodat de widget de filters en weergaveopties behoudt die je hebt gekozen.
Om meer dan één widget te tonen, voeg je nog een createBsportWidget({ ... })-blok toe onder WIDGET INSTANCES, met een eigen containerId, targetSelector, widgetType en config.
Als de widget niet verschijnt waar je hem wilt hebben, of als je liever geen code bewerkt, neem dan contact op met bsport-support en wij stellen het voor je in.
De twee methodes vergeleken
Embed HTML-element (slepen en neerzetten)
Eenvoudig visueel te positioneren in de Wix-editor
Onderhevig aan alle bovengenoemde iframe-beperkingen
Prima voor een korte widget met een vaste hoogte op desktop
Custom Code (ingevoegd in de body)
Geen iframe — de widget past zich vrij aan en scrollt mee met de pagina
Dialoogvensters openen over de hele pagina
Trackinggebeurtenissen bereiken je site
Geen slepen en neerzetten: de plaatsing wordt in de code ingesteld met
targetSelector
De loginknop aan je header toevoegen
De bsport-loginknopwidget kan niet via slepen en neerzetten aan een Wix-header worden toegevoegd: Wix-headers accepteren het Embed HTML-element helemaal niet.
Het kan nog steeds met Methode 2. Door de code van de loginknop via Instellingen → Custom Code in de body van de pagina in te voegen, wordt hij zonder de iframe-wrapper in de header geplaatst. Omdat dit betekent dat de knop via code moet worden gepositioneerd, stellen we dit meestal voor je in — zie Hoe wij kunnen helpen hieronder.
Problemen oplossen
Bezoekers kunnen op mobiel niet door alles scrollen.
Dit is de hierboven beschreven iframe-beperking. Stap over op Methode 2.
Een pop-up opent, maar wordt afgesneden.
De widget zit in een iframe. Stap over op Methode 2 — of raadpleeg voor de agenda-widget Agenda op Wix hierboven.
Google Tag Manager ziet geen widgetgebeurtenissen.
Gebeurtenissen kunnen de iframe niet verlaten. Stap over op Methode 2.
De widget verschijnt niet met Methode 2.
Controleer of targetSelector verwijst naar een sectie die op die pagina bestaat, of de bedrijfs-ID klopt, en of de code is toegewezen aan de juiste pagina onder Code toevoegen aan pagina's.
Wijzigingen die in de back office zijn gemaakt, worden niet weergegeven.
De configuratie wordt niet automatisch bijgewerkt op je site. Kopieer de nieuw gegenereerde code en vervang de oude volledig. Werk bij Methode 2 in plaats daarvan de waarden van widgetType en config bij in je aangepaste code.
De widget ziet er anders uit dan in de voorvertoning in de back office, of reageert niet op klikken.
Schakel Compatibiliteitsmodus in je widgetinstellingen in, en kopieer en plak dan de nieuwe code.
Er verschijnt helemaal niets.
Controleer of de widget niet twee keer is toegevoegd — zowel via een Embed-element als via Custom Code. Twee exemplaren op één pagina zullen botsen.
De lay-out oogt krap.
De widget is responsief, maar heeft ruimte nodig. Zorg dat de sectie die hem bevat breed genoeg is, en controleer de mobiele weergave apart in de Wix-editor.
Hoe wij kunnen helpen
Overstappen naar de Custom Code-methode betekent dat er wijzigingen in je Wix-site worden aangebracht: code toevoegen of bewerken onder Instellingen → Custom Code, en soms het aanpassen van de lay-out of opmaak van de pagina. Als je liever hebt dat wij dit regelen, helpen we je graag met:
Een bestaande widget uit de iframe halen om scroll- en pop-upproblemen op te lossen
De loginknop via Custom Code aan je header toevoegen
De grootte, plaatsing en overflow van de widget aanpassen
Je webontwikkelaar begeleiden bij de implementatie
Hiervoor hebben we een uitnodiging als medewerker voor je Wix-site nodig (in Wix: Instellingen → Rollen & machtigingen). Neem contact op met ons supportteam en wij nemen het dan verder van je over.
Kom je er niet uit? Neem contact op met ons supportteam met de pagina-URL en een screenshot, en wij kijken ernaar.