Modèle : détails de l’offre

Les illustrations montrent une version antérieure de l'interface. Utilisez les étapes de ce guide pour les fonctions et options disponibles.

Le modèle Détails de l’offre contient les widgets qui permettent de concevoir la page publique de détail d’une offre. C’est ici que les visiteurs doivent comprendre le contenu, les dates, le lieu, le prix, les responsables et l’étape suivante de l’inscription.

Les widgets de détail d’offre suivent les mêmes règles de grille, largeur et points de rupture que les autres modèles du Design Manager. Placez les informations essentielles en haut et vérifiez l’affichage sur ordinateur et smartphone.

Widgets essentiels de la page de détail d’offre

Modèle de détail d’offre avec widgets repérés de A à M — La vue d’ensemble repérée aide à situer les composants d’une page de détail d’offre. Les anciens composants sociaux H et I dépendent du design utilisé et du service externe.
A
Titre de l’offre
B
Informations essentielles de l’offre
C
Accéder directement à l’inscription
D
Description de la catégorie et de l’offre
E
Afficher les leçons et modules
F
Carte du lieu de la session
G
Vue publique des participants
H
Composant social des designs existants
I
Fans Facebook des designs existants
J
Sous-offres d’une offre multiple
K
Démarrer une demande
L
Indications et images libres
M
Ouvrir la vente de bons

Widget	Tâche	Paramètres importants
Nom de l’offre	Affiche le titre de l’offre	Taille du texte normale, titre 3, titre 2 ou titre 1
Détails de l'offre	Affiche les données de l’offre telles que numéro, places disponibles, date, lieu, prix et contact	Choix des informations visibles, ligne supplémentaire pour les tags avec valeurs
Bouton d’inscription	Mène au formulaire d’inscription	Texte et couleur du bouton pour la réservation normale et la liste d’attente
Description	Affiche la description de la catégorie et de l’offre	Utilise les paramètres généraux des widgets
Vue d’ensemble des leçons/modules	Répertorie les dates, modules ou leçons	Colonnes, dates passées, ligne actuelle et tableau adaptatif
Google Maps	Affiche le lieu de la première leçon ou du premier module	Zoom, repère, type de carte et style de carte

Planifier le choix des widgets

La page de détail d’offre doit donner aux participants suffisamment de confiance pour s’inscrire. Placez donc en premier le nom de l’offre, les informations essentielles, la description et le bouton d’inscription. Les widgets supplémentaires tels qu’une carte, des liens sociaux ou la vente de bons devraient aider à décider sans détourner l’attention de l’étape suivante.

Si une offre se compose de modules, de leçons ou d’offres multiples, ces informations devraient apparaître avant le bouton d’inscription ou bien visiblement en dessous. Les participants doivent comprendre ce qu’ils réservent et quelles dates sont incluses.

Nom de l’offre, détails et bouton d’inscription

Nom de l’offre affiche le titre de l’offre dans la taille de texte choisie. Évitez les titres principaux en double si le titre est déjà mis en avant ailleurs.

Détails de l’offre peut afficher de manière ciblée des informations telles que le numéro d’offre, les places disponibles, la date, le lieu, le prix, le contact, la date limite d’inscription ou des valeurs de tags supplémentaires. Pour des indications particulières comme la langue, le niveau ou le groupe cible, les tags avec valeurs peuvent être utiles. Choisissez uniquement les informations réellement nécessaires aux personnes qui réservent.

La ligne supplémentaire des tags avec valeurs convient aux indications compactes qui ne doivent pas se perdre dans la description. Il peut s’agir de la langue d’enseignement, du niveau de difficulté, du groupe cible, d’une indication de matériel ou du format du cours. Vérifiez l’affichage dans l’aperçu, car trop de valeurs de détail peuvent surcharger la première vue.

Le bouton d’inscription mène au formulaire d’inscription. Vous pouvez adapter le texte « S’inscrire maintenant » et la couleur. Si la liste d’attente est active et que l’offre est complète, le texte et la couleur de « S’inscrire sur la liste d’attente » peuvent être définis séparément.

Textes des boutons et logique de statut

Le bouton d’inscription peut recevoir des textes et couleurs différents selon le statut. Outre « S’inscrire maintenant », les états liste d’attente, demande ou fermé peuvent être pertinents, par exemple. Vérifiez ces états avec de véritables offres de démonstration pour éviter que les participants ne cliquent sur un bouton ambigu.

Le widget Détails de l’offre peut afficher le numéro d’offre, les places disponibles, la date, le lieu, le prix ou le contact. Une valeur de tag peut aussi être intégrée sur une ligne propre, par exemple la langue du cours, le niveau ou le format de la session. Pour en savoir plus, consultez Utiliser les tags avec valeurs.

Afficher une adresse e-mail cliquable

Dans le Design Manager, ouvrez Body → Détails de l’offre et les paramètres du widget Détails de l’offre. Ajoutez E-mail dans la sélection des lignes visibles, enregistrez et ouvrez la page publique de détail. Cette ligne d’e-mail distincte affiche l’adresse de l’organisation comme lien mailto: avec le nom de l’offre en objet. Elle est séparée de la ligne générale de contact et du contact du responsable de cours.

L’adresse du contact du responsable de cours est affichée en texte dans ce widget. Pour un autre contact fixe, vous pouvez utiliser un bloc de texte : sélectionnez un texte tel que « Poser une question sur le cours », choisissez Insérer un lien et saisissez par exemple mailto:kurse@example.org. Le bloc de texte est un contenu fixe du design et ne reprend pas automatiquement une autre adresse de responsable selon l’offre. Vérifiez toutes les langues et les vues mobiles. Un lien e-mail ouvre le logiciel de messagerie configuré sur l’appareil ; le site web n’envoie lui-même aucun message par ce moyen.

Réduire les indications de prix pour les offres gratuites

Dans les paramètres de Détails de l’offre, retirez les lignes de prix inutiles, par exemple la fourchette de prix, le prix ou les catégories de prix, puis enregistrez. La sélection s’applique à chaque offre utilisant ce design et ce widget. Ce n’est pas une règle automatique réservée aux prix nuls et elle ne modifie pas le calcul réel du prix.

Pour un espace d’offres gratuites distinct, vous pouvez utiliser un design de catégorie sans lignes de prix et préciser « Participation gratuite » dans la description appropriée. Pour des offres mixtes, conservez les informations tarifaires nécessaires. Contrôlez aussi les colonnes de prix de la vue d’ensemble et le parcours réel d’inscription.

Harmoniser l’inscription externe dans le détail et la vue d’ensemble

Le bouton normal d’inscription démarre l’inscription à l’offre choisie. Si le nom de tag spécial redirect est attribué à cette offre avec une URL de destination complète et valide comme valeur, ce démarrage est redirigé vers le site externe. La configuration complète et la contre-vérification s’appliquent aussi à la page de détail.

Un texte de bouton modifié ou une valeur de tag quelconque ne remplace pas l’adresse de destination. Vérifiez le lien direct de l’offre, l’accès depuis la vue d’ensemble et les mêmes parcours avec un filtre de tags actif. Un lien de texte libre vers le site externe peut fournir une information supplémentaire ; il ne configure pas de finalisation de réservation edoobox.

Description, leçons/modules et Google Maps

Le widget Description affiche les descriptions de la catégorie et de l’offre si les deux sont renseignées. Les contenus eux-mêmes sont modifiés dans l’offre ou la catégorie. Les détails figurent dans Descriptions dans les offres et catégories.

La vue d’ensemble des leçons/modules affiche les dates, modules ou leçons individuels. Vous pouvez ajouter ou retirer des colonnes telles que responsable, lieu, date ou heure. Pour les offres continues, masquer les dates passées est souvent pertinent. Si elles restent visibles, la ligne actuelle peut être mise en évidence. Activez le tableau adaptatif pour les appareils mobiles.

Pour les événements individuels courts, une indication succincte de date dans les détails de l’offre suffit souvent. Pour les cours comportant plusieurs modules, séries, ateliers ou composantes de congrès, la vue d’ensemble des leçons/modules est nettement plus claire, car les participants peuvent vérifier les dates et lieux avant la réservation.

Google Maps affiche le lieu de la première leçon ou du premier module. Vérifiez le niveau de zoom, le repère, le type de carte et le style. Pour les lieux des sessions, la saisie correcte de l’adresse est essentielle. Pour en savoir plus, consultez Lieux des sessions.

La vue d’ensemble des participants affiche les personnes déjà inscrites. Les personnes pouvant voir cette liste dépendent des paramètres généraux de visibilité du widget. Vérifiez en étant connecté et déconnecté. Utilisez le moins possible de données personnelles, par exemple le prénom seul ou accompagné de l’initiale du nom. Les champs personnalisés des participants peuvent aussi être affichés, mais nécessitent une vérification particulièrement attentive.

Le widget social propose des boutons de partage selon le style Bootstrap utilisé. Vous choisissez les logos avec ou sans compteur et l’URL à partager. Vérifiez les plateformes de l’affichage réellement chargé. Fans Facebook peut afficher une page Facebook avec une fonction J’aime ; renseignez pour cela l’URL de votre page Facebook.

Le tableau des offres multiples ne s’affiche que si l’offre est une offre multiple. Il répertorie les offres associées et utilise principalement les paramètres standard des widgets. Les bases figurent dans Offre multiple / module de congrès.

Affichage	Plateformes prévues dans le widget
Bootstrap 5.3	Facebook, X et LinkedIn.
Ancien affichage Bootstrap	Xing, Facebook, X/Twitter et LinkedIn.

Une sélection Xing encore présente dans l’éditeur ne génère pas de bouton Xing dans le widget Bootstrap 5.3. Instagram n’est pas proposé ici comme bouton de partage. Pour un lien fixe vers votre propre profil, utilisez au besoin un bloc de texte avec un hyperlien normal ; il ne s’agit pas d’une boîte de dialogue automatique de partage.

Vérifiez le style Bootstrap du design réellement attribué.
Ouvrez le widget social, choisissez les plateformes appropriées et l’URL à partager, puis enregistrez.
Vérifiez la page publique de détail et la vue intégrée avec les paramètres de cookies et de navigateur utilisés. Les scripts de plateformes externes et les blocages du navigateur peuvent influer sur l’affichage.
Après un changement de style, comparez de nouveau tous les boutons et le lien d’offre partagé.

Sous-offres complètes : distinguer information et sélection

Pour les offres multiples, vérifiez séparément le tableau public et le choix réel des sous-offres. Une information visible sur un atelier complet ne le rend pas de nouveau réservable. L’option de dépliage par défaut détermine uniquement l’affichage initial. Le guide des offres multiples explique quelles entrées complètes sont prises en compte dans le détail et la sélection, ainsi que les limites applicables. Vérifiez les places disponibles, les tarifs complets et la liste d’attente dans le véritable parcours de réservation.

Utiliser délibérément les widgets internes et sociaux

La vue d’ensemble des participants peut être utile en interne, mais ne devrait être affichée que si elle convient sur le fond et du point de vue de la protection des données. Le widget social et Fans Facebook peuvent accroître la portée, mais deviennent rapidement distrayants dans le processus de réservation lui-même.

Pour Google Maps, les lieux doivent être correctement renseignés et les services cartographiques externes peuvent entraîner des exigences de protection des données ou de consentement. Testez donc la page de détail avec et sans consentement aux cookies.

Bouton de demande, bloc de texte et vente de bons

Le bouton de demande est utilisé lorsque vous travaillez avec une liste de demandes. Associez d’abord la liste souhaitée, adaptez le texte et la couleur du bouton et renseignez les traductions de toutes les langues actives. Le texte de la page de récapitulatif peut aussi être adapté.

Le bloc de texte insère des textes multilingues, images ou indications à n’importe quel endroit. Vous pouvez définir si le texte apparaît uniquement lors d’un accès direct à edoobox ou également dans l’intégration iFrame.

Utilisez les blocs de texte pour de brèves informations supplémentaires telles que la préparation, le point de rendez-vous, le matériel, la restauration ou des indications internes destinées à un groupe fermé. Les descriptions longues restent dans la description de l’offre ou de la catégorie afin de conserver leur cohérence dans les autres vues.

Le bouton de vente de bons mène à la page de vente de bons. Vous modifiez cette page dans le Design Manager, sous Modèle | Body, parmi les autres pages. Le texte du bouton, la couleur, les valeurs des bons, la valeur par défaut et la devise peuvent être adaptés. La personne qui réserve ne peut pas saisir librement une valeur de bon quelconque ; vous définissez les valeurs sélectionnables.

Le paramètre Mode d’application comporte deux variantes importantes. Réduction du prix de l’offre convient si le bon ne doit pas s’appliquer aux prestations complémentaires. Application au total de réservation est plus large et peut influer sur le total de réservation. Les catégories de prix d’une offre peuvent aussi être proposées comme valeurs de bons. Les bases figurent dans Bons vendus.

Testez toujours la vente de bons avec la page publique de détail, la page du bon et la confirmation. Vous verrez ainsi si la valeur par défaut, la devise, les catégories de prix, le texte du bouton et le mode d’application correspondent au processus de vente souhaité.

Ordre des widgets et affichage mobile

L’ordre des widgets est déterminant. Sur ordinateur, plusieurs informations peuvent être disposées côte à côte ; sur smartphone, elles apparaissent souvent les unes sous les autres. Placez donc d’abord le titre, les informations essentielles et l’inscription, puis la description, les dates, le lieu et les éléments complémentaires.

Les grandes cartes, widgets sociaux, listes de participants ou longs tableaux ne devraient pas précéder la décision d’inscription proprement dite. Pour une offre comportant plusieurs modules, la vue des dates peut être importante ; pour un simple cours d’une journée, une courte ligne de détail avec une description suffit souvent.

Après chaque modification, vérifiez sur ordinateur, tablette et smartphone. Assurez-vous que le texte des boutons, les colonnes de tableau, Google Maps et les blocs de texte sont lisibles sans défilement horizontal. La largeur disponible peut être inférieure à celle du Design Manager, notamment dans les intégrations iFrame.

Si vous utilisez plusieurs designs ou langues, testez le modèle dans chaque combinaison pertinente. Les traductions longues, textes de boutons différents et formats de date variés peuvent modifier la mise en page davantage que la vue standard ne le laisse penser.

Liste de contrôle pour de bons détails d’offre

Le titre est explicite et ne s’affiche pas deux fois en très grand.
Le prix, le lieu, la date, les places disponibles, le responsable et l’action d’inscription sont faciles à trouver.
Le bouton d’inscription ou de demande est visible sans long défilement.
Les modules et tableaux sont lisibles sur mobile.
La vue d’ensemble des participants affiche uniquement des données conformes à la protection des données.
Les widgets sociaux ne détournent pas l’attention de la décision de réservation.
La liste d’attente, la liste de demandes, les offres internes, les offres multiples et la vente de bons ont été testées séparément.

Exemple d’utilisation : page de détail d’un séminaire

Un séminaire affiche le nom de l’offre, la description, le lieu, le responsable, les dates, le prix et le bouton d’inscription. Un bloc de texte supplémentaire explique la préparation. La vue d’ensemble des participants est omise, car l’offre est publique. Le bouton d’inscription reste visible directement sous les informations essentielles.

Exemple d’utilisation : offre avec libre choix des dates

Une offre de fitness affiche le nom, la fourchette de prix, les prochaines dates et le bouton d’inscription. Le choix détaillé des leçons n’intervient qu’à l’étape d’inscription appropriée. Sur mobile, le bouton d’inscription reste visible tandis qu’une grande carte est masquée.

Exemple d’utilisation : indication interne réservée aux personnes autorisées

Un bloc de texte contenant une indication aux collaborateurs est restreint par les tags des participants. L’équipe le teste en étant connectée avec et sans les tags nécessaires, ainsi que sans connexion. Les données publiques de l’offre et le bouton d’inscription restent compréhensibles indépendamment de cela.

Ajouter l’image de l’offre, les enseignants et les abonnements

Pour Bootstrap 5.3, vous pouvez placer le widget Image de l’offre indépendamment du titre et de la description. Choisissez une résolution d’image de 300, 600 ou 900 pixels et, au besoin, les classes d’image Bootstrap proposées. Le widget remplit son espace sans déformation ; il est masqué si aucune image d’offre n’est enregistrée. Détails : Nouveaux widgets d’image et d’information.

Détails des enseignants affiche les cartes des enseignants attribués à l’offre. L’image ou les initiales, la description, l’e-mail et le téléphone peuvent être affichés séparément. Une description dans une autre langue doit être renseignée en conséquence ; publiez les coordonnées délibérément.

Si le plugin d’abonnement est actif, un catalogue d’abonnements peut aussi figurer sur la page de détail d’offre. Il explique les formules disponibles ; la possibilité de réserver une catégorie de prix précise est définie dans sa restriction par abonnement. Placez le catalogue là où les personnes intéressées peuvent comprendre le prix et l’utilité avant de réserver. Le guide du design des abonnements décrit le catalogue et la finalisation.

Si une image, un texte ou une action de réservation manque

Vérifiez d’abord le design de la catégorie précise et l’autorisation publique de l’offre. Un bouton d’inscription suit le statut, la période et la capacité de l’offre. Un texte de bouton personnalisé ou une carte d’image supplémentaire ne désactive pas ces règles.

Pour le bloc de texte, l’option iFrame signifie : affichage lors d’un accès direct à edoobox ou aussi dans l’intégration. Les données sources correspondantes doivent exister pour les images et les cartes d’enseignants. N’ajoutez un catalogue public d’abonnements que si le plugin est activé et les formules publiées ; la restriction d’une catégorie de prix par abonnement doit toujours être configurée séparément dans Catégories de prix.

Vérifier les plateformes sociales selon le style Bootstrap

Sous-offres complètes : distinguer information et sélection