Relier un clic ou un événement à une action

Un événement décrit le geste du visiteur : cliquer sur un bouton, placer le pointeur sur un élément ou atteindre une zone de la page. Une action décrit le résultat attendu. Pour ouvrir une page, un lien simple suffit souvent ; un workflow est utile lorsque vous avez besoin d’une suite d’actions.

1. Sélectionner le bon élément

Dans Design, passez en Expert et sélectionnez le bouton ou l’élément concerné. Dans cet exemple, il s’agit de Trouver ma séance sur la page d’accueil du studio fictif Alma. Nous utilisons les commandes nocode du panneau, sans saisir de classes CSS.

Dans Événements, ajoutez un événement. Ouvrez ensuite la ligne de l’action créée pour accéder au workflow. Vérifiez que vous avez sélectionné le bouton lui-même, plutôt que le bloc entier : la portée de l’action en dépend.

2. Choisir le déclencheur

Le premier nœud est un déclencheur de clic. Dans Événement, choisissez le geste voulu parmi les options disponibles pour l’élément. Un bouton propose notamment Click, Hover, Focus et Visible. Les champs et formulaires possèdent leurs propres options.

Click est le choix adapté au bouton de la démonstration. Hover dépend du survol et ne constitue pas un geste fiable pour un écran tactile. Pour une action essentielle sur mobile, prévoyez un clic ou une commande visible.

L’option Arrêter la propagation empêche le même événement de remonter aux éléments parents. Ne l’activez pas sans besoin précis : elle peut empêcher une autre interaction de recevoir ce clic. Pour un formulaire, Prevent Default concerne le comportement normal de soumission ; ne l’utilisez pas comme un remplacement de la configuration de destination.

3. Ajouter le résultat attendu

Dans le workflow, cliquez sur Ajouter un nœud, ouvrez Actions puis choisissez Redirect. Dans URL de destination, renseignez une page existante, comme /seances.

Reliez la poignée de sortie du déclencheur à la poignée d’entrée de la redirection. Deux cartes simplement placées côte à côte ne forment pas une suite d’actions. La ligne entre elles indique leur connexion.

4. Vérifier sur le site publié

Fermez le workflow et enregistrez le design. Rechargez le builder pour vérifier le réglage et la connexion, puis publiez le site. Dans son aperçu visiteur, cliquez sur le bouton : la page de destination doit réellement s’ouvrir.

Le builder simule certaines actions, dont la redirection, afin de ne pas vous faire quitter l’éditeur. Une indication de résultat dans son aperçu n’est donc pas une preuve de navigation réelle. La démonstration Alma vérifie une navigation réelle vers la page des séances, dans une session visiteur, sur ordinateur et sur un écran étroit. La vidéo du site publié montre le bouton avant le clic et la page atteinte après le clic. Refaites ce contrôle après avoir changé le bouton, la connexion ou la destination.

5. Retirer une interaction et annuler

Survolez la ligne de l’action dans Événements. Cliquez sur la petite commande de retrait pour détacher le workflow de cet élément. La ligne disparaît. Cette opération ne signifie pas que tous les workflows du projet ont été supprimés.

Si vous avez retiré la mauvaise interaction, utilisez Annuler dans la barre du builder : la ligne revient. Enregistrez lorsque le résultat convient, puis vérifiez de nouveau l’élément sur le site publié.

Pour lire et organiser le graphe, consultez Construire un workflow visuel. Pour agir à l’apparition d’un élément, consultez les déclencheurs.