Widgets einbetten
Damit eine Integration auf deiner Website erscheint, fügst du ihren Code in deine Website ein. Diese Seite zeigt, wo du den Code findest, wie er aufgebaut ist und was du tust, wenn das Widget nicht lädt. Wie du eine Integration baust, steht unter Integration anlegen und bearbeiten.
Code einer Integration kopieren
- Öffne Manager → Website Integration.
- Tippe auf die Karte der Integration und wähle Code kopieren. Am Handy findest du Code kopieren auch in der Integration selbst, unter der Liste der Bausteine.
- Im Fenster Embed-Code tippst du auf Kopieren. Es erscheint „Embed-Code in die Zwischenablage kopiert“.
Im selben Fenster stehen die Sprache des Widgets (die Sprache deiner Buchungsseite), die Primärfarbe und wohin ein Klick auf ein Angebot führt (Standard: Info-Fenster).
So ist der Code aufgebaut
Der Code sieht so aus, mit der Kennung deines Studios und deiner Integration:
<!-- Bookicorn Widget -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="dein-studio" integration="deine-integration"></bookicorn-widget>
<a class="bookicorn-credit" href="https://www.bookicorn.net" target="_blank" rel="noopener">Powered by Bookicorn</a>
- Das
<script>lädt das Widget. Es wartet nicht auf den Rest deiner Seite. <bookicorn-widget>ist die Stelle, an der das Widget erscheint.- Der Link „Powered by Bookicorn“ gehört zum Code. Entfernst du ihn, setzt das Widget ihn selbst wieder ein.
Das Widget erscheint direkt in deiner Seite, nicht in einem eigenen Rahmen. Deine Styles und die des Widgets beeinflussen sich nicht gegenseitig.
Code in WordPress, Wix, Squarespace, Jimdo oder Webflow einfügen
Füge den kompletten Code an der Stelle deiner Website ein, an der das Widget erscheinen soll. Dein Baukasten braucht dafür ein Element, das eigenen HTML-Code mit JavaScript annimmt. Je nach Baukasten heißt es „HTML“, „Code“, „Embed“ oder „Einbetten“:
- WordPress: ein Block für eigenes HTML, im Block-Editor „Individuelles HTML“.
- Wix: ein Element zum Einbetten von eigenem Code.
- Squarespace: ein Code-Block.
- Jimdo: ein Element für Widgets oder HTML.
- Webflow: ein Embed-Element.
- Eigene Website: den Code direkt in das HTML der Seite.
Zeigt dein Baukasten den Code in einem Kasten mit fester Höhe, stelle die Höhe so ein, dass das Widget ganz sichtbar ist. Kann dein Baukasten keinen eigenen Code einbinden, verlinke stattdessen einfach deine Buchungsseite.
Mehrere Widgets auf einer Seite einbetten
Du kannst mehrere Integrationen auf derselben Seite einbetten. Füge dazu für jede Integration ihr <bookicorn-widget>-Element ein. Das <script> reicht einmal pro Seite.
Was Besucher im eingebetteten Widget tun können
- Angebote, Termine, Pakete und Trainer ansehen, alles live aus Bookicorn.
- Ein Angebot anklicken: Es öffnet sich ein Info-Fenster mit Übersicht und Details & Trainer.
- Jetzt buchen, Pakete kaufen, Gutscheine und Anmelden: öffnet deine Buchungsseite in einem neuen Tab. Beim Buchen ist der gewählte Termin schon ausgewählt.
Die eigentliche Buchung und Zahlung passiert also auf deiner Buchungsseite, nicht in deiner Website.
Erlaubte Domains: das Widget nur auf deiner Website laufen lassen
Unter Maße → Erlaubte Domains in der Integration trägst du die Adressen ein, auf denen dein Widget laufen darf, zum Beispiel www.mein-studio.de, und tippst auf Hinzufügen. Danach Speichern. Dann läuft das Widget nur auf diesen Domains und ihren Unteradressen. Auf anderen Websites zeigt es „Domain nicht autorisiert“.
Trägst du keine Domain ein, prüft Bookicorn die Adresse nicht, und das Widget läuft auf jeder Website. Der Hinweis im Manager („Ohne Eintrag läuft das Widget nirgends.“) trifft derzeit nicht zu.
Entfernst du eine Domain, hört das Widget dort auf zu laufen. Der Manager fragt deshalb vorher nach.
Maße findest du in der Integration unter der Liste der Bausteine. Diese Liste zeigt der Manager am Handy und in schmalen Browserfenstern.
Datenschutz-Hinweis für deine Website
Unter dem Code steht im Fenster Embed-Code ein Datenschutz-Textbaustein. Er beschreibt, dass deine Seite das Widget von Bookicorn einbindet, welche Daten dabei verarbeitet werden und dass die Buchung auf der Buchungsplattform stattfindet. Tippe auf Textbaustein kopieren und füge ihn in deine Datenschutzerklärung ein.
Widget lädt nicht oder zeigt eine Fehlermeldung
Das Widget zeigt statt der Inhalte eine Meldung:
| Meldung | Ursache | Lösung |
|---|---|---|
| Widget nicht gefunden | Kennung im Code stimmt nicht, oder die Integration ist deaktiviert oder gelöscht | Code neu kopieren, Integration mit Jetzt aktivieren einschalten |
| Widget nicht verfügbar | das Addon Website Integration ist nicht aktiv | Addon im Addon Store aktivieren |
| Domain nicht autorisiert | deine Website steht nicht unter Erlaubte Domains | Domain eintragen und Speichern |
| Widget „…“ wird bald verfügbar sein | Baustein ist im eingebetteten Widget noch nicht umgesetzt (Abos, Mitglieder-Start, Profil, Geldbörse) | Baustein aus der Integration entfernen |
Erscheint gar nichts, prüfe:
- Ist der komplette Code eingefügt, auch das
<script>? - Erlaubt dein Baukasten JavaScript in diesem Element?
- Hast du die Integration nach der letzten Änderung gespeichert?
Häufige Fragen
Wo finde ich den Code für meine Website? Unter Website Integration: Karte der Integration antippen, Code kopieren.
Muss ich den Code nach jeder Änderung neu einfügen? Nein. Nach dem Speichern zeigt das Widget den neuen Stand.
Darf ich „Powered by Bookicorn“ entfernen? Der Link gehört zum Code. Entfernst du ihn, setzt das Widget ihn wieder ein.
Mein Widget zeigt „Domain nicht autorisiert“. Trage deine Website unter Maße → Erlaubte Domains ein oder entferne dort alle Einträge, und tippe auf Speichern.
Kann ich den Code in Wix einfügen? Ja, über ein Element zum Einbetten von eigenem Code. Stelle die Höhe des Elements groß genug ein.