Widgets insluiten
Om een integratie op je website te laten verschijnen, plak je de code ervan in je website. Deze pagina laat zien waar je de code vindt, hoe die is opgebouwd en wat je doet als de widget niet laadt. Hoe je een integratie bouwt, staat in Integratie aanmaken en bewerken.
Code van een integratie kopiëren
- Open Manager → Website-integratie.
- Tik op de kaart van de integratie en kies Code kopiëren. Op je telefoon vind je Code kopiëren ook in de integratie zelf, onder de lijst met blokken.
- In het venster Embed-code tik je op Kopiëren. Er verschijnt “Embed-code naar klembord gekopieerd”.
In hetzelfde venster staan de Taal van de widget (de taal van je boekingspagina), de Primaire kleur en waar een klik op een aanbod naartoe leidt (standaard: Infovenster).
Zo is de code opgebouwd
De code ziet er zo uit, met de ID van je studio en je integratie:
<!-- Bookicorn Widget -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="jouw-studio" integration="jouw-integratie"></bookicorn-widget>
<a class="bookicorn-credit" href="https://www.bookicorn.net" target="_blank" rel="noopener">Powered by Bookicorn</a>
- Het
<script>laadt de widget. Het wacht niet op de rest van je pagina. <bookicorn-widget>is de plek waar de widget verschijnt.- De link “Powered by Bookicorn” hoort bij de code. Verwijder je die, dan zet de widget hem zelf weer terug.
De widget verschijnt direct in je pagina, niet in een eigen frame. Jouw stijlen en die van de widget beïnvloeden elkaar niet.
Code plakken in WordPress, Wix, Squarespace, Jimdo of Webflow
Plak de volledige code op de plek van je website waar de widget moet verschijnen. Je websitebouwer heeft daarvoor een element nodig dat eigen HTML-code met JavaScript accepteert. Afhankelijk van de websitebouwer heet dat “HTML”, “Code”, “Embed” of “Insluiten”:
- WordPress: een blok voor eigen HTML, in de blokeditor “Aangepaste HTML”.
- Wix: een element om eigen code in te sluiten.
- Squarespace: een codeblok.
- Jimdo: een element voor widgets of HTML.
- Webflow: een embed-element.
- Eigen website: de code direct in de HTML van de pagina.
Toont je websitebouwer de code in een vak met een vaste hoogte, stel de hoogte dan zo in dat de widget helemaal zichtbaar is. Kan je websitebouwer geen eigen code insluiten, link dan gewoon naar je boekingspagina.
Meerdere widgets op één pagina insluiten
Je kunt meerdere integraties op dezelfde pagina insluiten. Plak daarvoor voor elke integratie het <bookicorn-widget>-element ervan. Het <script> is één keer per pagina genoeg.
Wat bezoekers in de ingesloten widget kunnen doen
- Aanbod, afspraken, pakketten en trainers bekijken, alles live uit Bookicorn.
- Op een aanbod klikken: er opent een infovenster met Overzicht en Details & Trainer.
- Nu boeken, pakketten kopen, cadeaubonnen en inloggen: opent je boekingspagina in een nieuw tabblad. Bij het boeken is de gekozen afspraak al geselecteerd.
Het eigenlijke boeken en betalen gebeurt dus op je boekingspagina, niet in je website.
Toegestane domeinen: de widget alleen op je website laten werken
Onder Afmetingen → Toegestane domeinen in de integratie vul je de adressen in waarop je widget mag werken, bijvoorbeeld www.mijn-studio.nl, en tik je op Toevoegen. Daarna Opslaan. Dan werkt de widget alleen op deze domeinen en hun subadressen. Op andere websites toont die “Domain nicht autorisiert”.
Vul je geen domein in, dan controleert Bookicorn het adres niet, en werkt de widget op elke website. De melding in de Manager (“Zonder invoer werkt de widget nergens.”) klopt op dit moment niet.
Verwijder je een domein, dan stopt de widget daar met werken. De Manager vraagt daarom eerst om bevestiging.
Afmetingen vind je in de integratie onder de lijst met blokken. Deze lijst toont de Manager op je telefoon en in smalle browservensters.
Privacyvermelding voor je website
Onder de code staat in het venster Embed-code een Privacy-tekstblok. Dat beschrijft dat je pagina de widget van Bookicorn insluit, welke gegevens daarbij worden verwerkt en dat het boeken op het boekingsplatform plaatsvindt. Tik op Tekstblok kopiëren en plak het in je privacyverklaring.
Widget laadt niet of toont een foutmelding
De widget toont in plaats van de inhoud een melding:
| Melding | Oorzaak | Oplossing |
|---|---|---|
| Widget niet gevonden | ID in de code klopt niet, of de integratie is gedeactiveerd of verwijderd | Code opnieuw kopiëren, integratie met Nu activeren aanzetten |
| Widget niet beschikbaar | de addon Website-integratie is niet actief | Addon activeren in de Addon Store |
| Domain nicht autorisiert | je website staat niet onder Toegestane domeinen | Domein invullen en Opslaan |
| Widget “…” is binnenkort beschikbaar | blok is in de ingesloten widget nog niet uitgewerkt (Abonnementen, Ledenstart, Profiel, Portemonnee) | Blok uit de integratie verwijderen |
Verschijnt er helemaal niets, controleer dan:
- Is de volledige code geplakt, ook het
<script>? - Staat je websitebouwer JavaScript toe in dit element?
- Heb je de integratie na de laatste wijziging opgeslagen?
Veelgestelde vragen
Waar vind ik de code voor mijn website? Onder Website-integratie: kaart van de integratie aantikken, Code kopiëren.
Moet ik de code na elke wijziging opnieuw plakken? Nee. Na het Opslaan toont de widget de nieuwe stand.
Mag ik “Powered by Bookicorn” verwijderen? De link hoort bij de code. Verwijder je die, dan zet de widget hem weer terug.
Mijn widget toont “Domain nicht autorisiert”. Vul je website in onder Afmetingen → Toegestane domeinen of verwijder daar alle invoer, en tik op Opslaan.
Kan ik de code in Wix plakken? Ja, via een element om eigen code in te sluiten. Stel de hoogte van het element groot genoeg in.