Comment ajouter le widget de réservation Schedito à Squarespace
Squarespace peut utiliser l’intégration Schedito recommandée en trois parties : charger une seule fois la feuille de style partagée, charger une seule fois le JavaScript et placer le DIV du widget propre au calendrier sur la page où les clients doivent pouvoir réserver.
Ce guide utilise l’injection de code d’en-tête et de pied de page de Squarespace pour les ressources Schedito partagées, ainsi qu’un bloc de code pour le calendrier de réservation lui-même.
Avant de ouvrir Squarespace
Un calendrier Schedito configuré
Configurez les services, les ressources et les disponibilités que les clients pourront réserver avant de publier le widget.
Un forfait Squarespace avec injection de code
L’intégration recommandée nécessite l’injection de code de Squarespace. Les forfaits Core, Plus et Advanced actuels la prennent en charge, ainsi que certains anciens forfaits.
Les trois éléments Schedito
Ouvrez le code du widget dans Schedito et gardez à portée de main le lien CSS, le script JavaScript et le DIV du widget propre au calendrier.
1. Gardez les trois éléments Schedito séparés
Le tableau de bord Schedito vous fournit trois éléments de code frontend :
Lien CSS — fournit le style du widget.
Script JavaScript — charge et fait fonctionner les widgets Schedito.
DIV du widget — identifie l’organisation et le calendrier public de réservation et indique où ce calendrier doit s’afficher.
Sur Squarespace, le CSS et le JavaScript peuvent être chargés une seule fois via l’injection de code, tandis que le DIV propre au calendrier se place dans le contenu de la page.
Lien CSS Schedito — une seule fois
JavaScript Schedito — une seule fois
DIV du widget propre au calendrier
2. Ajoutez le lien CSS Schedito à l’injection de code de l’en-tête
Copiez le CSS <link> depuis votre tableau de bord Schedito.
Ouvrez Squarespace Injection de code et collez le lien dans le champ En-tête . Le code placé ici est ajouté à la section <head> des pages de votre site.
Ne copiez pas la feuille de style dans chaque bloc de code de réservation. Charger une seule fois la feuille de style Schedito partagée est une configuration plus propre.
3. Ajoutez le JavaScript Schedito à l’injection de code du pied de page
Copiez le JavaScript <script> fourni par le tableau de bord Schedito.
Dans le panneau d’injection de code de Squarespace, collez-le dans le champ Pied de page .
Ainsi, le JavaScript Schedito partagé reste en dehors des différents blocs de réservation et demeure disponible pour les DIV de calendrier affichés sur le site.
Chargez-le une seule fois au lieu de copier le même script à chaque emplacement de réservation.
4. Placez le DIV du calendrier dans un bloc de code
Ouvrez la page Squarespace où les clients doivent pouvoir réserver et ajoutez un Bloc de code à l’emplacement souhaité.
Définissez le bloc sur HTML et collez uniquement le DIV du widget propre au calendrier copié depuis Schedito.
Le DIV contient des valeurs telles que data-organization-id et data-calendar-public-id. Veillez à utiliser les valeurs générées pour le calendrier que vous souhaitez réellement publier.
Comme le CSS et le JavaScript sont déjà chargés séparément, le bloc de code reste compact et propre à ce calendrier.
Vérifiez votre forfait Squarespace
Les blocs de code Squarespace peuvent contenir du HTML standard avec tous les forfaits actuels ; le placement du DIV du widget Schedito n’est donc pas l’élément limitant.
La configuration Schedito recommandée nécessite également l’ Injection de code pour le JavaScript et la feuille de style partagés. Squarespace propose actuellement l’injection de code avec les forfaits Core, Plus et Advanced ainsi qu’avec certains anciens forfaits.
Si votre forfait actuel ne donne pas accès à l’injection de code, passez à un forfait Squarespace qui la prend en charge avant de suivre cette méthode d’intégration, plutôt que de tenter de contourner cette restriction de la plateforme.
Utiliser plusieurs calendriers Schedito sur Squarespace
Si plusieurs pages Squarespace doivent proposer la réservation, conservez le lien CSS et le JavaScript Schedito partagés une seule fois dans l’injection de code.
Ajoutez ensuite un bloc de code distinct à chaque emplacement où un calendrier doit apparaître et collez le DIV du widget propre à ce calendrier.
Ainsi, une page de services, une page de consultation et une page d’atelier peuvent utiliser différents calendriers Schedito sans recharger plusieurs fois les mêmes ressources frontend.
Chargés une seule fois
Script JavaScript
Par emplacement de réservation
Page B → DIV du calendrier B
Page C → DIV du calendrier C
5. Publiez et tester l’ensemble du parcours de réservation
Ne vous arrêtez pas lorsque le calendrier devient visible. Vérifiez les disponibilités réelles et effectuez une réservation depuis le site public.
Ouvrir la page publique
Testez la page Squarespace en ligne. Vérifiez que le CSS, le JavaScript et le DIV du calendrier forment ensemble une interface de réservation fonctionnelle.
Effectuer une réservation
Sélectionnez un service, une date et une heure, puis effectuez une véritable réservation de test. Vérifiez ensuite le résultat dans Schedito.
Vérifiez l’affichage mobile
Testez aussi bien sur mobile que sur ordinateur. Assurez-vous que la section Squarespace et le bloc entourant le widget lui offrent une largeur utilisable suffisante.
Widget de réservation Squarespace dépannage
Vérifiez séparément les trois parties de l’intégration : le lien CSS dans l’injection de code de l’en-tête, le JavaScript dans l’injection de code du pied de page et le DIV propre au calendrier dans le bloc de code.
Vérifiez également l’identifiant de l’organisation et celui du calendrier public, puis inspectez les outils de développement du navigateur afin de repérer d’éventuels échecs de chargement des ressources ou requêtes API.
Vérifiez votre forfait Squarespace. L’injection de code est une fonctionnalité premium qui n’est pas disponible avec le forfait Basic actuel.
Si le site utilise le forfait Basic, l’intégration Schedito recommandée nécessite de passer à un forfait qui prend en charge l’injection de code.
L’intégration Squarespace fonctionne probablement. Vérifiez plutôt Schedito : configuration du service, ressources nécessaires, disponibilités récurrentes, exceptions propres à certaines dates, réservations existantes, capacité et calendriers externes connectés.
Vérifiez si vous avez copié les ressources partagées à la fois dans l’injection de code et dans les blocs de code individuels. Conservez le CSS et le JavaScript dans l’injection de code et supprimez les copies inutiles du contenu des pages.
Vérifiez la section Squarespace et la mise en page du bloc qui entourent le widget. Les colonnes, les espacements et la largeur du conteneur peuvent limiter le widget même si Schedito est lui-même responsif.
Utilisez le thème clair ou sombre du widget Schedito ainsi que les réglages de couleurs pris en charge. Vérifiez également si des règles générales du CSS personnalisé de Squarespace modifient involontairement les champs de formulaire, les boutons ou d’autres éléments.
Laissez Squarespace gérer votre site et Schedito gérer 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 sur Squarespace
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar