Comment ajouter Koalendar à un site Unbounce
Ajoutez une fonctionnalité de planification sans tracas à n'importe quelle page d'accueil Unbounce grâce à un simple copier-coller. Aucune intégration supplémentaire n'est nécessaire : tout ce dont vous avez besoin se trouve déjà dans Koalendar et Unbounce.
📑 Menu
- 📋 Étape 1 – Copiez votre code d'intégration
- 📝 Étape 2 – Collez-le dans Unbounce
- 🛠️ Dépannage
- 🤔 Quel style d'intégration devriez-vous utiliser ?
📋 Étape 1 – Copiez votre code d'intégration
- Dans le tableau de bord Koalendar, cliquez sur Partager à côté de la page de réservation que vous souhaitez intégrer.
- Sélectionnez Ajouter au site Web.
- Choisissez un style d'intégration et cliquez sur Copier le code.
| Style intégré | Ce qu'il fait |
|---|---|
| Intégration en ligne 🖥️ | Affiche le calendrier des réservations directement sur la page d'accueil. |
| Widget contextuel 📍 | Ajoute un bouton flottant « Réserver maintenant » qui ouvre une fenêtre contextuelle avec un calendrier. |
| Fenêtre contextuelle au clic 🔗 | Transforme n'importe quel lien ou bouton en calendrier contextuel. |
💡 Personnalisez les couleurs, le texte et la position avant de copier afin que cela corresponde à votre design Unbounce.
📝 Étape 2 – Collez-le dans Unbounce
Option A – Intégration en ligne ou fenêtre contextuelle au clic 🔧
- Dans Unbounce Page Builder, faites glisser un bloc HTML vers l'endroit où vous souhaitez que le calendrier (ou le déclencheur de fenêtre contextuelle) apparaisse.
- Double-cliquez sur le bloc pour ouvrir l'éditeur HTML personnalisé.
- Collez le code Koalendar que vous avez copié.
- Enregistrez le code, puis prévisualisez ou publiez votre page.
Option B – Widget contextuel (bouton flottant) 📌
- Ouvrez votre page dans Unbounce Page Builder et cliquez sur l'onglet Javascripts (en bas à gauche).
- Cliquez sur Ajouter un script → donnez-lui un nom tel que « Widget Koalendar ».
- Collez le code du widget Koalendar et définissez l'emplacement sur « Avant la balise de fin du corps ».
- Terminé → Prévisualiser ou publier. Le bouton flottant apparaît désormais sur toutes les variantes de cette page.
📝 Vous avez besoin d'un widget pour l'ensemble du site ? Ajoutez le même script à chaque page d'accueil ou dupliquez la page une fois le widget installé.
🛠️ Dépannage
| Problème | Solution rapide |
| Le calendrier ne se charge pas dans l'aperçu | Publiez la page — certains scripts ne fonctionnent que sur l'URL en ligne. |
| Widget manquant après collage | Assurez-vous que le script est placé avant la balise de fin du corps (et non dans l'en-tête). |
| Le lien contextuel s'affiche mais ne s'ouvre pas | Vérifiez que l'extrait du lien et le script Koalendar se trouvent sur la même page. |
| Le style semble étriqué | Augmentez la largeur/hauteur du bloc HTML ou ajustez le remplissage dans les paramètres d'intégration de Koalendar. |
🤔 Quel style d'intégration devriez-vous utiliser ?
| Objectif | Meilleur style |
| Section dédiée aux réservations | Intégration en ligne 🖥️ |
| CTA toujours visible | Widget contextuel 📍 |
| Ajouter une planification à un bouton existant | Fenêtre contextuelle au clic 🔗 |
| Lien rapide hors page | Lien direct ↗️ |