Website Integration

Kategorie: Marketing | Code: website_integration

Mit der Website Integration kannst du Bookicorn-Widgets direkt in deine eigene Website einbetten. Kunden können Kurse buchen, Credits kaufen und Gutscheine einlösen – ohne deine Website zu verlassen. Die Widgets passen sich automatisch an deine Studio-Farben und dein Logo an.

Was du bekommst

• Widget Builder mit Drag & Drop Konfiguration
• 5 Widget-Typen: Kursplan, Buchungsformular, Credit-Pakete, Gutschein-Einlösung, Studio-Info
• Auto-Branding: Widgets übernehmen automatisch deine Studio-Farben und dein Logo
• Einbettung per iframe oder Script-Tag – funktioniert auf jeder Website
• Responsives Design – sieht auf Desktop und Mobilgeräten gut aus
• Kein Programmiercode nötig – copy & paste genügt

Aktivierung

Widget Builder

Der Widget Builder ist das zentrale Werkzeug für deine Website-Integration. Du konfigurierst hier, welche Widgets du einbetten möchtest und wie sie aussehen sollen.

So funktioniert es

Vorschau in Echtzeit

Im Widget Builder siehst du rechts eine Live-Vorschau des Widgets – so wie es auf deiner Website aussehen wird. Änderungen werden sofort angezeigt.

Verfügbare Widgets

1. Kursplan-Widget

Zeigt deinen aktuellen Kursplan auf deiner Website an. Kunden sehen alle Kurse mit Datum, Uhrzeit, Trainer und freien Plätzen.

Konfigurationsoptionen:

• Darstellung: Wochenansicht oder Listenansicht
• Filter: Kurstypen, Standorte, Trainer
• Zeitraum: Aktuelle Woche, nächste 2 Wochen, nächster Monat
• "Jetzt buchen"-Button direkt im Widget

<!-- Kursplan Widget -->
<div id="bookicorn-schedule"></div>
<script src="https://widget.bookicorn.net/schedule.js"
  data-studio="dein-studio-id"
  data-lang="de">
</script>

2. Buchungsformular-Widget

Ein vollständiges Buchungsformular für einen bestimmten Kurs oder Kurstyp. Kunden wählen den Termin, loggen sich ein und buchen – alles ohne deine Website zu verlassen.

Konfigurationsoptionen:

• Vorfilterung auf bestimmten Kurstyp
• Vorfilterung auf bestimmten Standort
• Darstellung: Vollbild oder kompakt

Tipp: Nutze das Buchungsformular-Widget auf Landing Pages für einzelne Kurse. Eine dedizierte Seite pro Kurstyp mit direktem Buchungsformular konvertiert deutlich besser als eine allgemeine Kursübersicht.

3. Credit-Pakete-Widget

Zeigt deine Credit-Pakete zur direkten Buchung. Kunden können Pakete auswählen und kaufen, ohne die Bookicorn-App öffnen zu müssen.

Konfigurationsoptionen:

• Welche Pakete anzeigen (alle oder nur ausgewählte)
• Darstellung: Grid oder Liste
• Hervorhebung eines Pakets (z. B. "Beliebteste Wahl")

4. Gutschein-Einlösung-Widget

Ein einfaches Formular, in das Kunden ihren Gutschein-Code eingeben können. Nach Eingabe werden die verfügbaren Angebote mit Rabatt angezeigt.

Hinweis: Das Gutschein-Einlösung-Widget erfordert das Gutschein-System Addon.

5. Studio-Info-Widget

Zeigt Basis-Informationen deines Studios: Adresse, Öffnungszeiten, Kontaktdaten und einen "Jetzt buchen"-Button. Praktisch für die Sidebar oder den Footer deiner Website.

Auto-Branding

Alle Widgets übernehmen automatisch dein Studio-Branding:

• Primärfarbe: Aus deinen Studio-Einstellungen (für Buttons, Links, Highlights)
• Logo: Dein Studio-Logo erscheint im Widget-Header
• Schriftart: Systemschriften, die zu den meisten Websites passen
• Rundungen und Abstände: Optimiert für ein modernes, sauberes Aussehen

Du kannst das Branding jederzeit in deinen Studio-Einstellungen anpassen – alle Widgets aktualisieren sich automatisch.

Hinweis: Das Bookicorn-Logo erscheint nicht in den Widgets. Für vollständig markenloses Auftreten ohne Bookicorn-Referenz gibt es das Mobile App Addon (White Label).

Einbettung auf deiner Website

Option 1: iframe (einfach)

Für die meisten Website-Baukästen (Wix, Squarespace, Jimdo etc.) ist iframe die einfachste Option:

<iframe
  src="https://widget.bookicorn.net/[studio-id]/schedule"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 12px;">
</iframe>

Option 2: Script-Tag (empfohlen)

Für WordPress, Webflow oder eigene HTML-Seiten ist das Script-Tag die bessere Variante – das Widget passt sich automatisch in der Höhe an:

<!-- Widget Container -->
<div id="bookicorn-widget"></div>

<!-- Widget Script -->
<script
  src="https://widget.bookicorn.net/loader.js"
  data-studio="[dein-studio-id]"
  data-widget="schedule"
  data-lang="de"
  async>
</script>

Plattform-Anleitungen

Responsives Design

Alle Widgets sind mobiloptimiert und passen sich automatisch an die Bildschirmbreite an:

• Desktop (>768px): Volle Ansicht mit allen Spalten
• Tablet (480–768px): Angepasstes Layout, kompaktere Darstellung
• Mobile (<480px): Ein-Spalten-Layout, vertikal gestapelt

Du musst nichts konfigurieren – das passiert automatisch.

Mehrere Widgets kombinieren

Du kannst auf deiner Website mehrere verschiedene Widgets gleichzeitig einbetten. Empfohlene Kombination für eine optimale Buchungs-Seite:

Tipps für bessere Conversion

Prominente Platzierung

• Widget nicht verstecken – platziere den Kursplan auf der Startseite "above the fold" (ohne scrollen sichtbar)
• Dedizierte Buchungsseite in der Navigation verlinken
• Call-to-Action-Buttons auf anderen Seiten auf die Buchungsseite verweisen

Klare Call-to-Actions

• Nutze handlungsorientierte Überschriften: "Jetzt Kurs buchen", "Platz sichern"
• Platziere kurze Einleitungstexte über dem Widget: Warum sollte jemand jetzt buchen?

Ladezeit beachten

• Script-Tag lädt asynchron und beeinflusst die Ladezeit deiner Website kaum
• iframe ist etwas langsamer – für sehr performanceorientierte Websites das Script-Tag bevorzugen

A/B-Testing

Teste verschiedene Platzierungen und Widget-Konfigurationen:

• Kursplan-Widget oben vs. Credit-Pakete oben
• Wochenansicht vs. Listenansicht
• Mit oder ohne Trainer-Filter

Häufige Fragen

Funktionieren die Widgets auf allen Browsern? Ja. Die Widgets unterstützen alle modernen Browser (Chrome, Firefox, Safari, Edge) und Internet Explorer 11+.

Müssen Kunden einen Bookicorn-Account haben, um zu buchen? Ja. Beim Checkout werden Kunden aufgefordert, sich einzuloggen oder zu registrieren. Die Registrierung ist kostenlos und dauert unter einer Minute.

Werden die Widgets automatisch aktualisiert, wenn ich den Kursplan ändere? Ja. Widgets zeigen immer Echtzeit-Daten – Kursplan-Änderungen im Admin sind sofort im Widget sichtbar.

Kann ich das Widget auf mehreren Seiten gleichzeitig einbetten? Ja, ohne Einschränkungen. Du kannst denselben Widget-Code auf beliebig vielen Seiten verwenden.

Was passiert, wenn mein Studio-Name oder Logo sich ändert? Alle Widgets aktualisieren sich automatisch – du musst den Einbettungs-Code nicht neu generieren.