AX - Bouton
Aperçu
AX - Bouton est un composant Experience Cloud qui crée des boutons cliquables sur les pages des sites Experience pour déclencher des actions telles que la navigation, l'envoi de formulaires, la création d'enregistrements ou l'ouverture de fenêtres modales.
Utilisez-le pour ajouter des appels à l'action personnalisés, envoyer des formulaires, naviguer vers des pages spécifiques, créer des enregistrements ou déclencher des flows. Configurez le libellé, le style, l'icône et l'action du bouton dans Experience Builder, sans code.
Idéal pour les CTA de portail, la navigation personnalisée, les actions « Contactez-nous », les workflows de création d’enregistrements ou toute interaction utilisateur nécessitant un bouton clair et aux couleurs de la marque.
Configurer votre bouton
Après avoir fait glisser AX - Button sur votre page dans Experience Builder, vous configurerez deux éléments principaux : l'apparence du bouton et ce qui se passe lorsque les utilisateurs cliquent dessus.
Apparence du bouton
Ces paramètres contrôlent l'apparence de votre bouton sur la page.
Libellé – Le texte affiché sur le bouton. Gardez-le court et orienté vers l’action (par ex. « Envoyer la demande », « Voir les détails », « Contactez-nous »).
Nom de l’icône – Ajoutez une icône à côté du libellé pour aider les utilisateurs à comprendre rapidement l'action. Choisissez dans la bibliothèque d'icônes de Salesforce — les choix courants incluent « utility:download » pour les téléchargements ou « utility:email » pour les actions de contact.
Position de l’icône – Placez l'icône à gauche ou à droite du libellé. Le positionnement à gauche fonctionne bien dans la plupart des cas, tandis que le positionnement à droite peut indiquer une navigation vers la page suivante.
Variante – Le style visuel du bouton. Les options incluent généralement principal (en gras, accrocheur), secondaire (discret) ou destructif (rouge, pour les actions de suppression). Choisissez-le en fonction de l'importance de l'action.
Alignement horizontal – Positionnez le bouton dans son conteneur : à gauche, au centre ou à droite. L'alignement centré fonctionne bien pour les CTA autonomes, tandis que l'alignement à gauche convient aux boutons de formulaire.
Étirement – Lorsqu'elle est activée, cette option permet au bouton de s'étendre pour remplir toute la largeur de son conteneur. Utilisez-la pour les CTA mis en avant ou lorsque vous souhaitez que le bouton corresponde à la largeur des champs de formulaire situés au-dessus.
Désactivé – Empêche les utilisateurs de cliquer sur le bouton. Utilisez cette option lorsqu'une action n'est pas encore disponible, par exemple en désactivant un bouton « Envoyer » tant que les champs obligatoires ne sont pas remplis
Actions du bouton (Lien vers)
La Lien vers Ce paramètre détermine ce qui se passe lorsque les utilisateurs cliquent sur le bouton. Choisissez le type d'action qui correspond à ce que vous souhaitez accomplir.
Affiche un bref message de notification qui apparaît en haut de la page et disparaît après quelques secondes.
Quand l'utiliser : des messages de confirmation comme « Modifications enregistrées » ou « Demande envoyée » qui ne nécessitent aucune action de l'utilisateur. Les toasts fournissent un retour d'information sans interrompre le flux de travail de l'utilisateur.
Redirige les utilisateurs vers une autre page, soit dans votre site Experience, soit vers une URL externe.
Quand l'utiliser : les boutons « En savoir plus » qui mènent à des pages de détail, la navigation « Retour à l'accueil » ou les liens vers des ressources externes. Vous pouvez naviguer vers des pages standard, des pages d'enregistrement ou des URL personnalisées.
Ouvre une fenêtre contextuelle avec un message que les utilisateurs doivent confirmer avant de continuer.
Quand l'utiliser : les messages importants que les utilisateurs doivent lire, comme les conditions générales, les mentions de confidentialité ou les avertissements avant qu'ils n'effectuent une action.
Affiche une boîte de dialogue de confirmation demandant aux utilisateurs de confirmer ou d'annuler leur action.
Quand l'utiliser : les actions aux conséquences irréversibles, comme la suppression d'un enregistrement, l'annulation d'une soumission ou le retrait d'un accès. La boîte de dialogue permet aux utilisateurs de reconsidérer leur choix avant de continuer.
Lance un Flow Salesforce dans une fenêtre modale contextuelle.
Quand l'utiliser : les processus en plusieurs étapes tels que la soumission d'un dossier d'assistance, le remplissage d'une enquête, la mise à jour des informations du compte ou tout autre workflow guidé. Créez le flow dans Flow Builder, puis associez-le au bouton — le flow s'exécute dans la fenêtre modale sans quitter la page actuelle
Spécifications
Libellé
Définissez le texte affiché sur le bouton.
Saisissez un libellé concis et clair qui indique à l'utilisateur l'action du bouton.
Nom de l’icône
Choisissez une icône à afficher sur le bouton.
Sélectionnez une icône appropriée qui représente visuellement l'action du bouton et améliore la compréhension de l'utilisateur.
Position de l’icône
Déterminez la position de l'icône dans le bouton.
Choisissez une position qui équilibre visuellement le bouton et s'harmonise avec la direction de conception de votre page Web.
Variante
Sélectionnez une variante de style prédéfinie pour le bouton.
Choisissez une variante adaptée au contexte de l'action du bouton et au langage de conception global de la page Web.
Alignement horizontal
Définissez l'alignement horizontal du bouton dans son conteneur.
Alignez le bouton pour obtenir une harmonie visuelle et respecter les exigences de mise en page de la page Web.
Étirement
Déterminez si le bouton doit s'étendre pour remplir son conteneur.
Activez cette option pour que le bouton s'étende horizontalement et remplisse l'espace disponible dans son conteneur.
Désactivé
Contrôlez l'état actif ou désactivé du bouton.
Désactivez le bouton pour empêcher toute interaction utilisateur, ce qui est utile lorsqu'une certaine action n'est pas applicable ou doit être temporairement empêchée.
Espacement (Haut, Bas, Gauche, Droite)
Marge supérieure, marge inférieure, marge gauche, marge droite : Ces paramètres contrôlent l'espace autour du bouton dans chaque direction. Utilisez-les pour positionner précisément vos boutons, éviter le chevauchement avec d'autres éléments et créer de l'espace.
Libellé/Icône
Couleur : La couleur par défaut du texte ou de l'icône du bouton.
Couleur active : La couleur vers laquelle le texte/l'icône passe lorsque le bouton est cliqué ou touché.
Couleur au survol : La couleur vers laquelle le texte/l'icône passe lorsque l'utilisateur survole le bouton avec la souris.
Famille de police : Spécifie la police utilisée pour le libellé du bouton. Assurez-vous qu'elle s'harmonise avec le design global de votre site et qu'elle soit facile à lire.
Taille de police : Contrôle la taille du texte du libellé. Ajustez-la au besoin pour la lisibilité et la mise en valeur.
Style de police : Définit le style du texte, comme normal, italique ou oblique. À utiliser avec parcimonie pour une mise en valeur particulière.
Graisse de police : Détermine le degré de graisse du texte. Envisagez d'utiliser différentes graisses pour différencier les boutons principaux et secondaires.
Arrière-plan
Couleur de fond : La couleur par défaut de l'arrière-plan du bouton.
Couleur d'arrière-plan active : La couleur d'arrière-plan du bouton lorsqu'il est cliqué ou touché.
Couleur d'arrière-plan au survol : La couleur d'arrière-plan lorsque l'utilisateur survole le bouton avec la souris.
Bordure
Couleur de la bordure : La couleur de la bordure du bouton.
Couleur de bordure active : La couleur de bordure lorsque le bouton est actif.
Couleur de bordure au survol : La couleur de bordure lorsque l'utilisateur survole le bouton avec la souris.
Taille de la bordure : L'épaisseur de la bordure (en pixels).
Style de bordure : Le type de bordure : plein, pointillé, tirets, etc.
Rayon de bordure : Contrôle l'arrondi des coins du bouton. Des valeurs plus élevées donnent des boutons plus doux et plus arrondis
Mis à jour
Ce contenu vous a-t-il été utile ?