Concevoir le processus de réservation avec le Design Manager

Avec le Design Manager, les différentes étapes de réservation dans l'iFrame peuvent être conçues de manière largement flexible par vous-même. C'est à vous de décider quelles informations de l'offre doivent être visibles pour la personne qui réserve dans le frontend, et vous avez la liberté de définir de manière autonome l'apparence visuelle du processus de réservation.

Il est possible de définir un design spécifique pour chaque catégorie principale - et pour les utilisateurs expérimentés, pour chaque sous-catégorie. Cela permet d'adapter les modèles (par exemple le formulaire de participation) et les widgets (par exemple les champs de formulaire et les blocs de texte) à une offre spécifique.

Veuillez noter que : Page de clôture

Le modèle Page de clôture tire toujours ses paramètres du design standard.

Aperçu : Design Manager

Le Design Manager se trouve dans la navigation principale du menu de l'application.

Conseil : voir immédiatement les adaptations effectuées

Pour vérifier directement les adaptations que vous avez faites dans le Design Manager, sélectionnez d'abord une offre spécifique et naviguez vers "Aperçu - Partager" pour ouvrir la vue standard. Démarrez ensuite le Design Manager. Dans le navigateur, vous pouvez alors passer sans problème de l'onglet du navigateur à l'aperçu et au Design Manager. Pour visualiser la dernière version dans l'aperçu, utilisez le bouton Actualiser (ou appuyez sur la touche de fonction F5).

Une fois arrivé dans le Design Manager, les éléments centraux de l'outil sont à votre disposition : le design A lui-même, les modèles B et les widgets C.

Les modèles sont divisés en trois parties : l'en-tête, le corps et le pied de page. Les modèles de la zone "Body" représentent le processus de réservation par lequel passe une personne qui effectue une réservation. Chaque fois que l'on passe à un autre modèle, la sélection des widgets disponibles sur le côté droit change en conséquence, car chaque modèle dispose de différents widgets.

Créer un nouveau design

Le design edoobox Start ne peut pas être modifié, il est adapté à toutes les réservations avec des exigences normales. Vous avez d'autres besoins et souhaitez personnaliser le processus de réservation ? Alors nous vous recommandons de créer un nouveau design.

Pour créer un nouveau design, il suffit de cliquer sur "+ Ajouter un design" D. Le nouveau design est toujours une copie d'un design existant. Donnez un nouveau nom à la copie et sélectionnez le design qui doit être copié. Vous pouvez définir le design ainsi créé comme standard pour toutes les offres ou l'attribuer spécifiquement à une catégorie particulière. Marquez le design que vous utilisez le plus souvent en cochant la case "Définir comme design par défaut".

Catégories avec ce design

Chaque design peut être attribué à différentes catégories. Choisissez ici pour quelles catégories le design actuellement ouvert peut être utilisé.

Conception pour différents périphériques de sortie

Dans le Design Manager, vous avez la possibilité d'adapter les modèles à divers appareils comme les ordinateurs, les tablettes et les smartphones. Selon la taille de l'écran, l'iFrame choisit la représentation correspondante. Dans la représentation pour smartphone, les widgets moins importants peuvent être omis.

Dans le design edoobox Start, l'iFrame est entièrement responsive et s'adapte à la largeur du périphérique de sortie.

Bookingflow (processus de réservation à l'aide de modèles)

Pour chaque étape du bookingflow, de l'aperçu de l'offre au résumé en passant par l'inscription et le paiement, il existe un modèle propre qui peut être édité individuellement. Pour accéder aux modèles disponibles dans le body, il suffit de cliquer sur "Modèle | Body" E. Tous les modèles disponibles dans la zone body s'affichent alors en dessous. Sélectionnez ensuite le modèle que vous souhaitez modifier. Le modèle sélectionné s'affiche au centre de l'écran pour que vous puissiez le modifier.

Disposition du widget

Lorsqu'un modèle est sélectionné, les widgets F spécifiques à chaque modèle apparaissent dans la colonne de droite. Vous insérez de nouveaux widgets dans l'espace de travail par glisser-déposer. Vous pouvez également adapter la position des widgets dans la zone de travail par glisser-déposer. Les symboles plus (+) et moins (-) permettent d'agrandir ou de réduire la largeur des widgets correspondants. Des options d'adaptation supplémentaires sont disponibles en fonction du type de widget. Vous pouvez accéder à ces réglages soit en double-cliquant sur le widget, soit en cliquant sur le symbole de la roue dentée. Pour supprimer un widget de votre design, utilisez l'icône en forme de croix (x).

Astuce : créer une vue en tuiles

Vous pouvez présenter en premier lieu à vos visiteurs les catégories d'offres avec des images (vue en tuiles), de sorte qu'elles puissent être sélectionnées et que seules les offres spécifiques de la catégorie choisie soient affichées. Actuellement, seules les instructions pour la version 1 sont disponibles. Instructions pour la mise en place de l'affichage en mosaïque dans le Designmanager

Paramètres du widget

Les paramètres de tous les widgets peuvent être ouverts, comme expliqué précédemment, mais tous les widgets ne disposent pas du même nombre d'options de configuration. Les réglages qui peuvent être effectués pour tous les widgets comprennent les "réglages généraux" G pour l'orientation, l'ajustement de la hauteur et les options d'affichage, qui se trouvent respectivement sur le côté droit de la fenêtre. Les "paramètres spécifiques au widget" H se trouvent sur le côté gauche de la fenêtre. Si des données spécifiques peuvent être sélectionnées au sein d'un widget, il est également possible de les adapter dans leur ordre par glisser-déposer.

Remarque : options d'affichage

Dans tous les paramètres du widget, vous trouverez dans la colonne de droite tout en bas le paramètre "Visibilité pour les participants" I, dans lequel vous pouvez définir si le widget doit être visible pour tous les visiteurs, uniquement pour les visiteurs inscrits ou pour les participants inscrits à cette offre.

En-tête / Pied de page

Dans l'en-tête et le pied de page, vous ne disposez que d'un seul modèle. Ces deux modèles apparaissent de manière cohérente dans l'en-tête ou le pied de page de tous les autres modèles et sont donc conçus pour des informations statiques qui doivent être présentes tout au long du processus de comptabilisation.

Par exemple, l'en-tête offre la possibilité d'insérer le widget "menu de navigation" J. Dans ce widget, vous pouvez entre autres définir si les personnes qui s'inscrivent peuvent changer la langue de la page d'inscription ou se connecter à leur compte de participant. L'en-tête est également idéal pour ajouter le logo de votre entreprise, qui sera ensuite affiché tout au long du processus de réservation. Pour ce faire, insérez le widget "bloc de texte" K dans le modèle. Dans ce widget, vous disposez d'un éditeur avec lequel vous pouvez aussi bien rédiger du texte que télécharger des images.

Si vous avez des connaissances en CSS ou JavaScript et que vous souhaitez personnaliser encore plus le processus de réservation, le "widget code" L en bas de page est idéal. Dans ce widget, vous pouvez insérer votre propre code afin de personnaliser davantage le design et le comportement du processus de réservation.

Le widget "Bannière de cookies" M est disponible uniquement dans le pied de page. Si vous intégrez ce widget, les personnes qui réservent ont la possibilité d'accepter ou de refuser les cookies de suivi.

Dans les deux modèles - aussi bien dans l'en-tête que dans le pied de page - vous avez en outre l'option d'insérer le widget "Bouton de vente de bons", qui redirige la personne effectuant la réservation directement vers le modèle "Vente de bons". L'avantage de placer ce bouton dans l'en-tête ou le pied de page est que les clients se voient proposer la vente de bons sur chaque page du processus de réservation, ce qui augmente la visibilité et l'accessibilité de cette offre.

Tutoriels associés

• Modèle | Body - Appel d'offres - 1 Aperçu des offres

• Widgets disponibles dans le modèle Page de clôture

• Modèle | En-tête et Modèle | Pied de page

Mots-clés pour ce guide

Bookingflow ¦ Processus de réservation ¦ Bannière de cookie ¦ Design Manager ¦ Widget de code ¦ En-tête et pied de page