Concevoir le processus de réservation avec le Design Manager
Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.
Le Design Manager permet de concevoir le processus public de réservation : vue d’ensemble des offres, détails des offres, étapes de sélection facultatives, formulaire des participants, récapitulatif, paiement, page de finalisation, en-tête et pied de page. Les widgets déterminent les informations et actions visibles pour la personne qui réserve à chaque étape.
Travaillez toujours avec une offre de démonstration et une copie du design. Vous pouvez ainsi tester ensemble le contenu, la navigation, les règles de réservation et l’affichage sans modifier discrètement le processus en production.
Commencer par une copie du design
Le design initial est la base système protégée. Il ne peut pas être remanié dans l’éditeur comme un design personnalisé. Créez une copie avec Ajouter un design et donnez-lui un nom explicite, par exemple « Réservation de cours 2026 Test ».
Définissez ensuite si la copie devient le design par défaut ou s’applique seulement à certaines catégories. L’affectation à la catégorie détermine le design effectivement utilisé par une page publique d’offre. Si une modification semble manquer, vérifiez d’abord le design, la catégorie et le lien d’aperçu utilisé.
Si une même organisation souhaite proposer une vue d’ensemble complète et une entrée par catégorie avec un design distinct, les deux pages doivent utiliser le bon point d’entrée et la bonne affectation de design. La procédure complète figure dans Design de catégorie et vue d’ensemble complète des offres. Si l’affichage du site diffère, comparez la copie au lien effectivement intégré à l’aide de Retrouver une modification de design enregistrée.
Distinguer l’en-tête, le corps et le pied de page
En-tête : navigation récurrente, connexion, choix de langue, logo ou informations.
Corps : page correspondante du parcours de réservation, par exemple vue d’ensemble des offres, détails de l’offre, formulaire des participants, récapitulatif ou paiement.
Pied de page : informations juridiques récurrentes, bannière de cookies, navigation ou code supplémentaire utilisé à dessein.
Choisissez d’abord le bon design, puis la zone de contenu et enfin le modèle précis. La sélection de widgets à droite s’adapte au modèle choisi.
Vérifier séparément la page de finalisation : celle-ci utilise la configuration du design par défaut prévue à cet effet. Si le compte contient plusieurs designs, testez aussi la finalisation réelle d’une réservation de démonstration après chaque modification.
Organiser et modifier les widgets
Faites glisser les nouveaux widgets depuis la sélection vers la zone de travail. Les widgets déjà placés peuvent être déplacés, redimensionnés en largeur ou supprimés. L’édition ouvre les paramètres généraux et propres au widget.
Les paramètres généraux comprennent notamment le nom, la largeur, la hauteur, l’ajustement automatique de la hauteur, les espacements, la visibilité mobile et la visibilité selon les tags. Utiliser les tags comme conditions explique l’effet des tags des participants.
Certains widgets sont prévus une seule fois par modèle. Le filtre d’offres, la vue d’ensemble de toutes les réservations et le calendrier sont désactivés dans la sélection dès qu’ils sont déjà placés. Cela évite les doublons de zones de commande ou de navigation.
Concevoir pour ordinateur, tablette et mobile
Le changement de vue dans l’éditeur modifie les valeurs de mise en page par point de rupture. La largeur et les espacements horizontaux et verticaux peuvent donc différer entre ordinateur, tablette et mobile. Un widget peut aussi être masqué sur les appareils mobiles.
Le Design Manager lui-même nécessite un grand écran. Si la fenêtre du navigateur est trop étroite, edoobox affiche uniquement une invitation à utiliser un écran plus grand. Le mode mobile est un niveau d’aperçu et de configuration dans l’éditeur de bureau, pas un éditeur pour smartphone.
Sur mobile, masquez uniquement les contenus non nécessaires à la décision de réservation. Le prix, les dates sélectionnées, champs obligatoires, confirmations juridiques et l’action de finalisation doivent rester accessibles dans chaque vue pertinente.
Enregistrer délibérément la mise en page et les paramètres des widgets
Les modifications de mise en page restent d’abord un brouillon local. Les widgets ajoutés, déplacés, modifiés et supprimés sont appliqués comme un plan de mise en page commun seulement avec Enregistrer. Annuler abandonne le brouillon de mise en page.
Si vous changez de modèle ou fermez l’éditeur avec des modifications de mise en page non enregistrées, edoobox vous demande si vous souhaitez revenir, abandonner ou enregistrer. Les paramètres des widgets disposent aussi de leur propre état d’enregistrement et avertissent en cas de fermeture avec des modifications non enregistrées.
Respecter les étapes d’enregistrement : enregistrez d’abord les nouveaux widgets avec la mise en page, puis leurs paramètres spécifiques dans la fenêtre contextuelle. Pour les widgets existants, confirmez les modifications spécifiques ouvertes, puis le brouillon de mise en page encore en attente. Examinez toutes les erreurs d’enregistrement et vérifiez l’aperçu public uniquement après une application réussie.
Bien utiliser les paramètres propres aux widgets
Selon le widget, vous pouvez configurer les textes, le tri, les listes, cartes, champs de formulaire, moyens de paiement, contenus juridiques ou libellés de boutons. Les widgets multilingues utilisent la langue sélectionnée ; renseignez et testez chaque texte visible dans toutes les langues actives.
Un bloc de texte convient aux explications courtes, mais ne remplace pas un widget fonctionnel essentiel. Ne supprimez pas, par exemple, les fonctions de catégorie de prix, date, participant ou finalisation simplement parce qu’un texte personnalisé décrit la même étape.
Garder l’en-tête et le pied de page sobres
Les zones récurrentes accompagnent chaque étape de réservation. Un en-tête compact peut contenir le logo, la navigation, le choix de langue et le compte des participants. Le pied de page convient aux textes juridiques, à la confidentialité, à la bannière de cookies et à une navigation complémentaire discrète.
Le widget de code s’adresse aux responsables expérimentés. Vérifiez votre code sur mobile, avec le consentement aux cookies, dans toutes les langues et selon les politiques de sécurité applicables. Les scripts externes ne doivent pas bloquer la finalisation de la réservation.
Tester l’intégralité du processus de réservation
Ouvrir l’aperçu public d’une offre de démonstration précise.
Vérifier les vues ordinateur, tablette et mobile.
Selon votre utilisation, tester une offre simple, la liste d’attente, la réservation de leçons, l’inscription groupée et une offre multiple.
Déclencher les champs obligatoires, validations, connexion, textes juridiques et états d’erreur.
Parcourir le paiement et la page de finalisation jusqu’au bout.
Après chaque modification, enregistrer le widget et la mise en page, recharger l’aperçu et documenter le résultat.
Exemple : créer un design de cours à partir du design initial
Une école de langues copie le design initial, affecte la copie uniquement à la catégorie « Cours de langues » et ajoute dans la vue d’ensemble un filtre par tag pour le niveau. Après enregistrement, elle vérifie une offre A1 et une offre C1 dans l’aperçu public.
Exemple : raccourcir la réservation mobile
Sur ordinateur, la page de détail de l’offre affiche une carte, un widget social et des informations complémentaires détaillées. Sur mobile, seuls la carte et le widget social sont masqués ; le nom, les dates, prix, disponibilités et le bouton d’inscription restent visibles. Le parcours de réservation est ensuite testé intégralement sur un vrai smartphone.
Exemple : enregistrer une modification de mise en page et le texte d’un widget
Un administrateur modifie le texte du bouton d’inscription et déplace le widget. Il enregistre d’abord les paramètres du widget, puis le brouillon de mise en page. Aucun avertissement n’apparaît lorsqu’il passe au modèle suivant. Dans l’aperçu, il vérifie le libellé et la position.
Inclure les nouveaux parcours clients dans le design
Complétez les étapes de réservation habituelles par les pages effectivement utilisées par vos fonctions. La zone d’attente apparaît avant l’inscription proprement dite, l’enregistrement d’une place après une invitation pour une place réservée dans une inscription groupée, et la validation de certificat via le lien prévu sur le certificat.
Pour les abonnements des participants, modifiez le catalogue, le paiement d’abonnement, la navigation, Mes abonnements et la sélection d’abonnement du récapitulatif de réservation. Suivez Concevoir les abonnements et l’espace client. La création et la validité des formules se gèrent dans le gestionnaire d’abonnements.
Avant d’affecter le design, ouvrez chaque parcours utilisé avec l’état de test approprié : déconnecté, connecté, sans abonnement, avec abonnement valide, avec place réservée non nommée ou paiement en attente. Un aperçu d’éditeur rempli ne remplace pas ce contrôle.
Concevoir la finalisation classique ou le panier
Pour votre design personnalisé, vérifiez aussi la vue de réservation : dans le parcours classique, l’action de finalisation mène à la réservation ou au paiement prévu ; la variante avec adhésions ouvre d’abord le panier. Un libellé de bouton libre ne change pas ce parcours. Configurez le mode et la navigation à l’aide de Panier et action de finalisation et vérifiez le parcours des détails de l’offre jusqu’à l’état réel de la réservation.