Comment ajouter le widget de réservation Schedito à WordPress
Vous n’avez pas besoin d’une extension WordPress spécifique à Schedito. Configurez le calendrier de réservation dans Schedito, ouvrez le code de son widget et ajoutez à WordPress les trois éléments d’intégration : la feuille de style partagée, le JavaScript partagé et le conteneur du widget propre au calendrier.
Ce guide utilise l’éditeur de blocs natif de WordPress. Le même principe d’intégration s’applique aussi aux constructeurs de pages qui proposent du HTML, des intégrations ou du code personnalisé au niveau du site.
Avant de ouvrir WordPress
Un calendrier Schedito fonctionnel
Configurez les services, ressources et disponibilités que vous souhaitez proposer aux visiteurs WordPress avant de publier le widget.
Accès à l’édition WordPress
Vous devez avoir l’autorisation de modifier la page cible et, si le CSS ou le JavaScript doivent être ajoutés au niveau du site, accès à une méthode appropriée de gestion du code frontend.
Le code de votre widget Schedito
Ouvrez le code du widget dans le tableau de bord Schedito. Schedito fournit trois éléments distincts à copier : le lien CSS, le script JavaScript et le conteneur HTML du widget propre au calendrier.
1. Copiez les trois éléments d’intégration Schedito
Ouvrez le code du widget pour le calendrier de réservation dans votre tableau de bord Schedito. L’intégration est volontairement présentée sous forme de trois éléments distincts :
Lien CSS — charge les styles du widget Schedito.
Script JavaScript — charge et initialise la fonctionnalité de réservation.
Conteneur du widget — identifie l’organisation et le calendrier public de réservation et indique l’emplacement où l’interface doit s’afficher.
Gardez ces trois éléments séparés. La feuille de style et le JavaScript ne doivent normalement être chargés qu’une seule fois, tandis que vous pouvez placer un ou plusieurs conteneurs de widget propres aux calendriers partout où la réservation doit apparaître.
Les trois éléments dans Schedito
1. Lien CSS
Charger une seule fois
2. Script JavaScript
Charger une seule fois
3. DIV du widget
Emplacement où ce calendrier doit s’afficher
2. Placez le DIV du widget dans un bloc HTML personnalisé
Ouvrez la page WordPress où les clients doivent pouvoir réserver, par exemple une page Réserver, Rendez-vous, Contact ou une page dédiée à un service.
Ajoutez un HTML personnalisé bloc. Vous pouvez aussi saisir /html dans un nouveau bloc pour le trouver rapidement.
Depuis le tableau de bord Schedito, copiez uniquement le conteneur HTML du widget et collez-le dans le bloc. Il s’agit de l’élément propre au calendrier contenant des valeurs telles que data-organization-id et data-calendar-public-id.
Ne dupliquez pas le lien CSS et le script JavaScript Schedito dans chaque bloc de widget. Ajoutez-les séparément comme ressources frontend partagées.
3. Chargez les ressources Schedito CSS et JavaScript une seule fois
Retournez au code du widget dans le tableau de bord Schedito et copiez les deux éléments restants : le CSS <link> et le JavaScript <script>.
Ce sont des ressources frontend partagées. Elles doivent normalement être chargées une seule fois sur une page ou, plus souvent, une seule fois pour les pages du site où Schedito peut être utilisé. Ne les répétez pas pour chaque widget de calendrier.
Si votre configuration WordPress ou votre constructeur de pages propose une zone globale de code personnalisé, elle peut convenir pour ces deux éléments. Sur un thème WordPress maintenu professionnellement, un développeur peut également charger la feuille de style et le script correspondants via le mécanisme frontend standard d’enqueue de WordPress.
Si vous avez plusieurs calendriers Schedito sur le même site, ils peuvent partager le même CSS et JavaScript chargés. Chaque calendrier n’a besoin que de son propre widget <div>.
Structure WordPress recommandée
Lien CSS — une seule fois
Script JavaScript — une seule fois
Bloc HTML personnalisé
DIV Schedito propre au calendrier
À propos des autorisations WordPress et JavaScript
Les versions récentes de WordPress autorisent le contenu HTML personnalisé via l’éditeur de blocs, mais JavaScript et les autres balises potentiellement dangereuses dépendent des capacités de l’utilisateur. WordPress peut nettoyer le contenu non autorisé lorsqu’un utilisateur ne disposant pas des permissions requises enregistre la page.
Avec Schedito, vous n’avez de toute façon normalement pas besoin de tout placer dans le bloc de la page. Gardez le DIV propre au calendrier dans la page et chargez le CSS et le JavaScript partagés une seule fois via un mécanisme approprié au niveau du site.
Si un script ou une feuille de style disparaît après l’enregistrement, ne le recollez pas sans cesse dans la page. Vérifiez vos autorisations WordPress et utilisez la méthode approuvée du site pour charger les ressources frontend.
4. Publiez et testez comme un client
Une page qui semble correcte dans l’éditeur WordPress ne suffit pas. Testez la page finale, les disponibilités et l’envoi d’une réservation.
Ouvrir la page publique
Testez le frontend publié, pas seulement l’aperçu de l’éditeur. Vérifiez que l’interface Schedito se charge réellement pour un visiteur normal.
Effectuer une réservation
Sélectionnez un service, une date et une heure puis envoyez une vraie réservation de test. Vérifiez ensuite la réservation obtenue dans Schedito.
Vérifier la mise en page responsive
Testez les largeurs desktop et mobile et vérifiez que votre thème WordPress ne limite, masque ni déforme le widget de réservation.
Widget de réservation WordPress dépannage
Vérifiez l’intégration comme trois éléments indépendants. Commencez par vérifier que le DIV Schedito propre au calendrier est présent et contient les bons identifiants d’organisation et de calendrier public. Confirmez ensuite que le CSS et le JavaScript Schedito sont réellement chargés sur la page publique.
Utilisez les outils de développement du navigateur pour rechercher des requêtes CSS ou JavaScript échouées, des erreurs JavaScript, des restrictions de sécurité du contenu ou un balisage modifié par WordPress ou une autre extension.
Si WordPress supprime le DIV du widget lui-même, vérifiez le balisage HTML et les permissions de l’utilisateur. S’il supprime un script ou un autre balisage exécutable, il s’agit généralement d’un problème de permission ou de nettoyage du contenu.
La configuration Schedito recommandée évite de réintégrer ces scripts dans le contenu : conservez le DIV du widget dans la page et chargez le CSS et le JavaScript partagés une seule fois via la méthode d’intégration frontend approuvée du site.
L’intégration WordPress fonctionne probablement. Vérifiez plutôt Schedito : le service, les ressources nécessaires, les disponibilités récurrentes, les exceptions propres à certaines dates, les réservations existantes, la capacité et les éventuels engagements de calendriers externes connectés.
Vérifiez la largeur, le débordement, les marges internes et les règles de mise en page du bloc WordPress parent ou du conteneur du thème. Évitez de placer l’interface de réservation dans une colonne fixe inutilement étroite.
Si le widget se charge correctement en dehors de ce conteneur, le problème vient probablement du CSS de mise en page WordPress environnant plutôt que de la configuration de réservation.
Utilisez la configuration de style du widget Schedito pour choisir un affichage clair ou sombre approprié et ajuster les couleurs et propriétés visuelles prises en charge.
Vérifiez également si votre thème WordPress applique des règles CSS générales aux boutons, formulaires ou autres éléments qui interfèrent avec l’interface de réservation.
Après avoir modifié le balisage d’intégration ou les ressources frontend, videz les caches WordPress, CDN et navigateur concernés. Les optimisations JavaScript ou le chargement différé peuvent également affecter le code frontend externe ; excluez donc les ressources Schedito nécessaires si votre configuration d’optimisation empêche leur bonne exécution.
Votre site WordPress n’est que la couche de présentation
Une fois le widget opérationnel, continuez à configurer les services, disponibilités, synchronisation des calendriers, capacités et styles dans Schedito plutôt que de reconstruire ces règles dans WordPress.
Commencer gratuitementPrésentation de la réservation avec WordPress
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar