Einbetten

Diese Anleitung zeigt, wie du Widgets auf deiner Website einbindest.

Embed-Code

Code erhalten

Gehe zu Marketing → Integrationen
Wähle deine Integration
Klicke "Embed-Code"
Code wird kopiert

Code-Struktur

<!-- Bookicorn Widget -->
<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>

Bestandteile

Teil	Beschreibung
`<script>`	Lädt den Widget-Loader (einmal pro Seite)
`<div>`	Platzhalter wo das Widget erscheint
`data-bookicorn-integration`	Slug deiner Integration
`data-studio`	Slug deines Studios

Einbau-Anleitung

Schritt für Schritt

Kopiere den Embed-Code
Öffne deine Website im Editor
Füge den Script-Tag ein (idealerweise vor </body>)
Füge den Div-Tag ein wo das Widget erscheinen soll
Speichere und veröffentliche

Beispiel: HTML-Seite

<!DOCTYPE html>
<html>
<head>
  <title>Meine Website</title>
</head>
<body>
  <h1>Willkommen</h1>

  <!-- Hier erscheint das Widget -->
  <div
    data-bookicorn-integration="homepage"
    data-studio="mein-studio">
  </div>

  <!-- Bookicorn Loader (vor </body>) -->
  <script type="module"
    src="https://app.bookicorn.net/widget/loader.js"
    async defer>
  </script>
</body>
</html>

Website-Plattformen

WordPress

Mit Plugin:

Installiere "Custom HTML" Block oder "Raw HTML" Plugin
Füge den Code ein

Ohne Plugin:

Bearbeite Seite im Text-Modus (nicht Visual)
Füge Code ein

Theme-Header: Für globales Script, füge in functions.php:

function add_bookicorn_script() {
  echo '<script type="module" src="https://app.bookicorn.net/widget/loader.js" async defer></script>';
}
add_action('wp_footer', 'add_bookicorn_script');

Wix

Öffne Seiten-Editor
Hinzufügen → Einbettungen → HTML einbetten
Füge den kompletten Code ein
Größe anpassen

Squarespace

Bearbeite die Seite
Code-Block hinzufügen
Füge Code ein
Speichern

Webflow

Embed Element hinzufügen
Code einfügen
Bei Bedarf: Custom Code in Site Settings für Script

Shopify

Theme → Actions → Edit code
In theme.liquid vor </body>: Script einfügen
Auf Seite: Section mit HTML-Code oder App verwenden

Mehrere Widgets

Mehrere Integrationen

Du kannst mehrere Widgets auf einer Seite haben:

<!-- Integration 1: Kursplan -->
<div
  data-bookicorn-integration="kursplan"
  data-studio="mein-studio">
</div>

<!-- Integration 2: Pakete -->
<div
  data-bookicorn-integration="pakete"
  data-studio="mein-studio">
</div>

<!-- Script nur EINMAL laden -->
<script type="module"
  src="https://app.bookicorn.net/widget/loader.js"
  async defer>
</script>

Wichtig: Das Script nur einmal einfügen!

Technische Details

Wie funktioniert's?

Loader-Script wird geladen
Script sucht alle data-bookicorn-integration Divs
Für jedes Div wird ein Iframe erstellt
Iframe lädt Widget von Bookicorn
postMessage kommuniziert zwischen Iframe und Seite
Widget passt Höhe automatisch an

Performance

Script ist async und defer - blockiert nicht
Widgets laden nach Seiteninhalt
Lazy Loading für Iframes
Caching für schnelles Nachladen

Sicherheit

HTTPS

Deine Website sollte HTTPS nutzen
Mixed Content (HTTP auf HTTPS) kann Probleme machen

Domain-Beschränkung

Optional kannst du Domains beschränken:

Nur deine Domain darf das Widget laden
Schutz vor unbefugtem Einbetten

Iframe-Sandbox

Widgets laufen in isolierten Iframes:

Kein Zugriff auf deine Seite
Sicherer Datenaustausch via postMessage

Fehlerbehebung

Widget lädt nicht

Prüfe:

Script-Tag vorhanden?
Div mit korrekten Attributen?
Integration-Slug korrekt?
Studio-Slug korrekt?
Integration aktiv?

Widget zeigt Fehler

Mögliche Ursachen:

Add-on nicht aktiv
Integration deaktiviert
Keine Daten (leere Kurse/Pakete)

Widget schneidet ab

Lösung:

Container-Breite in Widget-Einstellungen prüfen
Parent-Element braucht ausreichend Platz
Kein overflow: hidden auf Parent

Konsolen-Fehler

Öffne Browser-DevTools (F12) und prüfe Console:

CORS-Fehler: Domain-Beschränkung prüfen
404: Slug falsch
403: Add-on nicht aktiv

Dynamisches Laden

Single-Page-Apps (React, Vue, etc.)

Für SPAs, die Seiten nicht neu laden:

// Nach Navigation Widget neu initialisieren
window.dispatchEvent(new Event('bookicorn-init'));

MutationObserver

Der Loader nutzt MutationObserver - neue Divs werden automatisch erkannt.

Häufige Fragen

Muss ich das Script auf jeder Seite einfügen?

Nein, einmal im globalen Footer reicht. Es erkennt alle Widgets automatisch.

Kann ich das Widget in einem Modal/Popup zeigen?

Ja, aber stelle sicher dass das Script geladen ist bevor das Modal öffnet.

Funktioniert es mit Cookie-Consent?

Bookicorn-Widgets setzen keine Marketing-Cookies. Für volle Compliance, lade das Script erst nach Consent.

Kann ich die Größe festlegen?

Die Breite folgt dem Container. Die Höhe passt sich automatisch an.