Widgets de réservation

Créer et intégrer des widgets de réservation depuis le créateur de widgets de votre espace de travail — configuration, aperçu et dépannage.

Les widgets de réservation permettent aux clients de réserver des services sur votre site web sans visiter le portail client complet.

Chaque espace de travail ServEase dispose de son propre Créateur de widgets :

{workspace-id}.widgets.servease.io

Remplacez {workspace-id} par l'identifiant de votre locataire. Connectez-vous avec vos identifiants administrateur, puis créez et configurez autant de widgets que nécessaire — chacun avec son propre code d'intégration.

Paramètres → Widget du portail client dans le panneau d'administration reflète la même configuration pour l'aperçu et l'enregistrement. Pour les intégrations quotidiennes sur le site web, la plupart des équipes utilisent le créateur de widgets autonome à {workspace-id}.widgets.servease.io. Voir Widget du portail client.

Types de widgets

Lors de la création ou de la modification d'un widget, choisissez un type dans la section Widget :

Type	Idéal pour
Calendrier	Grille mois, semaine ou quinzaine — parcourir la disponibilité dans le temps
Emploi du temps	Colonnes de planning quotidien — vue créneau par créneau
Liste	Liste ou grille défilable de services ou créneaux réservables
Carte	Vue basée sur la localisation — utile quand la distance et la géographie comptent

Chaque type a ses propres options (vue par défaut, format horaire, mise en page, paramètres de carte, etc.) décrites ci-dessous.

Cinq sections de configuration

La barre latérale du créateur de widgets comporte cinq sections principales. Les modifications s'appliquent au widget que vous modifiez ; créez plusieurs widgets pour différentes pages ou audiences.

Paramètres

Langue — locale par défaut pour les visiteurs (par exemple anglais, polonais, allemand).
URL de base de l'API — résolue pour l'environnement de votre locataire (lecture seule).
Source de données d'aperçu — Données live (services et créneaux réels) ou Données démo lorsque votre catalogue est encore vide ou que vous souhaitez un aperçu sûr sans assez de services publiés.

Comportement principal et flux de réservation :

Type de widget — Calendrier, Emploi du temps, Liste ou Carte (voir ci-dessus).
Activer les pages d'aperçu du service — permet aux clients d'ouvrir un aperçu du service stylisé avant la réservation (voir Pages d'aperçu du service).
Modèle d'aperçu — lorsque l'aperçu est activé, choisissez un style de mise en page (Professional, Luxury, Simple, Friendly, Minimal, Bold, Nature, Retro, etc.).

Options spécifiques au type (le cas échéant) :

Type	Exemples
Calendrier	Vue par défaut (semaine / quinzaine / mois), présentation services vs créneaux horaires, semaine commence lundi ou dimanche, format horaire (12h / 24h), colonnes de créneaux (heure de début, nom, option, équipe, employés, prix, emplacement — texte ou icônes)
Emploi du temps	Format horaire, mettre en évidence les créneaux disponibles
Liste	Mise en page : grille ou liste
Carte	Clé API Google Maps optionnelle, unité de distance (km / mi)

Filtres

Prédéfinissez ce que le widget affiche pour que les visiteurs voient un catalogue ciblé plutôt que tout à la fois :

Services, équipes, terme de recherche
Date de début / fin (avec préréglages tels qu'aujourd'hui, semaine prochaine, mois prochain)
Prix min / max, distance (sur les widgets carte)

Utilisez les filtres lors de l'intégration d'un widget sur une page de campagne (« Réserver le yoga uniquement ») ou un site spécifique à un emplacement.

Affichage

Afficher ou masquer l'interface autour de l'expérience de réservation :

Option	Effet
Barre de filtres	Contrôles de filtres prédéfinis visibles pour les visiteurs
Recherche / date / prix / distance	Contrôles de filtres individuels (lorsque la barre de filtres est activée)
Sélecteur de vue calendrier	Type calendrier uniquement — contrôles semaine / mois
Sélecteur de mise en page liste	Type liste uniquement — bascule grille vs liste
Barre supérieure du widget	En-tête dans le cadre du widget
Cadre extérieur	Bordure/cadre autour du widget

Thème

Design visuel indépendant de la Clé de thème frontend du portail client :

Préréglages de couleurs — palettes intégrées (clair par défaut, sombre, océan, forêt, et autres).
Couleurs personnalisées — primaire, secondaire, surfaces, bordures et jetons associés.
Typographie — famille et taille de police (petit / moyen / grand).
Mise en page — rayon des bordures, densité d'espacement, marge extérieure.

Aperçu avant intégration

Utilisez le panneau d'aperçu sur les grands écrans pour vérifier le widget avant publication :

Bureau — pleine largeur
Tablette — largeur tablette contrainte
Mobile — largeur téléphone

Actualisez ou ouvrez dans un nouvel onglet pour tester avec des données live ou démo. Vérifiez les filtres, les colonnes de créneaux et le thème sur petit écran — la majorité du trafic d'intégration est mobile.

Intégrer sur votre site web

Lorsque la configuration est prête, cliquez sur le bouton vert Intégrer.

La boîte de dialogue Copier sur votre site fournit :

Un extrait iframe (data-servease-widget="true") pointant vers l'URL de votre widget.
Le script embed-loader.js — redimensionne l'iframe et gère la fenêtre modale sur la page hôte.

Collez les deux l'iframe et le script chargeur à l'endroit où le widget doit apparaître. Utilisez Copier le code d'intégration pour copier l'extrait complet.

Un lien Dépannage ouvre les corrections courantes (également résumées ci-dessous).

Dépannage des intégrations

Vérifications rapides

Confirmez que l'iframe a data-servease-widget="true".
Confirmez que embed-loader.js se charge (visible dans l'onglet Réseau du navigateur).
Confirmez que window.ServeaseEmbedLoader existe dans la console du navigateur.
Après des corrections côté hôte, collez l'extrait le plus récent du créateur de widgets.

Règle la plus importante

Ne vous fiez pas aux balises script dans dangerouslySetInnerHTML. Traitez l'iframe du widget comme un vrai composant dans React, Next.js ou votre CMS — pas comme du HTML brut seul.

Problèmes courants

Problème	Que faire
Widget coupé	Bas manquant au premier chargement ou sur mobile — utilisez le dernier extrait du chargeur ; confirmez que `embed-loader.js` s'exécute ; dans React/Next, affichez une vraie `<iframe />`, pas du HTML injecté
L'actualisation corrige	Incorrect à la première visite, correct après rechargement — chargeur ignoré lors de la navigation côté client ; chargez `embed-loader.js` par programmation au montage
Chargeur inactif	Script manquant ou `ServeaseEmbedLoader` non défini — remplacez par un extrait frais ; assurez-vous que la page hôte ne supprime pas les balises script
Modale masquée par le chrome de la page	Modale de réservation sous l'en-tête fixe — conservez le chargeur actuel pour les messages de fenêtre ; ajoutez de l'espace vertical autour de l'iframe
React / Next / CMS	Incohérent dans les blocs HTML — extrayez le `src` de l'iframe, affichez `<iframe />` en JSX, chargez le chargeur via `document.createElement('script')`, appelez `ServeaseEmbedLoader.refresh()` au montage

Les widgets nécessitent des services publiés avec des plannings valides. Un widget vide signifie généralement aucun créneau réservable, des filtres qui excluent tout, ou le mode démo alors que les services sont encore en brouillon.

Pages d'aperçu du service

Les pages d'aperçu du service sont des pages d'atterrissage pour un seul service optionnelles sur votre hôte widgets — utiles pour le détail marketing, les publications sociales et les liens « réserver ce soin ».

Activez-les dans la section Widget du créateur de widgets (Activer l'aperçu du service + modèle par défaut). Les clients peuvent ouvrir Aperçu depuis la modale de réservation, ou vous pouvez générer des liens depuis Détail du service → Générer la page.

Chaque page d'aperçu live inclut Partager le lien — les visiteurs copient un lien court (https://{workspace-id}.api.servease.io/o/{code}) qui redirige vers la page complète sur {workspace-id}.widgets.servease.io.

Voir Pages d'aperçu du service pour les modèles, Générer la page, le partage de lien et la structure des liens courts.