Widget Builder
Im Widget Builder stellst du visuell zusammen, was auf deiner Website erscheinen soll.
Integration erstellen
Wenn du eine neue Integration erstellst, öffnet sich zunächst ein Modal mit Vorlagen:
| Vorlage | Beschreibung |
|---|---|
| Kursplan | Überschrift mit Wochenansicht |
| Vollständig | Kursplan, Pakete und Trainer in 2-Spalten-Layout |
| Nur Pakete | Guthaben-Pakete im Fokus |
| Trainer-Fokus | Team-Präsentation mit Grid |
| Quick-View | Kompakte Liste der nächsten Kurse |
| Leer | Starte von Null und baue alles selbst |
Gib deiner Integration einen Namen (z.B. "Homepage", "Kursseite"), wähle eine Vorlage und klicke auf "Erstellen". Die Vorlage dient als Startpunkt - du kannst im Builder danach alles frei anpassen.
Aufbau
Der Builder hat drei Bereiche:
| Bereich | Position | Funktion |
|---|---|---|
| Widget-Katalog | Links | Alle verfügbaren Widgets zum Hinzufügen |
| Canvas | Mitte | Deine Integration - hier siehst du die Live-Vorschau |
| Einstellungen | Rechts | Konfiguration des ausgewählten Widgets |
Zeilen und Spalten
Widgets werden in Zeilen organisiert. Jede Zeile kann ein bestimmtes Spalten-Layout haben:
| Layout | Beschreibung |
|---|---|
| 1 Spalte | Volle Breite (100%) |
| 2 Spalten (50/50) | Zwei gleich breite Spalten |
| 2 Spalten (33/66) | Schmale linke, breite rechte Spalte |
| 2 Spalten (66/33) | Breite linke, schmale rechte Spalte |
| 3 Spalten (33/33/33) | Drei gleich breite Spalten |
So erstellst du ein Layout
- Klicke auf "Zeile hinzufügen" im Canvas
- Wähle das gewünschte Spalten-Layout
- Ziehe Widgets in die einzelnen Spalten
Auf mobilen Geräten werden alle Spalten-Layouts automatisch untereinander dargestellt.
Widgets hinzufügen
Per Drag & Drop
- Wähle ein Widget im Katalog (links)
- Ziehe es in eine Spalte im Canvas
- Lasse los an der gewünschten Position
Reihenfolge ändern
Ziehe Widgets innerhalb einer Spalte nach oben oder unten, um die Reihenfolge zu ändern.
Widget entfernen
Wähle das Widget aus und klicke auf das Löschen-Symbol (Mülleimer).
Verfügbare Widgets
Kern-Widgets
Kursplan
Interaktiver Kursplan mit allen Terminen deines Studios.
| Einstellung | Optionen |
|---|---|
| Ansicht | Woche, Liste, Kacheln oder nach Trainer gruppiert |
| Filter anzeigen | Ja / Nein - zeigt Kategorie- und Trainer-Filter |
| Wochen voraus | 1 bis 8 - wie viele Wochen angezeigt werden |
| Kacheln pro Zeile | 2, 3 oder 4 (nur bei Kachel-Ansicht) |
| Buchungs-Button | Ja / Nein |
| Kategorie-Filter | Optional nur bestimmte Kategorien anzeigen |
| Trainer-Filter | Optional nur bestimmte Trainer anzeigen |
Klickt ein Besucher auf einen Kurs, öffnet sich ein Detail-Modal mit Beschreibung, Trainer-Infos, Uhrzeit, Kapazität und mehr. Von dort aus kann der Besucher den Kurs auf der Bookicorn-Plattform buchen (öffnet in neuem Tab).
Guthaben-Pakete
Zeigt alle Guthaben-Pakete mit Preisen, Guthaben und Features. Über den "Jetzt kaufen"-Button gelangt der Besucher zur Bookicorn-Plattform, um das Paket zu erwerben.
| Einstellung | Optionen |
|---|---|
| Layout | Grid, Liste oder Karussell |
| Max. Pakete | 1 bis 12 |
| Sortierung | Beliebtheit, Preis oder Credits |
| "Beliebt"-Badge | Ja / Nein - markiert populäre Pakete |
Trainer-Übersicht
Zeigt dein Team mit Profilbildern, Bio und Spezialisierungen.
| Einstellung | Optionen |
|---|---|
| Layout | Grid, Liste oder Karussell |
| Max. Trainer | 1 bis 20 |
| Bio anzeigen | Ja / Nein |
| Spezialisierungen | Ja / Nein |
Klickt ein Besucher auf einen Trainer, öffnet sich ein Profil-Modal mit Bio, Spezialisierungen, Social-Media-Links und kommenden Kursen.
Erweiterte Widgets
Nächste Kurse
Kompakte Liste der nächsten Kurstermine.
| Einstellung | Optionen |
|---|---|
| Anzahl | 1 bis 20 |
| Trainer anzeigen | Ja / Nein |
| Kategorie-Filter | Optional nur bestimmte Kategorien |
Quick Book
Hebt einen einzelnen Kurs hervor - mit Datum, Kapazität und "Jetzt buchen"-Button. Ideal um ein bestimmtes Angebot zu bewerben.
| Einstellung | Optionen |
|---|---|
| Kurs | Dropdown zur Auswahl des Kurses |
| Button-Text | Frei wählbar (Standard: "Jetzt buchen") |
Kategorien
Filterbare Kurs-Kategorien zum Durchstöbern.
| Einstellung | Optionen |
|---|---|
| Stil | Pills (Buttons) oder Cards (Karten) |
| Anzahl anzeigen | Ja / Nein - zeigt Kursanzahl pro Kategorie |
Trainer Spotlight
Ein einzelner Trainer im Fokus - perfekt für die Vorstellung eines Coaches.
| Einstellung | Optionen |
|---|---|
| Trainer | Dropdown zur Auswahl |
| Kurse anzeigen | Ja / Nein |
| Max. Kurse | Anzahl der kommenden Kurse |
Marketing
Bewertungen
Kundenbewertungen aus deinem Studio.
| Einstellung | Optionen |
|---|---|
| Anzahl | 1 bis 20 |
| Mindestbewertung | 1 bis 5 Sterne |
| Stil | Cards oder Karussell |
| Bewertungen erlauben | Ja / Nein - zeigt "Bewertung schreiben"-Button |
Mitglieder-Widgets
Diese Widgets sind für eingeloggte Mitglieder gedacht.
Login Button
Button zum Einloggen auf Bookicorn.
| Einstellung | Optionen |
|---|---|
| Button-Text | Frei wählbar |
| Weiterleitung | URL nach dem Login (optional) |
Credit Status
Zeigt dem eingeloggten Mitglied sein aktuelles Guthaben.
| Einstellung | Optionen |
|---|---|
| Stil | Kompakt oder Detailliert |
Meine Buchungen
Liste der kommenden Buchungen des Mitglieds.
| Einstellung | Optionen |
|---|---|
| Anzahl | Angezeigte Buchungen |
| Vergangene zeigen | Ja / Nein |
Standort
Standort-Karte
Karte mit deinem Studio-Standort.
| Einstellung | Optionen |
|---|---|
| Höhe | In Pixeln |
| Zoom | Zoom-Stufe der Karte |
| Anfahrt anzeigen | Ja / Nein |
Layout-Widgets
Layout-Widgets helfen dir, die Struktur deiner Integration zu gestalten.
Überschrift
| Einstellung | Optionen |
|---|---|
| Text | Frei wählbar |
| Größe | H1, H2, H3 oder H4 |
| Ausrichtung | Links, Zentriert oder Rechts |
Text-Block
| Einstellung | Optionen |
|---|---|
| Inhalt | Freitext (HTML) |
| Ausrichtung | Links, Zentriert oder Rechts |
Abstand (Spacer)
| Einstellung | Optionen |
|---|---|
| Höhe | 8 bis 200 Pixel |
Trennlinie (Divider)
| Einstellung | Optionen |
|---|---|
| Stil | Durchgezogen, Gestrichelt oder Gepunktet |
| Farbe | Optional eigene Farbe |
Speichern und Vorschau
Speichern
Klicke oben rechts auf "Speichern". Änderungen sind sofort live - auf deiner Website erscheint die aktualisierte Version.
Bei ungespeicherten Änderungen wirst du beim Verlassen des Builders gewarnt.
Vorschau
Klicke auf "Vorschau", um die Integration in einem neuen Tab in voller Größe zu sehen. Die Vorschau zeigt echte Live-Daten aus deinem Studio.
Tipps
Empfohlene Zusammenstellung für die Startseite
- Überschrift ("Unsere Kurse")
- Nächste Kurse (3-5 Stück)
- Abstand
- Überschrift ("Guthaben-Pakete")
- Guthaben-Pakete
- Abstand
- Überschrift ("Unser Team")
- Trainer-Übersicht
Für eine Kursplan-Seite
- Kursplan (Wochenansicht, Filter aktiv)
Für eine Preisseite
- Überschrift ("Unsere Pakete")
- Guthaben-Pakete (Grid-Layout)
- Abstand
- Bewertungen (Karussell)
Performance-Tipp
Weniger ist mehr. Ein Widget mit Kursplan und Paketen lädt schneller als zehn verschiedene Widgets auf einer Seite. Nutze separate Integrationen für verschiedene Seiten deiner Website.
Häufige Fragen
Kann ich ein Widget mehrfach verwenden?
Innerhalb einer Integration kann jeder Widget-Typ nur einmal vorkommen. Erstelle separate Integrationen für verschiedene Seiten.
Warum sehe ich im Builder keine Daten?
Stelle sicher, dass du in deinem Studio Kurse, Pakete oder Trainer angelegt hast. Der Builder zeigt Live-Daten an.
Was passiert wenn ich die Reihenfolge ändere?
Nach dem Speichern wird die neue Reihenfolge sofort auf deiner Website sichtbar.
Responsive - wie sieht es auf dem Handy aus?
Alle Widgets sind vollständig responsive. Mehrspaltige Layouts werden auf kleinen Bildschirmen automatisch untereinander dargestellt. Du kannst die Vorschau-Funktion nutzen, um verschiedene Bildschirmgrößen zu testen.