Website-Integration

Mit Widgets integrierst du Bookicorn-Funktionen direkt auf deiner Website.

Übersicht

Was sind Widgets?

Widgets sind einbettbare Elemente, die du auf deiner eigenen Website platzieren kannst:

• Kursplan anzeigen
• Credit-Pakete verkaufen
• Trainer vorstellen
• Buchungen ermöglichen

Vorteile

Verfügbare Widgets

Kern-Widgets

Erweiterte Widgets

Utility Widgets

Layout Widgets

Wie funktioniert es?

Technisch

1. Du erstellst eine Integration im Widget Builder
2. Du bekommst einen Embed-Code (Script + Div)
3. Du fügst den Code auf deiner Website ein
4. Das Widget lädt Daten via API aus Bookicorn
5. Buchungen werden direkt in Bookicorn gespeichert

Datenfluss

Deine Website
     ↓
Widget (Iframe)
     ↓
Bookicorn API
     ↓
Buchung im System

Voraussetzungen

Add-on erforderlich

Die Widget-Funktion erfordert das Website Integration Add-on.

Preis: 29€/Monat

Aktivieren:

1. Gehe zu Add-on Store
2. Wähle "Website Integration"
3. Aktivieren

Technisch

Deine Website muss:

• JavaScript erlauben
• Iframes unterstützen
• HTTPS verwenden (empfohlen)

Schnellstart

1. Integration erstellen

1. Gehe zu Marketing → Integrationen
2. Klicke "Neue Integration"
3. Gib einen Namen ein (z.B. "Homepage")
4. Klicke "Erstellen"

2. Widgets hinzufügen

1. Im Widget Builder
2. Ziehe Widgets aus der Sidebar auf den Canvas
3. Ordne sie per Drag & Drop an
4. Konfiguriere jedes Widget rechts

3. Einbetten

1. Klicke "Embed-Code"
2. Kopiere den Code
3. Füge ihn auf deiner Website ein

<script type="module"
  src="https://app.bookicorn.net/widget/loader.js"
  async defer>
</script>

<div
  data-bookicorn-integration="deine-integration"
  data-studio="dein-studio">
</div>

Mehrere Integrationen

Warum mehrere?

Du kannst verschiedene Integrationen für verschiedene Seiten erstellen:

Verwalten

Unter Marketing → Integrationen siehst du alle Integrationen:

• Name und Slug
• Anzahl Widgets
• Status (Aktiv/Inaktiv)
• Embed-Code kopieren

Styling

Automatisches Branding

Widgets übernehmen automatisch:

• Primärfarbe aus deinen Einstellungen
• Logo (optional)
• Studio-Name

Manuelle Anpassungen

Im Widget Builder konfigurierbar:

• Container-Breite
• Max-Breite
• Padding
• Hintergrundfarbe
• Border-Radius
• Gap zwischen Widgets

Status

Integration aktivieren/deaktivieren

• Aktiv: Widget lädt und funktioniert
• Inaktiv: Widget zeigt Platzhalter

Warum deaktivieren?

• Wartungsarbeiten
• Saisonale Pause
• Test-Integration

Weitere Seiten

• Widget Builder →
• Einbetten →
• Anpassen →