Intégrer

Ce guide te montre étape par étape comment intégrer les widgets Bookicorn sur ton site.

Code d'intégration

Obtenir le code

  1. Dans l'espace admin, aller dans Marketing → Intégrations
  2. Sélectionner ton intégration (ou en créer une nouvelle)
  3. Le code d'intégration t'est directement affiché
  4. Cliquer sur "Copier le code"

Structure du code

Le code d'intégration se compose de deux parties :

<!-- 1. Loader Bookicorn (une fois par page) -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

<!-- 2. Élément widget (là où il doit apparaître) -->
<bookicorn-widget studio="ton-studio" integration="ton-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>
PartieDescription
<script>Charge le loader du widget. Ne doit être inséré qu'une seule fois par page.
<bookicorn-widget>Le widget proprement dit. Apparaît exactement là où tu le places.
studio="..."Le slug de ton studio (dans les paramètres)
integration="..."Le slug de ton intégration (attribué à la création)
<a> (Backlink)Lien "Powered by Bookicorn" - merci de ne pas le supprimer

Guide étape par étape

1. Copier le code

Copie le code d'intégration complet depuis l'espace admin.

2. Insérer le script

Insère la balise <script> sur ton site. L'idéal est un emplacement chargé sur toutes les pages concernées - par exemple dans le footer ou le header de ton site.

3. Placer le widget

Insère l'élément <bookicorn-widget> exactement là où le widget doit apparaître.

4. C'est prêt

Le widget se charge automatiquement et affiche tes données en direct depuis Bookicorn.

Exemple : page HTML simple

<!DOCTYPE html>
<html>
<head>
  <title>Mon studio de yoga</title>
</head>
<body>
  <h1>Bienvenue dans notre studio</h1>
  <p>Voici notre planning de cours actuel :</p>

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

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

Guides par plateforme

WordPress

Option 1 : Bloc HTML personnalisé (recommandé)

  1. Modifier la page souhaitée
  2. Ajouter un bloc "HTML personnalisé"
  3. Insérer le code d'intégration complet
  4. Publier la page

Option 2 : Script global dans le footer

Si tu as besoin du widget sur plusieurs pages, tu peux charger le script une seule fois globalement. Ajoute dans ton functions.php :

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

Ensuite, tu n'as plus qu'à insérer l'élément <bookicorn-widget> sur les pages.

Wix

  1. Ouvrir l'éditeur de page
  2. Cliquer sur Ajouter (+) → Intégrations → Intégrer du HTML
  3. Cliquer sur "Saisir le code"
  4. Insérer le code d'intégration complet
  5. Ajuster la taille du conteneur
  6. Publier

Squarespace

  1. Modifier la page
  2. Ajouter un bloc de code
  3. Insérer le code d'intégration
  4. Enregistrer et publier

Webflow

  1. Faire glisser un élément Embed à l'emplacement souhaité
  2. Insérer le code d'intégration
  3. Optionnel : insérer le script globalement sous Paramètres du site → Code personnalisé → Footer
  4. Publier

Jimdo

  1. Ajouter un élément Widget/HTML
  2. Insérer le code d'intégration
  3. Enregistrer

Autres plateformes

Le code d'intégration fonctionne sur tout site qui autorise JavaScript. Cherche dans ton constructeur de site une option comme "Insérer du HTML", "Bloc de code" ou "Embed".

Plusieurs widgets sur une page

Tu peux intégrer plusieurs intégrations sur la même page. Le script ne doit être chargé qu'une seule fois :

<!-- Widget Planning -->
<bookicorn-widget studio="mon-studio" integration="planning"></bookicorn-widget>

<!-- Widget Forfaits -->
<bookicorn-widget studio="mon-studio" integration="forfaits"></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 à charger UNE SEULE FOIS ! -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

Comment ça fonctionne techniquement

  1. Le script loader est chargé de façon asynchrone et ne bloque pas ta page
  2. Il enregistre <bookicorn-widget> comme Custom Element
  3. Dès qu'un élément widget est détecté, il charge la configuration de ton intégration
  4. Puis le bundle du widget est chargé (mis en cache par le navigateur)
  5. Le widget se rend dans un Shadow DOM - complètement isolé de ton site
  6. Tes données sont chargées en direct depuis Bookicorn

Shadow DOM - Qu'est-ce que ça signifie ?

Le widget fonctionne dans ce qu'on appelle un Shadow DOM. Cela présente deux grands avantages :

  • Tes styles restent sécurisés : Le CSS de ton site ne peut pas influencer le widget
  • Pas de conflits : Le CSS du widget ne modifie rien sur ton site

Tu n'as rien à faire - ça fonctionne automatiquement.

Que se passe-t-il lors des clics ?

Les visiteurs peuvent consulter des cours dans le widget (ouvre une fenêtre de détail avec toutes les informations) et parcourir les profils de coachs. Les actions comme Réserver ou Acheter des forfaits redirigent le visiteur vers la plateforme Bookicorn, où la transaction est traitée en toute sécurité. Le lien s'ouvre dans un nouvel onglet - ton site reste ouvert en arrière-plan.

Performance

  • Le script se charge de façon asynchrone (async defer) et ne bloque pas ta page
  • Le bundle du widget est mis en cache par le navigateur après le premier chargement
  • Les données ne sont chargées que lorsque le widget devient visible

Résolution des problèmes

Le widget ne se charge pas

Vérifie les points suivants :

  1. La balise <script> est-elle présente sur la page ?
  2. L'élément <bookicorn-widget> est-il correctement inséré ?
  3. Les slugs studio et integration sont-ils corrects ?
  4. L'intégration est-elle active dans l'espace admin ?
  5. L'add-on "Intégration web" est-il activé ?

Le widget affiche une erreur

MessageSolution
Pas de donnéesVérifier si des cours/forfaits/coachs sont créés dans Bookicorn
Intégration introuvableVérifier le slug dans integration="..."
Studio introuvableVérifier le slug dans studio="..."

Le widget est tronqué

  • Vérifier que le conteneur sur ton site a suffisamment d'espace
  • Supprimer overflow: hidden de l'élément parent
  • Le widget adapte automatiquement sa hauteur au contenu

Vérifier la console du navigateur

Ouvre les outils de développement de ton navigateur (F12) et regarde les erreurs dans la console :

  • Erreur 404 : Le slug est mal orthographié
  • Erreur 403 : Add-on non actif ou intégration désactivée

Questions fréquentes

Dois-je insérer le script sur chaque page ?

Si tu intègres le script une seule fois globalement (par ex. dans le template du footer), c'est suffisant. Tu n'as ensuite qu'à placer l'élément <bookicorn-widget> sur les pages individuelles.

Puis-je afficher le widget dans un popup ou une fenêtre modale ?

Oui. Assure-toi que le script est déjà chargé avant que le popup s'ouvre. Le plus simple est que le script soit globalement dans le footer.

Fonctionne-t-il avec les outils de gestion du consentement aux cookies ?

Les widgets Bookicorn ne déposent aucun cookie de tracking ou de marketing. En principe, aucun consentement n'est nécessaire. Pour une conformité maximale, tu peux quand même charger le script après le consentement.

Puis-je contrôler la largeur du widget ?

Le widget prend la pleine largeur du conteneur dans lequel il est placé. Tu peux donc contrôler la largeur via le conteneur HTML environnant. Tu peux également définir une largeur maximale dans le Widget Builder.

Ai-je besoin de connaissances techniques ?

Non. Tu as simplement besoin d'accès au HTML de ton site. Sur la plupart des constructeurs de sites, cela passe par un "bloc HTML" ou une "intégration de code".

Prochaines étapes

ZurückConstructeur de widgetsWeiterPersonnaliser

Fragen oder Feedback?

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