Intégrer des widgets
Pour qu'une intégration apparaisse sur ton site web, tu insères son code dans ton site. Cette page montre où trouver le code, comment il est construit et que faire si le widget ne se charge pas. Pour construire une intégration, voir Créer et modifier une intégration.
Copier le code d'une intégration
- Ouvre Manager → Intégration web.
- Touche la carte de l'intégration et choisis Copier le code. Sur le téléphone, tu trouves aussi Copier le code dans l'intégration elle-même, sous la liste des blocs.
- Dans la fenêtre Code d'intégration, touche Copier. Le message « Code embed copié dans le presse-papiers » apparaît.
La même fenêtre indique la Langue du widget (la langue de ta page de réservation), la Couleur principale et ce que fait Un clic sur une offre ouvre (par défaut : Fenêtre d'infos (standard)).
Comment le code est construit
Le code ressemble à ceci, avec l'identifiant de ton studio et de ton intégration :
<!-- Bookicorn Widget -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="ton-studio" integration="ton-integration"></bookicorn-widget>
<a class="bookicorn-credit" href="https://www.bookicorn.net" target="_blank" rel="noopener">Powered by Bookicorn</a>
- Le
<script>charge le widget. Il n'attend pas le reste de ta page. <bookicorn-widget>est l'endroit où le widget apparaît.- Le lien « Powered by Bookicorn » fait partie du code. Si tu le supprimes, le widget le remet de lui-même.
Le widget apparaît directement dans ta page, pas dans un cadre à part. Tes styles et ceux du widget ne s'influencent pas mutuellement.
Insérer le code dans WordPress, Wix, Squarespace, Jimdo ou Webflow
Insère le code complet à l'endroit de ton site où le widget doit apparaître. Ton outil de création de site a besoin pour cela d'un élément qui accepte du code HTML personnalisé avec JavaScript. Selon l'outil, il s'appelle « HTML », « Code », « Embed » ou « Intégrer » :
- WordPress : un bloc pour du HTML personnalisé, dans l'éditeur de blocs « HTML personnalisé ».
- Wix : un élément pour intégrer du code personnalisé.
- Squarespace : un bloc de code.
- Jimdo : un élément pour les widgets ou le HTML.
- Webflow : un élément Embed.
- Site web personnel : le code directement dans le HTML de la page.
Si ton outil affiche le code dans un cadre de hauteur fixe, règle la hauteur pour que le widget soit entièrement visible. Si ton outil ne peut pas intégrer de code personnalisé, mets simplement un lien vers ta page de réservation.
Intégrer plusieurs widgets sur une même page
Tu peux intégrer plusieurs intégrations sur la même page. Pour cela, insère l'élément <bookicorn-widget> de chaque intégration. Le <script> suffit une fois par page.
Ce que les visiteurs peuvent faire dans le widget intégré
- Voir les offres, les séances, les forfaits et les instructeurs, le tout en direct depuis Bookicorn.
- Cliquer sur une offre : une fenêtre d'infos s'ouvre avec Aperçu et Détails & Instructeur.
- Réserver maintenant, acheter des forfaits, les bons et la connexion : ouvre ta page de réservation dans un nouvel onglet. Lors de la réservation, la séance choisie est déjà sélectionnée.
La réservation et le paiement proprement dits se font donc sur ta page de réservation, pas sur ton site web.
Domaines autorisés : limiter le widget à ton site web
Sous Dimensions → Domaines autorisés dans l'intégration, tu indiques les adresses sur lesquelles ton widget peut fonctionner, par exemple www.mon-studio.fr, puis tu touches Ajouter. Ensuite Enregistrer. Le widget ne fonctionne alors que sur ces domaines et leurs sous-adresses. Sur d'autres sites, il affiche « Domain nicht autorisiert ».
Si tu n'indiques aucun domaine, Bookicorn ne vérifie pas l'adresse, et le widget fonctionne sur n'importe quel site. La remarque du Manager (« Sans entrée, le widget ne fonctionne nulle part. ») est actuellement inexacte.
Si tu retires un domaine, le widget cesse d'y fonctionner. Le Manager demande donc une confirmation avant.
Tu trouves Dimensions dans l'intégration, sous la liste des blocs. Le Manager affiche cette liste sur le téléphone et dans les fenêtres de navigateur étroites.
Clause de confidentialité pour ton site web
Sous le code, la fenêtre Code d'intégration contient une Clause pour la politique de confidentialité. Elle indique que ta page intègre le widget de Bookicorn, quelles données sont alors traitées et que la réservation a lieu sur la plateforme de réservation. Touche Copier la clause et colle-la dans ta politique de confidentialité.
Le widget ne se charge pas ou affiche un message d'erreur
Au lieu du contenu, le widget affiche un message :
| Message | Cause | Solution |
|---|---|---|
| Widget introuvable | l'identifiant dans le code est incorrect, ou l'intégration est désactivée ou supprimée | copier à nouveau le code, activer l'intégration avec Activer maintenant |
| Widget non disponible | l'extension Intégration site web n'est pas active | activer l'extension dans la Boutique d'extensions |
| Domain nicht autorisiert | ton site ne figure pas sous Domaines autorisés | ajouter le domaine et Enregistrer |
| Le widget « … » sera bientôt disponible | le bloc n'est pas encore disponible dans le widget intégré (Abonnements, Accueil membre, Profil, Portefeuille) | retirer le bloc de l'intégration |
Si rien n'apparaît du tout, vérifie :
- Le code complet est-il inséré, y compris le
<script>? - Ton outil de création de site autorise-t-il JavaScript dans cet élément ?
- As-tu enregistré l'intégration après la dernière modification ?
Questions fréquentes
Où je trouve le code pour mon site web ? Sous Intégration web : touche la carte de l'intégration, puis Copier le code.
Est-ce que je dois réinsérer le code après chaque modification ? Non. Après Enregistrer, le widget affiche la nouvelle version.
Est-ce que je peux supprimer « Powered by Bookicorn » ? Le lien fait partie du code. Si tu le supprimes, le widget le remet.
Mon widget affiche « Domain nicht autorisiert ». Ajoute ton site sous Dimensions → Domaines autorisés ou supprime-y toutes les entrées, puis touche Enregistrer.
Est-ce que je peux insérer le code dans Wix ? Oui, avec un élément pour intégrer du code personnalisé. Règle une hauteur suffisante pour l'élément.