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-element (aanbevolen)
Open de pagina in de Webflow Designer
Klik op het paneel Add (+) en zoek Embed onder Components
Sleep het naar de plek op de pagina waar je de widget wilt
Plak je widgetcode in de code-editor en klik op Save & Close
Klik op Publish
⚠️ De widget wordt niet weergegeven in de Designer. Webflow toont daar in plaats daarvan een grijze placeholder. Dit is normaal — publiceer de site of gebruik het voorbeeld-oogicoon om de echte widget te zien.
Twee dingen die je het beste instelt op het Embed-element zelf:
Geef de bovenliggende container een breedte van 100%, zodat de widget ruimte heeft om responsief te zijn
Laat de hoogte op auto staan in plaats van deze vast te zetten, zodat de widget kan meegroeien met de inhoud
Methode 2 — Custom code voor pagina of site
Gebruik dit wanneer dezelfde widget op elke pagina moet verschijnen, of wanneer het script moet laden voordat de pagina wordt weergegeven.
Eén pagina: Page Settings (het tandwielicoon naast de paginanaam) → Custom Code → Before </body> tag
Hele site: Project Settings → Custom Code → Footer Code
Sitebrede code geldt voor elke gepubliceerde pagina, dus kies bij voorkeur de optie op paginaniveau, tenzij je het echt overal nodig hebt.
Problemen oplossen
De widget wordt wel op de gepubliceerde site getoond, maar niet in de Designer.
Dit is normaal gedrag. Webflow voert ingesloten scripts nooit uit op het Designer-canvas.
Wijzigingen die je in de back office hebt gemaakt, verschijnen niet.
De configuratie wordt niet automatisch bijgewerkt op je site. Kopieer de nieuw gegenereerde code en vervang de oude code volledig, en publiceer daarna opnieuw.
De widget ziet er anders uit dan in de back-office preview.
Het stylesheet van je site kan hier invloed op hebben. Schakel Compatibility Mode in bij je widgetinstellingen en kopieer en plak daarna de nieuwe code.
De code-editor accepteert de code niet.
Het Embed-element van Webflow heeft een limiet van 50.000 tekens. De bsport-widgetcode blijft daar ruim onder, dus controleer of er niet per ongeluk nog iets anders is meegeplakt als je deze limiet bereikt.
De widget wordt afgesneden of oogt krap.
Controleer de breedte van de bovenliggende container en eventuele max-width-instellingen, en bekijk de mobiele breakpoints apart in de Designer.
Er verschijnt helemaal niets.
Controleer of de site is gepubliceerd nadat je de code hebt toegevoegd — wijzigingen in Webflow zijn pas live nadat je publiceert.
Kom je er niet uit? Neem contact op met ons support Team met de pagina-URL en een screenshot, dan kijken we ernaar.