ℹ️ Dit artikel wordt bijgewerkt naarmate we de komende maanden meer verbeteringen uitbrengen.
Met de bsport-agendawidget kun je je lesrooster direct op je website weergeven, zodat klanten lessen kunnen bekijken en boeken zonder je site te verlaten. Je vindt deze opties onder Instellingen > Widgets, bij stap 2 · Instellen van het tabblad Configureren, zodra je de agendawidget hebt geselecteerd.
1. Weergave
Kies hoe de agenda wordt weergegeven. De voorbeeldweergave rechts wordt bijgewerkt terwijl je elke optie wijzigt.
Weekweergave, lijstmodus — sessies worden onder elkaar weergegeven, verdeeld over de week.
Weekweergave, kaartmodus — sessies worden weergegeven als kaarten. In de responsieve weergave kun je kiezen om ochtend-, middag- en avondsessies te scheiden. Heb je veel vrije tijdslots gedurende de week, dan raden we aan deze instelling uit te zetten, zodat sessies in plaats daarvan onder elkaar worden weergegeven.
Responsieve weergave — de agenda wordt standaard in kaartmodus weergegeven en schakelt op mobiel over naar lijstmodus.
Sessies van de dag — alleen sessies voor de huidige dag worden getoond, zonder koppen en zonder filters.
2. Uitgelichte info in lestitel
Met Uitgelichte info in lestitel kies je welke informatie als eerste wordt weergegeven op elke agendakaart: Dienst, Docent of Rooster.
3. Filteropties
Filters helpen klanten de lessen te vinden die bij hun voorkeuren passen. Je kunt de agenda filteren op:
Docent — toon lessen met specifieke docenten.
Dienst — filter op type les, bijvoorbeeld Yoga, Pilates of HIIT.
Vestigingen — toon lessen op een specifieke vestiging.
Niveau — filter op moeilijkheidsgraad, bijvoorbeeld Beginner, Gevorderd of Alle niveaus.
Agendafilters op mobiel
Op mobiel worden de zoekbalk en de filters horizontaal weergegeven, waardoor klanten zijwaarts moeten scrollen om ze allemaal te zien. Om dit te wijzigen, plak je een van onderstaande codefragmenten in je Custom CSS-editor.
Toon alle filters — laat de filters over meerdere regels verdelen, zodat ze allemaal tegelijk zichtbaar zijn:
@media (max-width: 500px) { .bs-marketplace-filters__list { flex-wrap: wrap; justify-content: center; }}
Verberg alle filters — verwijdert de filters op mobiel volledig:
@media (max-width: 500px) { .bs-marketplace-filters__list { display: none; }}
Plak een van beide codefragmenten in het Custom CSS-veld voor de agendawidget in je back office, onder Instellingen > Widgets > CSS.
Wil je slechts één specifiek element verbergen in plaats van de hele filterbalk, bekijk dan onze handleiding over het verwijderen van een element met Custom CSS:
4. De widget op je website publiceren
Zodra je je widget hebt ingesteld, open je stap 3 · Publiceren.
Selecteer Embedcode kopiëren.
Ga naar je website-editor.
Voeg een HTML-blok of Code-element toe en plak de code.
Wil je de widget controleren voordat je deze aan je site toevoegt, kopieer dan in plaats daarvan de voorbeeldlink bij diezelfde stap.
Belangrijk: de configuratie die je in de Back Office instelt, wordt niet automatisch bijgewerkt op je website. Telkens wanneer je de configuratie wijzigt, wordt een nieuwe embedcode gegenereerd. Je wijzigingen verschijnen pas zodra je de nieuwe code op je website hebt geplakt.
Loop je tegen problemen aan, bekijk dan ons artikel over de meest voorkomende widgetproblemen. Voor andere vragen neem je contact op met je Account Manager.