Avatar

Overview

The Avonni Avatar component displays user or entity images, symbols, or initials within Salesforce. Whether representing a user profile, a contact, or any other entity, the Avatar ensures a consistent and visually appealing representation.

Customizing the Avatar

The Avonni Avatar component helps you create visually consistent representations of users or entities within your Salesforce Experience Cloud site. Here's a step-by-step guide to personalize the Avatar to fit your needs:

1. Displaying Initials

The Avatar component offers flexibility in how you display initials:

Manual Entry

If you know the initials you want to display, enter them directly into the "Initials" field.

Dynamic Generation (Expressions)

To make your Avonni components dynamic, you can use Experience Cloud Expressions. For example, in the Avatar component below, you can use the following expression to display the currently logged-in user's name automatically:

{!User.Record.Name} 

You can replace Name with the actual field name storing the user's name in your Salesforce org.

If you'd like to automatically generate initials from a full name, enable the "Initials Auto Formatted" option. This will use Experience Cloud expressions to extract and format the first letter of each word in the name.

2. Custom Image

• Purpose: Adding a custom image enhances personalization and makes the Avatar immediately recognizable. This is ideal for branding, user profiles, or any situation where visual identification is essential.

• How to Customize: Upload your image using the "Selected Content" option. The component will automatically format it to fit within the Avatar.

3. Variant (Shape)

• Purpose: Choose a circular or square shape to complement your site's design aesthetic.

• How to Customize: Using the "Variant" field, select either "circle" or "square".

4. Size

• Purpose: Adjust the Avatar's size to ensure it visually balances with other elements on your pages.

• How to Customize: Set the "Size" property to any of the following options: x-small, small, medium, large, x-large, xx-large.

5. Primary and Secondary Text

• Purpose: Add information directly alongside the Avatar for further context. Common uses include:

  • Full Name

  • Job Title

  • Email Address

  • Other relevant details

• How to Customize:

  • Use the "Primary Text" field for the most important information.

  • Add additional details in the "Secondary Text" field.

  • Select appropriate font styles for each text level (e.g., Heading, Paragraph).

EXPRESSIONs

6. Tags

• Purpose: Tags offer a quick way to categorize Avatars or add related keywords visually.

• How to Customize: Create Tags linked to the Avatar. Choose a distinctive Tag "Variant" (e.g., color, style) to aid differentiation.

Example Use Cases

• User Profiles: Avatars with custom images, names, and job titles create a clear representation on profile pages.

• Community Forums: Display user Avatars alongside comments to improve engagement and interaction.

• Team Pages: Represent team members using Avatars, including relevant info or tags to aid collaboration.

Specifications