Comment intégrer Koalendar dans Webflow
Ajoutez la réservation instantanée à n'importe quel projet Webflow : il vous suffit de copier votre code d'intégration Koalendar → de le coller dans Webflow → de le publier. Pas besoin de plugins ni de clés API.
📑 Menu
- Étape 1 – Copiez votre code Koalendar
- Étape 2 – Collez-le dans Webflow
- Dépannage
- Quel style choisir ?
📋 Étape 1 – Copiez votre code Koalendar
- 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 que voient les visiteurs |
|---|---|
| Intégration en ligne 🖥️ | Calendrier complet affiché directement sur la page. |
| Widget contextuel 📍 | Bouton flottant qui ouvre votre calendrier dans une fenêtre contextuelle. |
| Texte/bouton contextuel 🔗 | Tout lien ou bouton sur votre page ouvre le calendrier dans une fenêtre contextuelle. |
➕ Vous souhaitez simplement un lien normal ? Ignorez l'intégration, copiez l'URL de partage de votre Koalendar et créez un lien hypertexte vers n'importe quel texte, image ou bouton pour ouvrir votre agenda dans un nouvel onglet.
🎨 Conseil de conception : personnalisez les couleurs, le texte et la position dans Koalendar avant de copier afin que tout corresponde à votre style Webflow.
📝 Étape 2 – Collez-le dans Webflow
A. Intégration en ligne ou texte/bouton contextuel (élément d'intégration)
- Dans Webflow Designer, ouvrez la page où vous souhaitez insérer le calendrier ou le déclencheur.
- Faites glisser un élément Code Embed depuis + Ajouter → Éléments jusqu'à la position souhaitée.
- Cliquez sur Modifier le code personnalisé et collez votre code Koalendar.
- Enregistrer et fermer → Publier votre site.
B. Widget contextuel (bouton flottant sur l'ensemble du site)
- Accédez à Paramètres du projet → Code personnalisé → Code de pied de page.
- Collez le script du widget Koalendar.
- Enregistrer les modifications → Publier.
⏳ Attention : le code personnalisé ne s'exécute que sur le site publié, et non dans l'aperçu du Designer.
🛠️ Dépannage
| Problème | Solution rapide |
| Le calendrier ou le widget n'apparaît pas dans Designer. | Publiez le site et affichez l'URL en direct : les scripts ne s'exécutent pas dans le canevas Designer. |
| Le widget contextuel ne s'affiche pas | Vérifiez que le script se trouve dans le code du pied de page (ou dans un élément Embed) et republiez. |
| Le texte/bouton contextuel apparaît mais ne s'ouvre pas. | Assurez-vous que le snippet de déclenchement et le script Koalendar se trouvent sur la même page. |
| La hauteur du calendrier en ligne semble incorrecte | Redimensionnez l'élément Embed ou définissez une hauteur fixe dans Koalendar avant de copier. |
🤔 Quel style choisir ?
| Objectif | Meilleur style |
| Section dédiée aux réservations | Intégration en ligne 🖥️ |
| Appel à l'action sur l'ensemble du site | Widget contextuel 📍 |
| Ajouter un planning à un CTA existant | Texte/bouton contextuel 🔗 |
| Lien rapide hors page | Lien hypertexte simple vers votre URL Koalendar |