# Create an avatar with details

## Overview

In this tutorial, we'll walk you through adding the Avonni Avatar component to display specific details, such as full name and title, from a Salesforce record. Combining the Avatar component's visual appeal with relevant field information will create a more engaging and informative user interface.

## Result

The final result will look like this:

<figure><img src="/files/VylYqdIno2Yilywads6y" alt=""><figcaption></figcaption></figure>

## Steps

### 1. Create the recordID text variable

In the context of adding the Avonni Avatar Component, creating a recordID text variable and making it available for input is essential. This enables the Avatar Component to accurately match and display information associated with the current recordID.

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

### 2. Create the Get Records Collection

In adding the Avonni Avatar component with actions, creating a Get Records collection to fetch contact information is essential. By utilizing the recordID text variable we previously created, the Get Records collection will retrieve the specific contact data associated with that recordID. This enables the Avonni Avatar component to display the contact's avatar accurately.

* **Add a Get Records** element
* Linked to the **Contact Object**
* Filter by: **All Conditions are Met (AND)**
  * Contact ID EQUAL > RecordID (text variable created in [step 1](#1.-create-the-recordid-text-variable))

### 3. Create the screen flow and add the Avonni Avatar Component

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

### 4. Configure the Avatar component

To configure the Avonni Avatar component and add detailed information next to the avatar, follow these simple steps:

1. Open the component within your flow builder.
2. Navigate to the properties panel on the right side of the screen.
3. Expand the 'Text' section to reveal the primary and secondary text options.
4. Switch to the 'Mapped View' for both primary and secondary text fields.
5. Select your record variable from the list of available options.
6. Choose the specific fields you want to display as primary and secondary text, such as full name and title.

<figure><img src="/files/I0SJLPDFKwoltnO8OWz6" alt=""><figcaption></figcaption></figure>

By completing these steps, you'll have successfully configured the Avonni Avatar component to display the desired details alongside the avatar, creating a more informative and visually appealing user interface.


---

# Agent Instructions: 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/flow/tutorials/components/avatar/create-an-avatar-with-details.md?ask=<question>
```

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.