Einbetten

Diese Anleitung zeigt dir Schritt für Schritt, wie du Bookicorn-Widgets auf deiner Website einbindest.

Embed-Code

Code erhalten

  1. Gehe im Admin-Bereich zu Marketing → Integrationen
  2. Wähle deine Integration (oder erstelle eine neue)
  3. Der Embed-Code wird dir direkt angezeigt
  4. Klicke auf "Code kopieren"

Code-Aufbau

Der Embed-Code besteht aus zwei Teilen:

<!-- 1. Bookicorn Loader (einmal pro Seite) -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

<!-- 2. Widget-Element (dort wo es erscheinen soll) -->
<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>
TeilBeschreibung
<script>Lädt den Widget-Loader. Muss nur einmal pro Seite eingefügt werden.
<bookicorn-widget>Das eigentliche Widget. Erscheint genau dort, wo du es platzierst.
studio="..."Der Slug deines Studios (findest du in den Einstellungen)
integration="..."Der Slug deiner Integration (wird beim Erstellen vergeben)
<a> (Backlink)"Powered by Bookicorn" Link - bitte nicht entfernen

Schritt-für-Schritt-Anleitung

1. Code kopieren

Kopiere den vollständigen Embed-Code aus dem Admin-Bereich.

2. Script einfügen

Füge das <script>-Tag auf deiner Website ein. Ideal ist eine Stelle, die auf allen relevanten Seiten geladen wird - z.B. im Footer oder Header deiner Website.

3. Widget platzieren

Füge das <bookicorn-widget>-Element genau dort ein, wo das Widget erscheinen soll.

4. Fertig

Das Widget lädt automatisch und zeigt deine Daten live aus Bookicorn an.

Beispiel: Einfache HTML-Seite

<!DOCTYPE html>
<html>
<head>
  <title>Mein Yoga-Studio</title>
</head>
<body>
  <h1>Willkommen in unserem Studio</h1>
  <p>Hier findest du unseren aktuellen Kursplan:</p>

  <!-- Bookicorn Widget -->
  <bookicorn-widget studio="mein-yoga-studio" integration="kursplan"></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>

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

Plattform-Anleitungen

WordPress

Option 1: Individueller HTML-Block (empfohlen)

  1. Bearbeite die gewünschte Seite
  2. Füge einen "Individuelles HTML"-Block hinzu
  3. Füge den kompletten Embed-Code ein
  4. Veröffentliche die Seite

Option 2: Script global im Footer

Wenn du das Widget auf mehreren Seiten brauchst, kannst du das Script einmal global laden. Füge in deiner functions.php hinzu:

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

Danach brauchst du auf den Seiten nur noch das <bookicorn-widget>-Element einzufügen.

Wix

  1. Öffne den Seiten-Editor
  2. Klicke auf Hinzufügen (+) → Einbettungen → HTML einbetten
  3. Klicke auf "Code eingeben"
  4. Füge den kompletten Embed-Code ein
  5. Passe die Größe des Containers an
  6. Veröffentliche

Squarespace

  1. Bearbeite die Seite
  2. Füge einen Code-Block hinzu
  3. Füge den Embed-Code ein
  4. Speichere und veröffentliche

Webflow

  1. Ziehe ein Embed-Element an die gewünschte Stelle
  2. Füge den Embed-Code ein
  3. Optional: Script global unter Site Settings → Custom Code → Footer einfügen
  4. Veröffentliche

Jimdo

  1. Füge ein Widget/HTML-Element hinzu
  2. Füge den Embed-Code ein
  3. Speichere

Andere Plattformen

Der Embed-Code funktioniert auf jeder Website, die JavaScript erlaubt. Suche in deinem Website-Baukasten nach einer Option wie "HTML einfügen", "Code-Block" oder "Embed".

Mehrere Widgets auf einer Seite

Du kannst mehrere Integrationen auf derselben Seite einbinden. Das Script muss dabei nur einmal geladen werden:

<!-- Kursplan-Widget -->
<bookicorn-widget studio="mein-studio" integration="kursplan"></bookicorn-widget>

<!-- Pakete-Widget -->
<bookicorn-widget studio="mein-studio" integration="pakete"></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>

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

Wie es technisch funktioniert

  1. Das Loader-Script wird asynchron geladen und blockiert deine Seite nicht
  2. Es registriert <bookicorn-widget> als Custom Element
  3. Sobald ein Widget-Element erkannt wird, lädt es die Konfiguration deiner Integration
  4. Dann wird das Widget-Bundle nachgeladen (wird vom Browser gecacht)
  5. Das Widget rendert in einem Shadow DOM - vollständig isoliert von deiner Website
  6. Deine Daten werden live von Bookicorn geladen

Shadow DOM - Was bedeutet das?

Das Widget läuft in einem sogenannten Shadow DOM. Das hat zwei große Vorteile:

  • Deine Styles bleiben sicher: Das CSS deiner Website kann das Widget nicht beeinflussen
  • Keine Konflikte: Das Widget-CSS verändert nichts an deiner Website

Du musst dich um nichts kümmern - es funktioniert automatisch.

Was passiert bei Klicks?

Besucher können im Widget Kurse ansehen (öffnet ein Detail-Modal mit allen Infos) und Trainer-Profile durchstöbern. Aktionen wie Buchen oder Pakete kaufen leiten den Besucher zur Bookicorn-Plattform weiter, wo die Transaktion sicher abgewickelt wird. Der Link öffnet sich in einem neuen Tab - deine Website bleibt im Hintergrund geöffnet.

Performance

  • Das Script lädt asynchron (async defer) und blockiert deine Seite nicht
  • Das Widget-Bundle wird nach dem ersten Laden vom Browser gecacht
  • Daten werden erst geladen, wenn das Widget sichtbar wird

Fehlerbehebung

Widget lädt nicht

Prüfe folgende Punkte:

  1. Ist das <script>-Tag auf der Seite vorhanden?
  2. Ist das <bookicorn-widget>-Element korrekt eingefügt?
  3. Stimmen studio und integration Slugs?
  4. Ist die Integration im Admin-Bereich aktiv?
  5. Ist das Add-on "Website Integration" aktiviert?

Widget zeigt einen Fehler

MeldungLösung
Keine DatenPrüfe ob Kurse/Pakete/Trainer in Bookicorn angelegt sind
Integration nicht gefundenSlug in integration="..." prüfen
Studio nicht gefundenSlug in studio="..." prüfen

Widget wird abgeschnitten

  • Prüfe ob der Container auf deiner Website genug Platz hat
  • Entferne overflow: hidden vom übergeordneten Element
  • Das Widget passt seine Höhe automatisch an den Inhalt an

Browser-Konsole prüfen

Öffne die Entwicklertools deines Browsers (F12) und schaue in der Konsole nach Fehlern:

  • 404-Fehler: Slug ist falsch geschrieben
  • 403-Fehler: Add-on nicht aktiv oder Integration deaktiviert

Häufige Fragen

Muss ich das Script auf jeder Seite einfügen?

Wenn du das Script einmal global einbindest (z.B. im Footer-Template), reicht das. Du musst dann auf den einzelnen Seiten nur noch das <bookicorn-widget>-Element platzieren.

Kann ich das Widget in einem Popup oder Modal zeigen?

Ja. Stelle sicher, dass das Script bereits geladen ist, bevor das Popup geöffnet wird. Am einfachsten geht das, wenn das Script global im Footer liegt.

Funktioniert es mit Cookie-Consent-Tools?

Bookicorn-Widgets setzen keine Tracking- oder Marketing-Cookies. Streng genommen ist kein Consent nötig. Für maximale Compliance kannst du das Script trotzdem erst nach Consent laden.

Kann ich die Breite des Widgets steuern?

Das Widget nimmt die volle Breite des Containers ein, in dem es platziert wird. Du kannst die Breite also über den umgebenden HTML-Container steuern. Zusätzlich kannst du im Widget Builder eine maximale Breite einstellen.

Brauche ich technische Kenntnisse?

Nein. Du brauchst lediglich Zugang zum HTML deiner Website. Bei den meisten Website-Baukästen geht das über einen "HTML-Block" oder "Code-Einbettung".

Nächste Schritte

ZurückWidget-BuilderWeiterAnpassen

Fragen oder Feedback?

Wir helfen dir gerne weiter. Kontaktiere unser Support-Team.