Website-Integration
Mit der Website-Integration zeigst du Bookicorn-Inhalte direkt auf deiner eigenen Website. Deine Kunden sehen den Kursplan, stöbern durch Pakete und lernen dein Team kennen. Für Buchungen und Käufe werden sie nahtlos zur Bookicorn-Plattform weitergeleitet.
Was sind Widgets?
Widgets sind interaktive Bausteine, die du frei kombinieren kannst. Jedes Widget zeigt einen bestimmten Teil deines Studios:
| Widget | Was es zeigt |
|---|---|
| Kursplan | Interaktiver Wochenplan mit Filterung und Kursdetails |
| Guthaben-Pakete | Alle Pakete mit Preisen, Guthaben und "Kaufen"-Link |
| Trainer-Übersicht | Dein Team mit Profilen und kommenden Kursen |
| Nächste Kurse | Kompakte Liste der nächsten Termine |
| Quick Book | Ein einzelner Kurs hervorgehoben mit "Buchen"-Link |
| Kategorien | Kurs-Kategorien zum Durchstöbern |
| Trainer Spotlight | Ein einzelner Trainer im Fokus |
| Bewertungen | Kundenbewertungen |
| Login Button | Mitglieder-Login |
| Credit Status | Guthaben-Anzeige für eingeloggte Mitglieder |
| Meine Buchungen | Kommende Buchungen eines Mitglieds |
| Standort-Karte | Karte mit deinem Standort |
Zusätzlich gibt es Layout-Widgets (Überschriften, Textblöcke, Abstände, Trennlinien), mit denen du die Struktur gestaltest.
So funktioniert es
Schritt 1: Integration erstellen
- Gehe im Admin-Bereich zu Marketing → Integrationen
- Klicke "Neue Integration"
- Gib einen Namen ein (z.B. "Homepage", "Kursseite")
- Wähle eine Vorlage als Startpunkt (Kursplan, Vollständig, Nur Pakete, Trainer-Fokus, Quick-View oder Leer)
- Klicke "Erstellen" - der Widget Builder öffnet sich
Schritt 2: Widgets zusammenstellen
Im Widget Builder stellst du per Drag & Drop zusammen, was auf deiner Website erscheinen soll. Du kannst Widgets in Zeilen mit mehreren Spalten anordnen und alles farblich an dein Design anpassen.
Schritt 3: Embed-Code einfügen
Du bekommst einen kurzen HTML-Code, den du auf deiner Website einfügst:
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="dein-studio" integration="deine-integration"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>
Schritt 4: Fertig
Das Widget erscheint sofort auf deiner Website. Alle Daten kommen live aus Bookicorn - Kurse, Trainer, Pakete, Verfügbarkeit. Änderungen in Bookicorn sind automatisch auf deiner Website sichtbar.
Vorteile
| Beschreibung | |
|---|---|
| Passt sich an | Farben, Schrift und Stil passen sich deiner Website an |
| Immer aktuell | Daten kommen live aus Bookicorn - keine manuelle Pflege |
| Responsive | Funktioniert perfekt auf Desktop, Tablet und Handy |
| Isoliert | Widget-Styles beeinflussen deine Website nicht und umgekehrt |
| Schnell | Lädt asynchron und blockiert deine Seite nicht |
| Sicher | Daten werden verschlüsselt über HTTPS übertragen |
Voraussetzungen
Add-on erforderlich
Die Website-Integration ist ein kostenpflichtiges Add-on (29 €/Monat).
Aktivieren:
- Gehe zu Einstellungen → Add-on Store
- Wähle "Website Integration"
- Klicke auf "Aktivieren"
Technische Anforderungen
Deine Website muss lediglich JavaScript erlauben. Das ist bei allen modernen Websites und Website-Baukästen (WordPress, Wix, Squarespace, Webflow, Jimdo, etc.) der Fall.
Mehrere Integrationen
Du kannst beliebig viele Integrationen erstellen - für verschiedene Seiten oder Zwecke:
| Integration | Seite | Beispiel-Widgets |
|---|---|---|
| Homepage | Startseite | Nächste Kurse, Pakete, Bewertungen |
| Kursplan | /kurse | Vollständiger Kursplan mit Filtern |
| Team | /team | Trainer-Übersicht |
| Preise | /preise | Guthaben-Pakete |
Jede Integration hat ihren eigenen Embed-Code und kann separat gestaltet werden.
Dynamische Terminologie
Die Widgets verwenden automatisch die Bezeichnungen, die du in deinem Studio eingestellt hast. Wenn du statt "Trainer" lieber "Coach" sagst und statt "Kurse" lieber "Workshops" - dann steht das auch im Widget so.
Diese Einstellung findest du unter Einstellungen → Allgemein → Terminologie.