Comment ajouter le widget de réservation Schedito à un site sur mesure
Un site sur mesure peut utiliser Schedito directement grâce à trois éléments frontend : un lien CSS partagé, un script JavaScript partagé et un DIV HTML propre au calendrier.
Chargez le CSS et le JavaScript une seule fois au niveau approprié de l’application ou de la page, puis placez un DIV de widget Schedito partout où un calendrier de réservation doit s’afficher.
Avant de modifier votre site
Un calendrier Schedito configuré
Configurez les services, les ressources et les disponibilités que les clients doivent pouvoir réserver.
Accès à votre code frontend
Vous devez pouvoir ajouter une feuille de style, du JavaScript et du balisage HTML au site ou à l’application.
Les trois extraits de code Schedito
Ouvrez la zone d’intégration dans Schedito et gardez à portée de main le lien CSS, le script JavaScript et le DIV propre au calendrier.
1. Comprenez l’ intégration en trois parties
Le tableau de bord Schedito fournit trois éléments indépendants :
Lien CSS — fournit le style 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 définit l’emplacement d’affichage.
Le CSS et le JavaScript sont des ressources partagées. Le DIV est propre au calendrier affiché.
CSS Schedito — une seule fois
DIV propre au calendrier
JavaScript Schedito — une seule fois
2. Chargez la feuille de style Schedito une seule fois
Copiez le CSS <link> affiché dans votre tableau de bord Schedito et ajoutez-le à la section <head> du document ou à la couche habituelle de chargement des feuilles de style de votre application.
Si l’ensemble du site peut contenir des widgets Schedito, chargez la feuille de style globalement. Si la réservation n’existe que dans un bundle ou une route dédiée, limitez plutôt son chargement à ce périmètre.
N’ajoutez pas une nouvelle copie de la même feuille de style pour chaque DIV de calendrier.
3. Placez le DIV du widget propre au calendrier
Copiez le DIV HTML du calendrier que vous souhaitez publier et insérez-le dans le template, le composant ou la page où l’interface de réservation doit apparaître.
Le balisage contient des valeurs telles que data-organization-id et data-calendar-public-id. Utilisez les valeurs exactes générées par Schedito pour ce calendrier.
Si nécessaire, vous pouvez également utiliser des attributs facultatifs pris en charge, comme la langue du widget.
Emplacement du calendrier
<div class="schedito-widget"
data-organization-id="..."
data-calendar-public-id="...">
</div>Utilisez les valeurs exactes fournies par votre tableau de bord Schedito.
4. Chargez le JavaScript Schedito une seule fois
Copiez l’élément <script> actuellement affiché par Schedito et ajoutez-le à vos scripts frontend habituels, généralement vers la fin du document avant </body>.
Si plusieurs calendriers existent sur la même page ou dans l’application, ils partagent normalement ce même script.
Évitez d’ajouter des balises script identiques à côté de chaque DIV de widget.
Utiliser plusieurs calendriers Schedito
Chargez une seule fois le CSS et le JavaScript partagés, puis ajoutez un DIV de widget différent pour chaque calendrier ou emplacement de réservation.
Cela fonctionne aussi bien lorsque plusieurs calendriers apparaissent sur une même page que lorsque des calendriers différents apparaissent sur des pages distinctes.
Conservez dans chaque DIV les identifiants propres à l’organisation et au calendrier concernés. Ne dupliquez pas inutilement les balises des ressources partagées.
Partagés
JavaScript Schedito
Par calendrier
Calendrier B → DIV B
Calendrier C → DIV C
Utiliser Schedito dans des frontends dynamiques ou applications monopages
Si votre application rend le DIV Schedito dans le document HTML initial, l’intégration standard est normalement suffisante.
Si le conteneur du widget est inséré ultérieurement par le routage côté client, l’hydratation ou un autre mécanisme de rendu dynamique, vérifiez que l’initialisation de Schedito s’exécute après la création du conteneur.
Ne supposez pas que réinjecter constamment le script Schedito soit la bonne solution. Gardez le script partagé chargé une seule fois et vérifiez le comportement d’initialisation de la version actuelle du widget dans le cycle de vie de votre application.
5. Testez le parcours de réservation complet
Vérifiez l’affichage, les disponibilités, la création des réservations et le comportement responsif — pas seulement le chargement du JavaScript.
Chargez la page publique
Vérifiez que la feuille de style et le script se chargent correctement et que le calendrier remplace le DIV du widget sur le site public réel.
Effectuez une réservation de test
Sélectionnez un service, une date et une heure, puis effectuez une véritable réservation de test. Vérifiez ensuite l’enregistrement créé dans Schedito.
Vérifiez les conteneurs responsifs
Testez la mise en page parente aux largeurs ordinateur, tablette et mobile. Assurez-vous que votre propre CSS ne limite pas inutilement le widget.
Widget de réservation pour site web sur mesure dépannage
Vérifiez séparément les trois éléments : la feuille de style Schedito, le JavaScript et le DIV propre au calendrier.
Utilisez les outils de développement du navigateur pour rechercher des échecs de chargement des ressources, des erreurs JavaScript et des appels API en échec.
Vérifiez les data-organization-id et data-calendar-public-id par rapport à l’extrait de code actuellement affiché dans Schedito.
Vérifiez les templates partagés, les bundles et les composants individuels. Conservez les ressources communes à un périmètre approprié et supprimez les inclusions en double.
L’intégration frontend fonctionne probablement. Vérifiez la configuration Schedito : service, ressources nécessaires, disponibilités récurrentes, exceptions, réservations existantes, capacité et calendriers externes connectés.
Examinez vos conteneurs parents, vos règles de grille ou flex, la largeur maximale, les marges internes et les réglages de débordement. La mise en page de l’application peut limiter un widget qui est pourtant responsif.
Votre application insère peut-être le DIV du widget après l’initialisation de Schedito. Vérifiez à quel moment le conteneur entre dans le DOM et comment l’initialisation du widget doit être déclenchée dans le cycle de vie de votre frontend.
Continuez à développer votre application. Laissez Schedito gérer les réservations.
Une fois le widget intégré, 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 sur un site sur mesure
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar