Avatar Group
Overview
The Avonni Avatar Group component is your solution for displaying a collection of user or team avatars on your Experience Cloud sites. This component offers a visually appealing and organized way to represent individuals or groups, enhancing the user experience and providing valuable context within your site.
Configuration Options
Data Source
Tell it where to find the information to make your Avatar Group display the right people. This is where Data Sources come in. Think of it as connecting your avatars to the heart of your Salesforce data.
Manual
This option is a great fit for smaller teams or situations where you only need to display avatars for a specific event or project.
Add Each Person: You'll enter their details directly into the Avatar Group settings for each individual you want to include.
Provide Key Information: This includes:
Avatar Image: If you have a picture, you can upload it here.
Initials: These will be displayed if no image is available.
Other Details: You can include additional information like the person's title or department.
While the Manual option requires more hands-on effort, it gives you complete control over who is displayed in your Avatar Group.
Query
This option is your go-to choice if your team changes frequently or you want the avatars always to match the latest information in your Salesforce org.
Here's how it works:
Choose your Object: Select the Salesforce object (like User, Contact, or a custom object) where your avatar information lives.
Map the Data: Connect the dots between your avatar group attributes (like Name, Title, Profile Picture) and the corresponding fields in your chosen object. This tells the Avatar Group exactly where to find the correct details for each person.
Using the Query option, your Avatar Group becomes a dynamic reflection of your Salesforce data, always showing the most accurate and up-to-date information.
Variant
Square: Avatars are displayed as squares, with a classic and clean look.
Circle: Avatars are displayed as more modern and friendly circles.
Empty: If no image is available, initials or placeholder icons appear within empty circles or squares. Choose this option to maintain visual consistency even when image data is missing.
Size
Control the dimensions of each avatar. Choose from a range of sizes to fit the layout and context of your site. Options include x-small, small, medium, large, x-large, and xx-large.
Layout
Stack: Avatars are vertically stacked, ideal for narrow spaces or sidebars.
Grid: Avatars are arranged in a grid layout, perfect for showcasing a larger group of users or teams.
List: Avatars are displayed in a horizontal row, which is useful when space is limited, but you still want to showcase multiple avatars.
Max Count
Limit the number of avatars displayed in the group. This helps maintain a clean layout and prevents overwhelming the user with too many visuals.
Initials Auto Formatted (Toggle)
Enable this option to automatically display the initials of the users or teams when images are unavailable. This provides a consistent visual representation even when image data is missing.
Link To (Make Your Avatars Interactive)
Think of this section as giving your avatars a superpower – taking your users somewhere new when clicked!
Why is this useful?
User Profiles: Imagine displaying a team of experts. By setting up a link to action, clicking on an avatar could open their full profile page.
Custom Actions: Maybe you want a click to trigger a specific Flow or even redirect to an external website.
How it works:
Choose your Type: Select where you want the click to take your users. This could be to a record page, a custom page, a Flow, or an external URL.
Customize the Action name: When using a navigate interaction, choose the action name to invoke.
Using the Link To feature, your Avatar Group becomes more than just a display of faces; it becomes a gateway to additional information or actions.
Using the Avonni Avatar Group Component
These configuration options allow you to tailor the Avonni Avatar Group component to meet your needs. For example, you can showcase team members on a project page, display customer avatars on account pages, or create visually engaging lists of community members.
Remember, the Avonni Avatar Group component is highly adaptable. You can customize its appearance further with styling appareance and even add interactive elements to make the avatars clickable or link them to user profiles.
By leveraging the Avonni Avatar Group component, you can create a more personalized and informative experience for your Experience Cloud site users, fostering connections and highlighting the human element within your online community.
Last updated
