> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-profile-card.md). # AX - Carte de profil ## Aperçu **AX - Carte de profil** est un composant Experience Cloud qui affiche les informations d’un utilisateur ou d’un contact dans une carte au format stylisé avec photos de profil, noms, détails et images d’arrière-plan facultatives sur les pages des sites Experience. Utilisez-le pour mettre en valeur les membres de l’équipe, les contacts clients, les représentants partenaires ou les contributeurs de la communauté avec un format visuel cohérent. Configurez les champs à afficher, ajoutez des images de profil, personnalisez le style et incluez des boutons d’action dans Experience Builder. Idéal 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.
{% hint style="danger" %} Ce composant [utilise des emplacements](/experience-cloud/experience-cloud-fr/premiers-pas/learning-the-basics.md#understanding-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. {% endhint %} *** ## Premiers pas Utilisez ce tutoriel simple pour apprendre les bases du composant Carte de profil et commencer à créer vos cas d’utilisation. {% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %} *** ## Tutoriels | Nom | Description | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | [**Configuration de la Carte de profil pour afficher les informations de l’utilisateur actuel**](/experience-cloud/experience-cloud-fr/tutoriels/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | 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 au sein du 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 des éléments variés 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 :** * Dédié aux titres, en-têtes ou contenus d’introduction. * Adapté aux libellés de texte, avatars, icônes ou tout composant fournissant un contexte. * Améliore la compréhension immédiate de l’objectif de la Carte de profil. 3. **Emplacement d’actions :** * Réservé aux éléments interactifs tels que des boutons ou des liens hypertexte. * 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 {% tabs %} {% tab title="🎛️ Propriétés" %} | Nom | Description | Utilisation | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Titre et style du texte du titre** | Définissez le titre et son apparence en choisissant parmi différents styles de texte comme H1, H2, H3, H4, P1 et P2. | Utilisez cette option pour donner à votre carte de profil un titre proéminent 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, renforçant ainsi la richesse de la carte de profil. | | **Arrière-plan CMS ou URL d’arrière-plan** | Personnalisez l’arrière-plan en choisissant une image dans le CMS ou en fournissant une URL, pour un arrière-plan visuellement enrichi. | Une image d’arrière-plan bien choisie peut apporter de la profondeur et du contexte au profil, renforçant son attrait visuel. | | **Image d’avatar CMS ou URL de l’image d’avatar** | Définissez l’avatar en sélectionnant une image dans 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 engageant et plus proche de l’utilisateur. | | **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 très petite à très grande. | Adaptez l’apparence de l’avatar au style 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 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 au sein de la carte de profil. | | {% endtab %} | | | {% tab title="🎨 Style" %} | Nom | Description | Utilisation | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Attributs de style de l’en-tête** | Stylisez largement l’en-tête avec des options de couleur d’arrière-plan, couleur du texte, taille de police, style, graisse et même personnalisation de la bordure. | Ajustez finement l’apparence de l’en-tête pour créer un en-tête de carte de profil visuellement saisissant et facile à lire. | | **Couleur d’arrière-plan et bordure** | Personnalisez la couleur d’arrière-plan globale de la carte et définissez les propriétés de la bordure telles que la taille, le rayon et la couleur. | Ces fonctionnalités permettent d’obtenir une distinction visuelle et une finition supplémentaires de l’apparence de la carte de profil, garantissant son adéquation avec vos préférences de design. | | {% endtab %} | | | | {% endtabs %} | | | *** ## Exemples de cas d’utilisation ### Exemple 1 : Panneau de mise en avant du compte (conteneur) {% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %} Transformez votre site d’expérience partenaire avec une carte de profil de compte soignée et riche en informations, qui met en avant les détails clés du compte, l’image de marque et les actions. *** #### **Ce que vous obtiendrez** * **En-tête aux couleurs de la marque :** 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 :** Affichez les champs les plus pertinents du compte 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étails de l’enregistrement :** Disponible dans votre bibliothèque de composants *** #### **Comment le configurer** {% stepper %} {% step %} #### **Ajoutez la Carte de profil à votre page** * Faites glisser le composant AX – Carte de profil sur la page d’enregistrement du compte Experience {% endstep %} {% step %} #### **Configurez l’en-tête de la carte** * Définissez l’en-tête sur `{!Item.Name}` * Définissez le style sur `Titre 2` * Définissez le sous-titre sur `{!Item.Industry}` {% endstep %} {% step %} #### **Ajoutez le logo de l’entreprise** * Définissez l’URL de l’image d’avatar sur `{!Item.LogoURL__c}` * Définissez la variante sur `Cercle` * Définissez la taille sur `Moyen` {% endstep %} {% step %} #### **Ajoutez un bouton d’action personnalisé** * Faites glisser le composant Bouton dans l’emplacement Actions {% endstep %} {% step %} #### **Ajoutez une mise en page d’enregistrement compacte** * Faites glisser le composant Détails de l’enregistrement dans l’emplacement Contenu {% endstep %} {% step %} #### **Aperçu de 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 {% endstep %} {% endstepper %} *** #### **Liens** {% content-ref url="/pages/8e893d46776ae1dc01aa1b4b539eaf364fc8f2f9" %} [AX - Détail de l’enregistrement](/experience-cloud/experience-cloud-fr/experience-components/ax-record-detail.md) {% endcontent-ref %} {% content-ref url="/pages/08e4667efe4f4a2491715969c74aa78e15d7be12" %} [AX - Bouton](/experience-cloud/experience-cloud-fr/experience-components/ax-button.md) {% endcontent-ref %} *** ### Exemple 2 : Informations de profil de l’utilisateur actuel {% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %} Offrez à vos utilisateurs un accueil chaleureux et personnalisé dès qu’ils arrivent sur votre site d’expérience, en créant un lien et en favorisant l’adoption de la plateforme dès la première visite. *** #### **Ce que vous obtiendrez** * **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 collègues et les clients comprennent immédiatement avec qui ils interagissent * **Photo de profil :** Récupérez automatiquement l’image de profil de l’utilisateur pour une présentation soignée et familière *** #### **Comment le configurer** {% stepper %} {% step %} ### **Ajoutez la Carte de profil à votre page** * Faites glisser le composant AX – Carte de profil sur la page du site Experience {% endstep %} {% step %} ### **Configurez l’en-tête de la carte** * Définissez l’en-tête sur `Bienvenue, {!User.Record.Name}` * Définissez le style sur `Titre 2` * Définissez le sous-titre sur `{!User.Record.Title}` {% endstep %} {% step %} ### **Configurez l’image de profil** * Définissez l’URL de l’image d’avatar sur `{!User.Record.SmallPhotoUrl}` * Définissez la position de l’avatar sur `En haut au centre` {% endstep %} {% step %} ### **Aperçu de votre page** {% endstep %} {% endstepper %} *** **Liens** {% content-ref url="/pages/ddd9c4f6410aaabc7f22e0f983e238eecf8b93c3" %} [AX - Avatar](/experience-cloud/experience-cloud-fr/experience-components/ax-avatar.md) {% endcontent-ref %} {% content-ref url="/pages/e46448b75980540513d85b302f2b4cf9014fa1ec" %} [AX - Section d’accordéon](/experience-cloud/experience-cloud-fr/experience-components/ax-accordion-section.md) {% endcontent-ref %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-profile-card.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.