ℹ️ Dieser Artikel wird aktualisiert, sobald wir in den kommenden Monaten weitere Verbesserungen veröffentlichen.
Mit dem bsport Kalender-Widget kannst du deinen Wochenplan direkt auf deiner Website anzeigen, damit Kund:innen Kurse durchsuchen und buchen können, ohne deine Seite zu verlassen. Du findest diese Optionen unter Einstellungen > Widgets, in Schritt 2 · Einrichtung im Tab Konfigurieren, sobald du das Kalender-Widget ausgewählt hast.
1. Anzeige
Wähle aus, wie der Kalender aufgebaut ist. Die Vorschau rechts aktualisiert sich bei jeder Änderung.
Wochenansicht, Listenmodus — die Kurse werden über die Woche verteilt untereinander aufgelistet.
Wochenansicht, Kartenmodus — die Kurse werden als Karten dargestellt. In der responsiven Ansicht kannst du Vormittags-, Nachmittags- und Abendkurse getrennt anzeigen lassen. Wenn du viele freie Zeitfenster in der Woche hast, empfehlen wir, diese Einstellung zu deaktivieren, damit die Kurse stattdessen untereinander angezeigt werden.
Responsive Anzeige — der Kalender wird standardmäßig im Kartenmodus angezeigt und wechselt auf Mobilgeräten automatisch in den Listenmodus.
Kurse des Tages — es werden nur die Kurse des aktuellen Tages angezeigt, ohne Überschriften und ohne Filter.
2. Hervorgehobene Info im Kurstitel
Mit Hervorgehobene Info im Kurstitel legst du fest, welche Information auf jeder Kalenderkarte zuerst angezeigt wird: Leistung, Lehrkraft oder Wochenplan.
3. Filteroptionen
Filter helfen Kund:innen dabei, die Kurse zu finden, die ihren Vorlieben entsprechen. Du kannst den Kalender nach Folgendem filtern:
Lehrkraft — zeigt Kurse mit bestimmten Lehrkräften an.
Leistung — filtert nach Kursart, zum Beispiel Yoga, Pilates oder HIIT.
Veranstaltungsorte — zeigt Kurse an einem bestimmten Veranstaltungsort an.
Level — filtert nach Schwierigkeitsgrad, zum Beispiel Anfänger, Fortgeschritten oder Alle Levels.
Kalenderfilter auf Mobilgeräten
Auf Mobilgeräten werden die Suchleiste und die Filter horizontal angezeigt, sodass Kund:innen zur Seite scrollen müssen, um alle zu sehen. Um das zu ändern, füge einen der folgenden Codeschnipsel in deinen Custom-CSS-Editor ein.
Alle Filter anzeigen — lässt die Filter auf mehrere Zeilen umbrechen, damit sie alle auf einmal sichtbar sind:
@media (max-width: 500px) { .bs-marketplace-filters__list { flex-wrap: wrap; justify-content: center; }}
Alle Filter ausblenden — entfernt die Filter auf Mobilgeräten vollständig:
@media (max-width: 500px) { .bs-marketplace-filters__list { display: none; }}
Füge einen der beiden Codeschnipsel in den Custom-CSS-Bereich für das Kalender-Widget in deinem Back Office ein, unter Einstellungen > Widgets > CSS.
Um ein bestimmtes Element statt der gesamten Filterleiste auszublenden, lies unsere Anleitung zum Entfernen eines Elements mit Custom CSS:
4. Das Widget auf deiner Website veröffentlichen
Sobald du dein Widget eingerichtet hast, öffne Schritt 3 · Veröffentlichen.
Wähle Einbettungscode kopieren.
Gehe zu deinem Website-Editor.
Füge einen HTML-Block oder ein Code-Element hinzu und füge den Code ein.
Um das Widget zu prüfen, bevor du es auf deiner Website einfügst, kopiere stattdessen den Vorschau-Link im selben Schritt.
Wichtig: die Konfiguration, die du im Back Office einstellst, aktualisiert sich nicht automatisch auf deiner Website. Jedes Mal, wenn du die Konfiguration änderst, wird ein neuer Einbettungscode generiert. Deine Änderungen erscheinen erst, nachdem du den neuen Code in deine Website eingefügt hast.
Falls Probleme auftreten, lies unseren Artikel zu den häufigsten Widget-Problemen. Bei weiteren Fragen wende dich an deine:n Account Manager:in.