ℹ️ Een instelling gewijzigd, maar je website is niet bijgewerkt? De instellingen van je widget worden opgeslagen in de widgetcode op je website. Elke keer dat je de configuratie in de Back Office wijzigt, wordt er een nieuwe code gegenereerd. Je website blijft de oude instellingen tonen totdat je de nieuwe code kopieert en de oude ermee vervangt.

De widget is compatibel met een breed scala aan websites, waaronder Wix, WordPress, ContentSquare en andere. Gezien de diversiteit aan platforms kan een specifieke configuratie nodig zijn voor de beste integratie. Heb je na het lezen van onze widgetdocumentatie nog steeds problemen, dan raden we je aan de onderstaande controles uit te voeren.

1. De widget toont inhoud die er niet hoort te staan

Je kunt bepalen welke boekingen in de widget verschijnen door ze in categorieën te organiseren. Controleer of de bijbehorende filters in je widgetconfiguratie zijn ingesteld zoals je wilt.

Heb je de configuratie aangepast, kopieer dan de nieuw gegenereerde code en plak deze opnieuw op je site.

2. De widget ziet er anders uit dan in de preview, lijkt afgesneden of reageert niet op klikken

Activeer de compatibiliteitsmodus. Dit isoleert de widget van de stijlen en het thema van je website, wat meestal de oorzaak is van deze drie problemen.

Heb je de configuratie aangepast, kopieer dan de nieuw gegenereerde code en plak deze opnieuw op je site.

3. De kalenderwidget is niet responsief op mobiel

"De kalenderwidget wordt op mobiel weergegeven in kaartweergave."

Selecteer de optie Responsieve weergave in de weergave-instellingen.
Kopieer de nieuw gegenereerde code en plak deze opnieuw op je site.

4. De kalenderwidget toont de lijstweergave op desktop

"De kalenderwidget wordt op mijn desktop als lijst weergegeven in plaats van als kaarten."

Dit is verwacht gedrag, geen fout. De kalenderwidget is responsief: hij toont een lijst met lessen op kleine schermen en kaarten op grote schermen. Maar hij kiest de weergave op basis van de breedte van de container waarin de widget op je website staat, niet op basis van de schermbreedte van de bezoeker. Standaard schakelt hij pas over naar kaarten wanneer die container breder is dan 1280px.

Dus zelfs op een groot desktopscherm blijft de widget de lijstweergave tonen als de sectie met de widget smaller is dan 1280px — bijvoorbeeld omdat je pagina een maximale inhoudsbreedte, marges of een zijbalk heeft.

Er zijn twee manieren om dit op te lossen:

Maak de container breder. Stel de sectie met de widget in op minimaal 1280px breed (bijvoorbeeld volledige breedte). De widget schakelt dan automatisch over naar kaarten op desktop.
Verlaag het omschakelpunt. Wil je een smallere container behouden, voeg dan de optie cardModeDisplayMinWidth toe aan je widgetcode, binnen de "calendar"-instellingen, met de breedte in pixels vanaf welke kaarten moeten worden getoond. In dit voorbeeld worden kaarten getoond zodra de container breder is dan 1000px:

"config": {
    "calendar": {
        // ...je bestaande kalenderopties...
        "cardModeDisplayMinWidth": 1000
    }
}

Deze optie wordt handmatig toegevoegd aan de code. Als je later je widgetinstellingen in het back office wijzigt en de nieuw gegenereerde code plakt, vergeet dan niet om deze opnieuw toe te voegen.

5. De widgettaal klopt niet, of mijn eigen tekst wordt niet vertaald

"Mijn beschrijvingen en titels worden niet vertaald.": De widgettaal vertaalt alleen standaard bsport-tekst, zoals knoppen en labels (bijvoorbeeld "Toevoegen aan winkelwagen"). Lestitels, beschrijvingen en activiteitnamen verschijnen precies zoals je ze in je back office hebt geschreven.

"Mijn website heeft meerdere talen, maar de widget toont altijd dezelfde taal.": Elke widgetcode heeft één taalinstelling, dus dezelfde code toont dezelfde taal op elke versie van je site. Bij "Automatisch" volgt de widget de browsertaal van de bezoeker, niet de taal van de pagina. Wil je een andere taal per pagina, genereer dan één widgetcode per taal en plak elke code op de bijbehorende pagina.

Kopieer na het wijzigen van de configuratie de nieuwe code en plak deze op je site.

6. De widget ziet er op mobiel samengedrukt uit

bsport-widgets zijn standaard responsief, maar hebben een minimale hoeveelheid ruimte nodig om goed te kunnen uitrekken. Controleer of de container waarin je de widget hebt geplaatst breed genoeg is om deze goed weer te geven.

7. De kalenderwidget loopt over op mobiel

"Ik heb de kalenderwidget geplaatst, maar deze loopt over op mobiel."

De kalenderwidget rekt uit tot de maximale breedte van de pagina. Als de container met de widget een maximale breedte heeft die groter is dan de breedte van het mobiele scherm, rekt de kalender uit tot die breedte en loopt deze over.

Controleer of de container met de kalenderwidget een max-width CSS-regel heeft.
Voeg de onderstaande regel toe aan je aangepaste CSS-gebied.
Sla de wijzigingen op

div[id*="bsport-widget"] { width: 100%; }

8. Aangepaste CSS werkt niet

"Ik heb CSS-regels toegepast om de widgets aan te passen, maar ze worden niet toegepast."

Controleer of !important aan je regels is toegevoegd, en verwijder dit indien nodig. bsport voegt automatisch al !important toe aan aangepaste CSS, dus als je dit zelf ook toevoegt, ontstaat er een duplicaat, wat de bedoelde opmaak kan verstoren en tot onverwacht gedrag kan leiden.

9. Apple Pay en Google Pay verschijnen niet als betaalmethoden

"Ik heb Apple Pay en Google Pay ingeschakeld, maar ze verschijnen niet in het aankoopproces."

Ga naar Instellingen > Betaalmethode en controleer of Apple Pay en Google Pay beide zijn geselecteerd.
Voeg je domein toe om ze op widgets in te schakelen.
Sla op.

10. Ander probleem

Voor alles wat hierboven niet aan bod komt, neem je contact met ons op via support@bsport.io.

Widget: meestvoorkomende problemen