Intégration site web

Catégorie : Marketing | Code : website_integration

Avec l'intégration site web, tu peux intégrer des widgets Bookicorn directement sur ton propre site. Les clients peuvent réserver des cours, acheter des crédits et utiliser des bons de réduction – sans quitter ton site. Les widgets s'adaptent automatiquement aux couleurs de ton studio et à ton logo.

Ce que tu obtiens

• Widget Builder avec configuration glisser-déposer
• 5 types de widgets : planning des cours, formulaire de réservation, forfaits de crédits, utilisation de bons de réduction, infos studio
• Auto-branding : les widgets reprennent automatiquement les couleurs de ton studio et ton logo
• Intégration via iframe ou balise script – fonctionne sur n'importe quel site web
• Design responsive – s'affiche bien sur ordinateur et appareils mobiles
• Aucune programmation nécessaire – un simple copier-coller suffit

Activation

Widget Builder

Le Widget Builder est l'outil central pour l'intégration de ton site web. Tu y configures les widgets que tu souhaites intégrer et leur apparence.

Comment ça marche

Aperçu en temps réel

Dans le Widget Builder, tu vois à droite un aperçu en direct du widget – tel qu'il apparaîtra sur ton site web. Les modifications s'affichent immédiatement.

Widgets disponibles

1. Widget planning des cours

Affiche ton planning de cours actuel sur ton site web. Les clients voient tous les cours avec la date, l'heure, le coach et les places disponibles.

Options de configuration :

• Affichage : vue hebdomadaire ou vue liste
• Filtres : types de cours, lieux, coaches
• Période : semaine en cours, 2 prochaines semaines, mois prochain
• Bouton « Réserver maintenant » directement dans le widget

<!-- Widget Planning -->
<div id="bookicorn-schedule"></div>
<script src="https://widget.bookicorn.net/schedule.js"
  data-studio="ton-studio-id"
  data-lang="fr">
</script>

2. Widget formulaire de réservation

Un formulaire de réservation complet pour un cours ou un type de cours spécifique. Les clients choisissent le créneau, se connectent et réservent – le tout sans quitter ton site web.

Options de configuration :

• Pré-filtrage sur un type de cours spécifique
• Pré-filtrage sur un lieu spécifique
• Affichage : plein écran ou compact

Conseil : Utilise le widget formulaire de réservation sur des landing pages dédiées à des cours individuels. Une page dédiée par type de cours avec un formulaire de réservation direct convertit nettement mieux qu'un aperçu général des cours.

3. Widget forfaits de crédits

Affiche tes forfaits de crédits pour une réservation directe. Les clients peuvent sélectionner et acheter des forfaits sans avoir à ouvrir l'application Bookicorn.

Options de configuration :

• Quels forfaits afficher (tous ou seulement une sélection)
• Affichage : grille ou liste
• Mise en avant d'un forfait (p. ex. « Choix le plus populaire »)

4. Widget utilisation de bons de réduction

Un formulaire simple dans lequel les clients saisissent leur code de bon de réduction. Après saisie, les offres disponibles avec réduction s'affichent.

Remarque : Le widget utilisation de bons de réduction nécessite l'addon Système de bons de réduction.

5. Widget infos studio

Affiche les informations de base de ton studio : adresse, horaires d'ouverture, coordonnées et un bouton « Réserver maintenant ». Pratique pour la barre latérale ou le pied de page de ton site web.

Auto-branding

Tous les widgets reprennent automatiquement le branding de ton studio :

• Couleur principale : issue des paramètres de ton studio (pour les boutons, liens, mises en avant)
• Logo : ton logo de studio apparaît dans l'en-tête du widget
• Police : polices système qui s'harmonisent avec la plupart des sites web
• Arrondis et espacements : optimisés pour un rendu moderne et soigné

Tu peux ajuster le branding à tout moment dans les paramètres de ton studio – tous les widgets se mettent à jour automatiquement.

Remarque : Le logo Bookicorn n'apparaît pas dans les widgets. Pour une présentation entièrement sans marque sans référence à Bookicorn, il existe l'addon Application mobile (White Label).

Intégration sur ton site web

Option 1 : iframe (simple)

Pour la plupart des constructeurs de sites (Wix, Squarespace, Jimdo, etc.), l'iframe est l'option la plus simple :

<iframe
  src="https://widget.bookicorn.net/[studio-id]/schedule"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 12px;">
</iframe>

Option 2 : balise script (recommandé)

Pour WordPress, Webflow ou des pages HTML personnalisées, la balise script est la meilleure option – le widget s'adapte automatiquement en hauteur :

<!-- Conteneur widget -->
<div id="bookicorn-widget"></div>

<!-- Script widget -->
<script
  src="https://widget.bookicorn.net/loader.js"
  data-studio="[ton-studio-id]"
  data-widget="schedule"
  data-lang="fr"
  async>
</script>

Guides par plateforme

Design responsive

Tous les widgets sont optimisés pour mobile et s'adaptent automatiquement à la largeur de l'écran :

• Ordinateur (>768px) : vue complète avec toutes les colonnes
• Tablette (480–768px) : mise en page adaptée, affichage plus compact
• Mobile (<480px) : mise en page une colonne, empilée verticalement

Tu n'as rien à configurer – cela se fait automatiquement.

Combiner plusieurs widgets

Tu peux intégrer plusieurs widgets différents simultanément sur ton site web. Combinaison recommandée pour une page de réservation optimale :

Conseils pour améliorer la conversion

Placement bien visible

• Ne pas cacher le widget – place le planning des cours sur la page d'accueil « above the fold » (visible sans faire défiler)
• Lier une page de réservation dédiée dans la navigation
• Les boutons d'appel à l'action sur les autres pages doivent pointer vers la page de réservation

Appels à l'action clairs

• Utilise des titres orientés vers l'action : « Réserver un cours maintenant », « Réserver une place »
• Place de courts textes d'introduction au-dessus du widget : pourquoi quelqu'un devrait-il réserver maintenant ?

Temps de chargement

• La balise script se charge de façon asynchrone et n'affecte guère le temps de chargement de ton site
• L'iframe est légèrement plus lente – pour les sites très axés sur la performance, préférer la balise script

Tests A/B

Teste différents emplacements et configurations de widgets :

• Widget planning en haut vs. forfaits de crédits en haut
• Vue hebdomadaire vs. vue liste
• Avec ou sans filtre coach

Questions fréquentes

Les widgets fonctionnent-ils sur tous les navigateurs ? Oui. Les widgets prennent en charge tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) et Internet Explorer 11+.

Les clients doivent-ils avoir un compte Bookicorn pour réserver ? Oui. Lors du paiement, les clients sont invités à se connecter ou à s'inscrire. L'inscription est gratuite et prend moins d'une minute.

Les widgets se mettent-ils à jour automatiquement quand je modifie le planning ? Oui. Les widgets affichent toujours des données en temps réel – les modifications du planning dans l'admin sont immédiatement visibles dans le widget.

Puis-je intégrer le widget sur plusieurs pages simultanément ? Oui, sans restriction. Tu peux utiliser le même code de widget sur autant de pages que tu veux.

Que se passe-t-il si le nom ou le logo de mon studio change ? Tous les widgets se mettent à jour automatiquement – tu n'as pas besoin de générer un nouveau code d'intégration.