Comment ajouter le widget de réservation Schedito à Wix
Vous pouvez ajouter Schedito à un site Wix existant sans déplacer vos services, disponibilités ou réservations dans Wix. L’intégration Wix la plus simple utilise un élément HTML intégré contenant les trois éléments du widget Schedito fournis par votre tableau de bord.
Wix gère le HTML intégré différemment d’un site web classique : le code s’exécute dans une iframe isolée. Ce guide explique cette particularité de Wix et montre comment intégrer Schedito sans la confondre avec l’intégration habituelle au niveau du site utilisée sur des plateformes comme WordPress.
Avant de ouvrir l’éditeur Wix
Un calendrier Schedito configuré
Configurez les services, ressources et disponibilités que vous souhaitez proposer aux visiteurs Wix avant d’intégrer le widget.
Accès à votre éditeur Wix
Vous devez avoir l’autorisation de modifier la page où l’interface de réservation doit apparaître et d’ajouter un élément d’intégration HTML.
Les trois éléments de code Schedito
Ouvrez le code du widget dans Schedito. Gardez à portée de main le lien CSS, le script JavaScript et le DIV propre au calendrier pour les copier.
1. Comprenez pourquoi Wix fonctionne différemment
Sur un site web classique, notre intégration Schedito recommandée consiste à charger le CSS et le JavaScript une seule fois, puis à placer les DIV de widget propres aux calendriers là où ils sont nécessaires.
L’élément Wix standard Intégration HTML se comporte différemment. Wix place le code intégré dans une iframe isolée. Le code chargé dans la page Wix environnante ne fait pas automatiquement partie de cette iframe, et le code à l’intérieur de l’iframe ne peut pas accéder directement au reste de la page.
Pour cette raison, l’installation Wix la plus simple constitue une exception volontaire : le lien CSS, le script JavaScript et le DIV du widget doivent tous se trouver dans la même iframe intégrée.
Intégration sur un site web classique
JavaScript — une seule fois
DIV du widget — là où nécessaire
HTML intégré Wix
Lien CSS
Script JavaScript
DIV du widget propre au calendrier
2. Ajoutez un Élément d’intégration HTML à la page Wix
Ouvrez la page Wix où les clients doivent pouvoir réserver, par exemple une page de réservation, de service, de consultation ou d’événement.
Ajoutez un élément d’intégration HTML ou de code à l’aide de l’éditeur Wix. Wix Editor et Wix Studio utilisent des libellés légèrement différents, mais tous deux proposent un élément permettant d’intégrer du code HTML externe.
Placez l’élément là où l’interface de réservation doit apparaître et donnez-lui suffisamment d’espace horizontal et vertical pour le calendrier.
3. Ajoutez le trois éléments Schedito dans l’intégration
Ouvrez le code du widget dans le tableau de bord Schedito. Copiez le lien CSS, le script JavaScript et le DIV HTML du widget dans le champ de code intégré Wix.
Un ordre pratique est le suivant :
1. Lien CSS
2. DIV du widget propre au calendrier
3. Script JavaScript
Utilisez exactement les extraits actuellement affichés dans votre tableau de bord Schedito. Ne remplacez pas l’ID de l’organisation, l’ID public du calendrier ou les URL des ressources par des valeurs copiées depuis un autre calendrier ou un ancien guide.
Cette répétition du CSS et du JavaScript est propre à l’intégration Wix basée sur une iframe. Ce n’est pas notre recommandation générale pour les sites web classiques.
Dans l’élément HTML intégré de Wix
Donnez à l’iframe de réservation suffisamment d’espace
L’élément HTML Wix possède ses propres dimensions. Le widget de réservation peut s’adapter à la largeur disponible à l’intérieur, mais la page Wix environnante contrôle toujours la taille globale de l’iframe.
Donnez à l’élément une largeur suffisante pour votre mise en page et une hauteur suffisante pour tout le parcours de réservation. S’il est trop bas, les étapes suivantes du calendrier peuvent être coupées ou nécessiter un défilement dans l’iframe.
Rappelez-vous aussi que l’iframe est visuellement isolée. Le CSS de votre site Wix ne stylise pas automatiquement le contenu Schedito qu’elle contient. Utilisez plutôt le thème clair ou sombre et les paramètres de personnalisation du widget de Schedito.
Intégrations Wix avancées : Éléments personnalisés
Wix prend également en charge les Custom Elements basés sur les Web Components standard. Ils peuvent offrir une intégration plus poussée qu’une iframe HTML classique et sont utiles lorsque vous avez besoin d’une meilleure intégration à la page ou de composants réutilisables.
Schedito ne nécessite ni ne fournit actuellement de Custom Element Wix dédié pour l’installation standard décrite dans ce guide. En créer un relève donc d’une intégration développeur avancée plutôt que de la configuration standard par copier-coller.
Si vous avez besoin de nombreux widgets Schedito sur un même site Wix ou d’un comportement plus spécifique à Wix, un wrapper Custom Element réutilisable peut être pertinent.
Quelle approche dois-je utiliser ?
Un ou quelques widgets de réservation
Utilisez l’intégration HTML. C’est l’approche la plus simple.
Intégration avancée ou nombreux widgets réutilisables
Envisagez une intégration Wix Custom Element développée sur mesure.
4. Publiez et tester l’ensemble du parcours de réservation
Vérifiez le widget lui-même, les dimensions de l’iframe et la réservation obtenue — pas seulement l’apparition éventuelle d’une boîte vide sur la page.
Tester le site publié
Testez la page Wix publiée au lieu de vous fier uniquement à l’éditeur ou à l’aperçu. Vérifiez que le widget Schedito se charge complètement.
Effectuer une vraie réservation de test
Sélectionnez un service, une date et une heure puis terminez le processus. Vérifiez la réservation obtenue dans votre tableau de bord Schedito.
Vérifier sur ordinateur et mobile
Vérifiez à la fois la mise en page du widget et les dimensions de l’élément intégré Wix aux points de rupture responsive utilisés par votre site.
Widget de réservation Wix dépannage
Vérifiez les trois éléments dans le code intégré Wix : le lien CSS Schedito actuel, le script JavaScript et le DIV du widget propre au calendrier.
Vérifiez l’ID de l’organisation et l’ID public du calendrier, puis utilisez les outils de développement du navigateur pour repérer d’éventuelles requêtes de ressources ou d’API en échec.
C’est normal si le DIV se trouve dans une intégration HTML Wix classique. L’intégration s’exécute dans sa propre iframe, tandis que le code personnalisé Wix s’exécute dans la page environnante. Les deux documents sont isolés.
Pour l’intégration simple par iframe, placez ensemble le lien CSS, le script JavaScript et le DIV du widget dans l’intégration elle-même.
Augmentez la hauteur de l’élément HTML intégré Wix. La mise en page Wix parente contrôle les dimensions de l’iframe ; un widget Schedito correctement rendu peut donc tout de même être coupé si son conteneur est trop bas.
L’intégration Wix fonctionne probablement. Vérifiez la configuration Schedito : service, ressources requises, disponibilités récurrentes, exceptions, réservations existantes, capacité et engagements des calendriers externes connectés.
C’est normal avec une iframe HTML. Le document Schedito intégré est isolé des styles de la page Wix parente.
Configurez directement dans Schedito le thème clair ou sombre, les couleurs et les autres propriétés visuelles prises en charge.
Vérifiez les deux côtés de l’intégration : Schedito s’adapte à la largeur disponible dans l’iframe, tandis que Wix contrôle la largeur et la hauteur de l’élément intégré. Ajustez l’élément Wix au point de rupture responsive concerné puis retestez le site publié.
Laissez Wix se concentrer sur votre site et Schedito sur les réservations
Une fois le widget opérationnel, continuez à gérer les services, ressources, disponibilités, capacités, synchronisation des calendriers et style du widget dans Schedito.
Commencer gratuitementPrésentation de la réservation avec Wix
Voir tous les guides Schedito · Personnalisation du widget · Synchronisation Google Calendar