Bouton

Aperçu

Le composant Avonni Button est conçu pour initier des actions lorsque l'utilisateur clique. Hautement personnalisable, le composant bouton améliore l'expérience utilisateur, rendant les interactions avec votre site Web fluides et intuitives. Il est idéal pour diverses actions telles que l'envoi de formulaires, la navigation, le lancement de processus ou le déclenchement de modaux et popups.

Tutoriels

Lien vers des interactions

Le composant Avonni Button pour les sites Salesforce Experience Cloud propose le paramètre d'interaction « Lien vers ». Cette fonctionnalité vous permet de définir des actions ou comportements spécifiques lorsque les utilisateurs cliquent sur le bouton.

Types d'interactions « Lien vers »

1. Afficher un toast:

   • Fonctionnalité : Déclenche une brève notification, ou « toast », lors du clic sur le bouton.

   • Utilisation dans Experience Cloud : Idéal pour fournir un retour immédiat ou des messages de confirmation tels que « Action réussie » ou « Enregistré avec succès ». Les messages toast sont non intrusifs et disparaissent après quelques secondes, ce qui les rend adaptés aux alertes rapides.

2. Naviguer:

   • Fonctionnalité : Redirige l'utilisateur vers une page ou une URL différente.

   • Utilisation dans Experience Cloud : Essentiel pour guider les utilisateurs à travers une série d'étapes ou les diriger vers des ressources supplémentaires, améliorant la navigation du site et le parcours utilisateur.

3. Ouvrir une alerte modale:

   • Fonctionnalité : Ouvre une fenêtre modale affichant un message d'alerte.

   • Utilisation dans Experience Cloud : Utile pour afficher des informations importantes ou des avertissements nécessitant l'acquiescement de l'utilisateur avant de poursuivre, comme les conditions d'utilisation ou les avis de confidentialité.

4. Ouvrir une confirmation:

   • Fonctionnalité : Affiche une boîte de dialogue de confirmation demandant aux utilisateurs de confirmer leur action.

   • Utilisation dans Experience Cloud : Idéal pour les actions ayant des conséquences importantes (comme la suppression d'un enregistrement), garantissant que les utilisateurs prennent des décisions éclairées.

5. Ouvrir la boîte de dialogue Flow:

   • Fonctionnalité : Lance un flux d'écran créé dans Salesforce Flow Builder.

   • Utilisation dans Experience Cloud : Cette fonctionnalité est parfaite pour guider les utilisateurs à travers un processus en plusieurs étapes ou collecter des informations via un flux structuré. Elle peut être utilisée pour des applications telles que les enquêtes clients, les formulaires de saisie de données ou les guides interactifs.

En configurant les paramètres d'interaction « Lien vers » sur le composant Avonni Button, vous pouvez créer une expérience plus dynamique et interactive sur votre site Salesforce Experience Cloud. Ces interactions rendent le parcours utilisateur plus fluide et engageant en fournissant des retours instantanés, en naviguant sur le site, en présentant des informations cruciales, en confirmant des actions utilisateur ou en guidant les utilisateurs à travers un processus.

Spécifications

Propriétés

Nom	Description	Utilisation
Étiquette	Définissez le texte affiché sur le bouton.	Entrez 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, améliorant la compréhension de l'utilisateur.
Position de l'icône	Déterminez la position de l'icône à l'intérieur du bouton.	Choisissez une position qui équilibre visuellement le bouton et s'aligne sur la direction de conception de votre page Web.
Variante	Sélectionnez une variante de style prédéfinie pour le bouton.	Choisissez une variante qui convient au contexte de l'action du bouton et au langage de conception général de la page Web.
Alignement horizontal	Définissez l'alignement horizontal du bouton au sein de son conteneur.	Alignez le bouton pour obtenir une harmonie visuelle et répondre aux exigences de mise en page de la page Web.
Étirement	Déterminez si le bouton doit s'étirer pour remplir son conteneur.	Activez cette option pour que le bouton s'étende horizontalement, remplissant 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 l'interaction utilisateur, utile lorsque certaines conditions rendent une action non applicable ou doivent être temporairement empêchées.

Apparence

Espacement (Haut, Bas, Gauche, Droite)

• Marge-haut, Marge-bas, Marge-gauche, Marge-droite : Ceci contrôle 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 respiratoire.

Étiquette/Icône

• Couleur : La couleur par défaut du texte ou de l'icône du bouton.

• Couleur active : La couleur que prend le texte/l'icône lorsque le bouton est cliqué ou touché.

• Couleur au survol : La couleur que prend le texte/l'icône lorsque l'utilisateur survole le bouton avec la souris.

• Famille de polices : Spécifie la police utilisée pour le libellé du bouton. Assurez-vous qu'elle s'aligne sur le design global de votre site et soit facile à lire.

• Taille de la police : Contrôle la taille du texte du libellé. Ajustez pour la lisibilité et l'emphase selon les besoins.

• Style de la police : Définit le style du texte, comme normal, italique ou oblique. Utilisez avec parcimonie pour un accent particulier.

• Graisse de la police : Dictée l'épaisseur du texte. Envisagez d'utiliser différents poids pour différencier les boutons primaires 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 de fond du bouton lorsqu'il est cliqué ou touché.

• Couleur d'arrière-plan au survol : La couleur de fond 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 la bordure lorsque le bouton est actif.

• Couleur de bordure au survol : La couleur de la 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é, en tirets, etc.

• Rayon de la bordure : Contrôle à quel point les coins du bouton sont arrondis. Des valeurs plus élevées donnent des boutons plus doux et plus arrondis