AX - Avatar

AX - Avatar est un composant Experience Cloud qui affiche des photos de profil, des initiales ou des icônes sur les pages Experience Sites pour représenter des utilisateurs, des contacts, des comptes ou tout enregistrement Salesforce.

Utilisez-le pour afficher des profils d'utilisateurs du portail, des représentants de compte, des listes de contacts ou des identifiants d'entité avec une mise en forme visuelle cohérente. Le composant affiche automatiquement les images lorsqu'elles sont disponibles ou se rabat sur des initiales ou des icônes.

Idéal pour les en-têtes de profil utilisateur, les listes de membres de la communauté, les annuaires de contacts ou partout où les utilisateurs du portail ont besoin d'une identification visuelle des personnes ou des entités.

Le composant Avonni Avatar vous aide à créer des représentations visuellement cohérentes des utilisateurs ou des entités au sein de votre site Salesforce Experience Cloud. Voici un guide étape par étape pour personnaliser l'Avatar selon vos besoins :

Le composant Avatar offre de la flexibilité dans la façon d'afficher les initiales :

Si vous connaissez les initiales que vous souhaitez afficher, saisissez-les directement dans le champ « Initiales ».

Pour rendre vos composants Avonni dynamiques, vous pouvez utiliser les expressions Experience Cloud. Par exemple, dans le composant Avatar ci-dessous, vous pouvez utiliser l'expression suivante pour afficher automatiquement le nom de l'utilisateur actuellement connecté :

Vous pouvez remplacer Nom par le nom de champ réel stockant le nom de l'utilisateur dans votre organisation Salesforce.

Si vous souhaitez générer automatiquement des initiales à partir d'un nom complet, activez l'option « Initiales formatées automatiquement ». Cela utilisera des expressions Experience Cloud pour extraire et mettre en forme la première lettre de chaque mot du nom.

Ajoutez une photo de profil, un logo ou toute image pour rendre l'Avatar immédiatement reconnaissable. Téléchargez votre image en utilisant l' Contenu sélectionné option — le composant la recadre et la met automatiquement en forme pour l'adapter à la forme de l'Avatar.

Si aucune image n'est ajoutée, l'Avatar affiche des initiales à la place

Choisissez entre cercle ou carré en utilisant le Variante champ pour l'adapter au design de votre portail. Les avatars circulaires conviennent bien aux personnes, tandis que les formes carrées conviennent aux logos ou aux icônes d'entité

Contrôlez la taille de l'Avatar affichée sur la page à l'aide de la Taille propriété. Les options vont de très petite sur xx-largepour que vous puissiez l'équilibrer avec le contenu environnant — plus petit pour les listes en ligne, plus grand pour les en-têtes de profil.

Affichez un contexte supplémentaire à côté de l'Avatar en ajoutant des champs de texte. Utilisez Texte principal pour les informations les plus importantes (comme un nom complet) et Texte secondaire pour les détails complémentaires (comme le titre du poste ou l'e-mail).

Vous pouvez également définir des styles de police pour chaque niveau de texte afin de créer une hiérarchie visuelle entre les informations principales et secondaires.

Ajoutez des libellés visuels pour catégoriser ou mettre en évidence des informations sur l'Avatar. Les étiquettes apparaissent sous forme de petits badges et peuvent être stylées avec différentes couleurs à l'aide de la Variante de l'étiquette option — utile pour afficher le statut, le service, le rôle ou tout identifiant rapide.

Initiales affiche des initiales spécifiques pour un utilisateur ou une entité, et Initiales formatées automatiquement les génère automatiquement à partir d'un nom complet fourni pour une représentation cohérente sans saisie manuelle.

Nom de l'icône de secours définit l'icône de secours affichée lorsque les données principales (une image ou des initiales) sont absentes, garantissant une continuité visuelle.

Image CMS et URL de l’image ou expression définissez l'image de l'avatar — référencez un asset géré par le CMS ou fournissez une URL/une expression. Href transforme l'avatar en lien vers l'adresse indiquée.

Variante choisit une forme circulaire (cercle) ou carrée (carré) et Taille ajuste les dimensions globales (de x-small à xx-large). Position de l'icône aligne l'icône de secours dans l'avatar (début, au centre, fin).

Texte principal, Texte secondaire, et Texte tertiaire affiche le texte principal, complémentaire et de troisième niveau à côté de l'avatar (souvent un nom, puis un rôle, puis un détail supplémentaire) ; leurs styles de texte (Titre 1–4 ou Paragraphe 1–2) se définissent dans l'onglet Style. Position du texte spécifie l'alignement de ces textes par rapport à l'avatar (à gauche, au centre, à droite).

Masquer les détails de l'avatar affiche ou masque les détails supplémentaires associés à l'avatar, tels que du texte ou des étiquettes.

Étiquettes ajoutez des badges à l'avatar comme marqueurs ou indicateurs de catégorie.

Nom de l'icône d'entité, Initiales de l'entité, Source de l'image de l'entité, Variante de l'entité, et Position de l'entité configurez un badge secondaire « entité » superposé sur l'avatar — son icône, ses initiales, son image, sa forme (cercle/carré) et sa position dans le coin.

Actions ajoutez des boutons d'action à l'avatar, et Lien vers définit une interaction déclenchée lorsque l'avatar est cliqué.

Profils utilisateur – Créez des en-têtes de profil complets en combinant une image personnalisée avec un texte principal pour le nom de l'utilisateur et un texte secondaire pour son titre de poste ou son service. Cela donne aux utilisateurs du portail une représentation claire et professionnelle sur leurs pages de profil.

Forums communautaires – Affichez des avatars à côté des publications et des commentaires afin que les membres de la communauté puissent rapidement identifier qui contribue. Cela ajoute une touche personnelle qui encourage l'engagement et rend les conversations plus faciles à suivre.

Pages d'équipe – Mettez en valeur les membres de l'équipe avec des avatars comprenant les noms, les rôles et des étiquettes pour le service ou l'expertise. Cela aide les utilisateurs du portail à trouver le bon contact et à comprendre la structure de l'équipe en un coup d'œil.