Comment ajouter le widget de réservation Schedito à Webflow
Webflow fonctionne particulièrement bien avec l’intégration en trois parties du widget Schedito. Chargez la feuille de style Schedito une seule fois, le JavaScript une seule fois, puis placez le DIV propre au calendrier exactement là où l’interface de réservation doit apparaître.
Ce guide présente la configuration recommandée avec le code personnalisé Webflow pour les ressources partagées et un élément Code Embed pour le calendrier de réservation lui-même.
Avant de ouvrir Webflow
Un calendrier Schedito configuré
Configurez les services, ressources et disponibilités que les clients doivent pouvoir réserver.
Accès à l’édition Webflow
Vous devez avoir accès au projet Webflow et à la fonctionnalité de code personnalisé disponible pour le site ou la page.
Les trois éléments Schedito
Ouvrez le code du widget dans Schedito et gardez le lien CSS, le script JavaScript et le DIV HTML propre au calendrier prêts à être copiés.
1. Gardez les trois éléments d’intégration séparés
Le tableau de bord Schedito fournit trois éléments de code frontend :
Lien CSS — fournit les styles du widget.
Script JavaScript — initialise et fait fonctionner les widgets Schedito.
DIV du widget — identifie l’organisation et le calendrier public de réservation et indique l’emplacement où ce calendrier doit s’afficher.
Webflow permet de placer chacun de ces éléments là où il a naturellement sa place. Le CSS et le JavaScript partagés sont chargés une seule fois, tandis que chaque emplacement de réservation reçoit son propre DIV spécifique au calendrier.
Lien CSS Schedito
JavaScript Schedito
DIV du widget propre au calendrier
2. Ajoutez le lien CSS Schedito au code Head de Webflow
Depuis votre tableau de bord Schedito, copiez le CSS <link>.
Si Schedito peut être utilisé sur plusieurs pages, ajoutez-le aux Code personnalisé Head afin que la feuille de style soit disponible sur tout le site.
Si Schedito n’est nécessaire que sur une seule page, vous pouvez utiliser la section de code personnalisé Head de cette page.
Ne copiez pas la feuille de style dans chaque Code Embed. Une seule feuille de style correctement définie au bon niveau suffit.
3. Ajoutez le JavaScript dans le code Footer
Copiez le JavaScript <script> depuis le tableau de bord Schedito.
Pour une configuration Schedito standard, placez-le dans le Code Footer, qui l’insère avant la balise de fermeture </body> après le contenu de la page.
Comme pour la feuille de style, choisissez la bonne portée : au niveau du site si Schedito est utilisé sur plusieurs pages, ou au niveau de la page si la réservation n’existe que sur certaines pages.
Le script doit normalement être chargé une seule fois et non répété dans chaque intégration de calendrier.
4. Placez le DIV du calendrier dans un Code Embed
Ouvrez la page où la réservation doit apparaître et ajoutez un élément Webflow Code Embed à l’emplacement approprié dans le design.
Depuis Schedito, copiez uniquement le DIV HTML du widget propre au calendrier et collez-le dans l’éditeur Code Embed.
Le DIV contient des valeurs telles que data-organization-id et data-calendar-public-id. Utilisez les valeurs générées pour le calendrier que vous souhaitez réellement publier.
Comme le CSS et le JavaScript partagés sont déjà chargés séparément, l’intégration elle-même reste légère et propre au calendrier.
Les ressources Schedito doivent-elles être chargées sur tout le site ou uniquement sur certaines pages ?
Utiliser le code personnalisé au niveau du site si Schedito apparaît sur plusieurs pages, plusieurs pages de service ou des mises en page réutilisables. Le CSS et le JavaScript partagés sont alors chargés une seule fois via la configuration globale du site.
Utiliser le code personnalisé propre à la page si Schedito n’existe que sur une seule page ou un petit nombre de pages et que vous ne souhaitez pas charger ses ressources ailleurs.
Dans les deux cas, évitez d’ajouter plusieurs fois la même feuille de style ou le même JavaScript pour les différents DIV de calendrier.
Utiliser Schedito avec le CMS Webflow ou des composants
Les Code Embeds Webflow peuvent référencer des valeurs dynamiques provenant d’éléments CMS, de propriétés de composants, de paramètres régionaux et de paramètres de page.
Cela permet des modèles avancés utiles lorsque des mises en page de réservation similaires doivent utiliser des calendriers différents. Par exemple, une mise en page de service réutilisable pourrait recevoir un identifiant de calendrier depuis le contenu structuré Webflow au lieu de nécessiter une intégration distincte écrite manuellement sur chaque page.
Pour une première installation standard, restez simple : utilisez exactement le DIV copié depuis Schedito. Introduisez des liaisons dynamiques uniquement si vous avez un besoin clair de contenu réutilisable et comprenez comment ces valeurs sont gérées.
Commencez simplement
Configuration standard
Copiez exactement le DIV du calendrier depuis Schedito.
Configuration avancée réutilisable
Utilisez le CMS Webflow ou les propriétés de composants pour fournir dynamiquement certaines valeurs.
5. Publiez et tester l’ensemble du parcours de réservation
Vérifiez que les ressources se chargent, que le calendrier s’affiche, que les disponibilités sont correctes et qu’un client peut réellement terminer une réservation.
Publier et ouvrir la page
Testez le site réellement publié. Certains comportements du code personnalisé se vérifient mieux après publication que seulement dans le Designer.
Effectuer une réservation
Sélectionnez un service, une date et une heure puis envoyez une vraie réservation de test. Vérifiez le résultat dans Schedito.
Vérifier les mises en page responsive
Testez le Code Embed et les conteneurs Webflow environnants sur les largeurs ordinateur, tablette et mobile.
Widget de réservation Webflow dépannage
Vérifiez les trois parties séparément : le lien CSS Schedito dans le code Head, le JavaScript dans le code Footer et le bon DIV de calendrier dans le Code Embed.
Utilisez les outils de développement du navigateur pour repérer les requêtes de ressources en échec, les erreurs JavaScript ou les requêtes API qui n’aboutissent pas.
Webflow n’exécute pas toujours les scripts intégrés exactement comme ils fonctionneront sur le site publié. Publiez le projet et testez la page publique réelle avant de conclure que l’intégration ne fonctionne pas.
L’intégration Webflow fonctionne probablement. Vérifiez la configuration Schedito : service, ressources requises, disponibilités récurrentes, exceptions propres à certaines dates, réservations existantes, capacité et engagements des calendriers externes connectés.
Vérifiez le code personnalisé au niveau du site et de la page. Si le même script ou la même feuille de style Schedito existe aux deux endroits, supprimez le doublon inutile et conservez-le au niveau correspondant à la structure de votre site.
Vérifiez le Code Embed lui-même et ses conteneurs Webflow parents. Les limites de largeur, colonnes de grille, paramètres flex, marges internes et règles de débordement du design environnant peuvent contraindre le widget même si Schedito fonctionne correctement.
Configurez l’affichage clair ou sombre et les couleurs prises en charge dans Schedito. Vérifiez également si un CSS personnalisé général dans Webflow affecte involontairement les boutons, champs de formulaire ou autres éléments du widget.
Laissez Webflow se concentrer sur le design et Schedito sur les réservations
Une fois l’intégration opérationnelle, continuez à gérer dans Schedito les services, les ressources, les disponibilités, la capacité, la synchronisation des calendriers et le style du widget.
Commencer gratuitementPrésentation de la réservation avec Webflow
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar