# 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.

<figure><img src="https://3803934262-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FbR9Mq0YdqjtlwMO6JdY6%2F2023-11-07_16-05-19.png?alt=media&#x26;token=c95863f1-cc0f-4a60-b93f-58af779f2823" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Ce composant [utilise des slots](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/apprendre-les-bases#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’usage.

{% @arcade/embed flowId="5SMa268wZsjsteVlpI8B" url="<https://app.arcade.software/share/5SMa268wZsjsteVlpI8B>" %}

***

## Tutoriels

| Name                                                                                                                                                                                                                                                                                              | Description                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| [**Configuration de la Carte de profil pour afficher les informations de l’utilisateur actuel**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/tutoriels/composants/carte-de-profil/configurer-la-carte-de-profil-pour-afficher-les-informations-de-lutilisateur-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

{% tabs %}
{% tab title="🎛️ 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.                          |

{% endtab %}

{% tab title="🎨 Style" %}

| Name                                  | Description                                                                                                                                                                     | Utilisation                                                                                                                                                                               |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Attributs de style de l’en-tête**   | Personnalisez en profondeur l’en-tête avec des options de couleur d’arrière-plan, couleur du texte, taille de police, style, graisse et même de 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 remarquable 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 de distinguer davantage visuellement et d’affiner l’apparence de la carte de profil, en veillant à ce qu’elle corresponde à vos préférences de conception. |

{% endtab %}
{% endtabs %}

***

## Exemples de cas d’usage

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

{% @arcade/embed flowId="SM5nEWQrD61sIelW6FK0" url="<https://app.arcade.software/share/SM5nEWQrD61sIelW6FK0>" %}

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**

{% 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 En-tête sur `{!Item.Name}`
* Définissez Style sur `Titre 2`
* Définissez Sous-titre sur `{!Item.Industry}`
  {% endstep %}

{% step %}

#### **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`
  {% 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étail d’enregistrement dans l’emplacement Contenu
  {% endstep %}

{% step %}

#### **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
  {% endstep %}
  {% endstepper %}

***

#### **Liens**

{% content-ref url="ax-details-de-lenregistrement" %}
[ax-details-de-lenregistrement](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-details-de-lenregistrement)
{% endcontent-ref %}

{% content-ref url="ax-bouton" %}
[ax-bouton](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-bouton)
{% endcontent-ref %}

***

### Exemple 2 : Informations de profil de l’utilisateur actuel

{% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="<https://app.arcade.software/share/BS4DEpYpnaHdh1ted1hR>" %}

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**

{% 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 En-tête sur `Bienvenue, {!User.Record.Name}`
* Définissez Style sur `Titre 2`
* Définissez Sous-titre sur `{!User.Record.Title}`
  {% endstep %}

{% step %}

### **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`
  {% endstep %}

{% step %}

### **Prévisualiser votre page**

{% endstep %}
{% endstepper %}

***

**Liens**

{% content-ref url="ax-avatar" %}
[ax-avatar](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-avatar)
{% endcontent-ref %}

{% content-ref url="ax-section-daccordeon" %}
[ax-section-daccordeon](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-section-daccordeon)
{% endcontent-ref %}