AX - Carte de profil

Vue d’ensemble

AX - Carte de profil est un composant Experience Cloud qui affiche les informations d’un utilisateur ou d’un contact dans un format de carte stylisé avec photo de profil, nom, détails et images d’arrière-plan facultatives sur les pages des sites Experience.

Utilisez-le pour mettre en avant les membres de l’équipe, les contacts clients, les représentants de partenaires ou les contributeurs de la communauté avec une mise en forme visuelle cohérente. Configurez les champs à afficher, ajoutez des images de profil, personnalisez le style et incluez des boutons d’action dans Experience Builder.

Parfait pour les annuaires d’équipe, les listes de contacts, les profils des membres de la communauté, les sections « Rencontrez votre représentant » ou partout où votre portail a besoin d’affichages de profil professionnels.

Ce composant utilise des slots pour une personnalisation avancée, ce qui le rend idéal pour les sites LWR. Les sites Aura ne prennent pas en charge ce niveau de personnalisation.

---

Premiers pas

Utilisez ce tutoriel simple pour apprendre les bases du composant Carte de profil et commencer à créer vos cas d’usage.

---

Tutoriels

Name	Description
Configuration de la Carte de profil pour afficher les informations de l’utilisateur actuel	Configurez une carte Avonni pour afficher les informations de l’utilisateur sur Experience Cloud, afin d’améliorer la personnalisation.

---

Emplacements

Le composant Avonni Carte de profil offre une manière flexible et dynamique de présenter un large éventail d’informations via des emplacements. Ces emplacements sont des zones dédiées dans le composant où d’autres composants peuvent être insérés, permettant une personnalisation et des fonctionnalités étendues.

Types d’emplacements

1. Emplacement de contenu :

   • La zone principale pour les informations détaillées.

   • Idéal pour ajouter divers éléments comme du texte, des listes, des images ou des composants personnalisés.

   • Peut être utilisé pour afficher des données complètes ou des éléments interactifs.

2. Emplacement d’en-tête :

   • Réservé aux titres, en-têtes ou contenus d’introduction.

   • Adapté aux étiquettes de texte, avatars, icônes ou tout composant fournissant du contexte.

   • Améliore la compréhension immédiate de l’objectif de la Carte de profil.

3. Emplacement des actions :

   • Réservé aux éléments interactifs tels que des boutons ou des liens hypertextes.

   • Facilite l’interaction utilisateur, en proposant des actions telles que la modification de profils et la navigation.

   • Augmente l’interactivité de la carte et l’engagement des utilisateurs.

---

Paramètres

🎛️ Propriétés

Name	Description	Utilisation
Titre et style du texte du titre	Définissez le titre et son apparence en choisissant parmi une variété de styles de texte comme H1, H2, H3, H4, P1 et P2.	Utilisez cela pour donner à votre carte de profil un en-tête visible et stylisé qui attire l’attention.
Sous-titre et style du texte du sous-titre	Ajoutez un sous-titre et personnalisez son apparence, en permettant des informations contextuelles supplémentaires avec des choix de style.	Utilisez les sous-titres pour fournir des informations supplémentaires, comme un poste ou un service, afin d’enrichir la carte de profil.
Arrière-plan CMS ou URL d’arrière-plan	Personnalisez l’arrière-plan en choisissant une image depuis le CMS ou en fournissant une URL, afin d’obtenir un arrière-plan visuellement enrichi.	Une image d’arrière-plan bien choisie peut ajouter de la profondeur et du contexte au profil, renforçant ainsi son attrait visuel.
Image d’avatar CMS ou URL de l’image d’avatar	Définissez l’avatar en sélectionnant une image depuis le CMS ou en utilisant une URL, pour apporter une touche personnelle à la représentation du profil.	Les avatars apportent une touche personnelle, rendant le profil plus attrayant et plus proche.
Variante et taille de l’avatar	Personnalisez la forme et la taille de l’avatar, en choisissant parmi des variantes comme cercle ou carré et des tailles allant de x-petit à x-grand.	Adaptez l’apparence de l’avatar au design global de la carte de profil, afin de garantir cohérence visuelle et attrait.
Position de l’avatar	Positionnez l’avatar sur la carte, en choisissant parmi des emplacements comme en haut à gauche, en haut au centre ou en bas à droite, entre autres.	Ajustez la position de l’avatar pour obtenir une mise en page équilibrée et harmonieuse dans la carte de profil.

🎨 Style

---

Exemples de cas d’usage

Exemple 1 : Panneau de mise en avant du compte (conteneur)

Transformez votre site d’expérience partenaire avec une carte de profil de compte soignée et riche en informations qui met les détails clés du compte, l’image de marque et les actions au premier plan.

---

Ce que vous allez obtenir

• En-tête personnalisé : Affichez le nom du compte et le secteur avec le logo de l’entreprise pour une reconnaissance visuelle immédiate

• Actions contextuelles : Lancez un flux Nouvelle opportunité directement depuis la carte en un seul clic

• Détail d’enregistrement compact : Exposez les champs du compte les plus pertinents sans surcharger la page

---

Avant de commencer

• Champ de logo personnalisé : Un champ personnalisé sur l’objet Compte pour stocker l’URL du logo de l’entreprise

• Flux d’écran : Un flux d’écran Nouvelle opportunité, prêt à être lancé

• Composant bouton : Disponible dans votre bibliothèque de composants

• Composant Détail d’enregistrement : Disponible dans votre bibliothèque de composants

---

Comment le configurer

1

Ajoutez la Carte de profil à votre page

• Faites glisser le composant AX – Carte de profil sur la page d’enregistrement du compte Experience

2

Configurez l’en-tête de la carte

• Définissez En-tête sur {!Item.Name}

• Définissez Style sur Titre 2

• Définissez Sous-titre sur {!Item.Industry}

3

Ajoutez le logo de l’entreprise

• Définissez URL de l’image d’avatar sur {!Item.LogoURL__c}

• Définissez Variante sur Cercle

• Définissez Taille sur Moyenne

4

Ajoutez un bouton d’action personnalisé

• Faites glisser le composant Bouton dans l’emplacement Actions

5

Ajoutez une mise en page d’enregistrement compacte

• Faites glisser le composant Détail d’enregistrement dans l’emplacement Contenu

6

Prévisualiser votre page

• Vérifiez la carte en mode aperçu pour confirmer que la mise en page, le logo et le bouton d’action s’affichent comme prévu

---

Liens

AX - Détail de l’enregistrementAX - Bouton

---

Exemple 2 : Informations de profil de l’utilisateur actuel

Offrez à vos utilisateurs un accueil chaleureux et personnalisé dès leur arrivée sur votre site d’expérience, en créant du lien et en favorisant l’adoption de la plateforme dès la première visite.

---

Ce que vous allez obtenir

• Salutation personnalisée : Adressez-vous à chaque utilisateur par son nom avec un message de bienvenue dynamique qui paraît humain, et non générique

• Contexte du rôle : Affichez le titre de l’utilisateur sous son nom afin que les coéquipiers et les clients puissent immédiatement comprendre avec qui ils interagissent

• Photo de profil : Récupérez automatiquement la photo de profil de l’utilisateur pour une impression soignée et familière

---

Comment le configurer

1

Ajoutez la Carte de profil à votre page

• Faites glisser le composant AX – Carte de profil sur la page du site Experience

2

Configurez l’en-tête de la carte

• Définissez En-tête sur Bienvenue, {!User.Record.Name}

• Définissez Style sur Titre 2

• Définissez Sous-titre sur {!User.Record.Title}

3

Configurez l’image de profil

• Définissez URL de l’image d’avatar sur {!User.Record.SmallPhotoUrl}

• Définissez la position de l’avatar sur En haut au centre

4

Prévisualiser votre page

---

Liens

AX - AvatarAX - Section d’accordéon