Welcome Mat
The Avonni Welcome Mat offers a two-pane interface with informational content and actionable tiles for exploring a topic or application.
Last updated
The Avonni Welcome Mat offers a two-pane interface with informational content and actionable tiles for exploring a topic or application.
Last updated
The Welcome Mat provides a two-part interface: informational content and interactive tiles that users can click to explore a topic or application. To set up the Welcome Mat:
This section determines which items appear as interactive tiles. You have two options:
Manual Data Source: Directly create the items within the Welcome Mat configuration.
Collection Variable: Use an existing collection variable to populate the Welcome Mat with items.
Once the Data Source is configured, items will be displayed on the right side of the Component Builder.
You can customize each item on the Welcome Mat with the following elements:
Label: A short, internal identifier for the item. This is often used to reference the item within the configuration.
Name: The main title is displayed to the user. This should clearly describe the item's purpose.
Description: A brief explanation providing additional context or details about the item's function.
Icon: A visual icon that helps users quickly recognize the item.
Completed Status: A visual indicator (e.g., a checkmark) showing whether the user has completed the item.
What Happens When You Complete Steps? The Welcome Mat dynamically updates to display which items are completed as users interact with clickable options, providing a clear visual track of progress.
Dynamically Controlling Completion Status (Mapped Attribute): You can use the "Mapped" attribute to dynamically set an item's completed status. This links the status to a variable within your flow (like a formula). In essence, you can automatically mark steps as complete based on conditions or logic you define in your flow.
Disabled Status: Indicates whether the item is active, clickable, or inactive and grayed out.
Link: This setting defines what happens when a user clicks the item. You can configure it to:
Navigate to another page within Salesforce.
Launch a different flow.
Trigger an action within the current flow.
When using a collection variable as the data source for your Welcome Mat, you'll need to perform data mapping. This process connects the data from your variable to the elements displayed in the Welcome Mat.
For example:
Your collection variable has a " Name " field containing each item's title.
You want this title to appear as the label on the Welcome Mat item.
Therefore, you map the "Name" field from your variable to the "Label" attribute of the Welcome Mat item.
To make the Welcome Mat more effective and customized, you have a range of properties that you can configure:
These settings control the textual content of your Welcome Mat, allowing you to guide users with clear and concise messaging directly within your flow. The aim is to create a welcoming and informative first impression that enhances the experience.
Caption: A brief introduction or tagline is displayed above the title. Use this to provide immediate context related to the flow's purpose.
Title: The main heading of your Welcome Mat. This is the most prominent text element and should clearly state the purpose of the flow or introduce the key feature being highlighted.
Subtitle: A supporting line of text that appears beneath the title. Use this to elaborate on the title or offer additional context specific to the flow.
Content: The main body of text. You can provide detailed information, step-by-step instructions, or a more extended welcome message tailored to the flow's objectives.
These settings allow you to customize the visual presentation of your Welcome Mat, making it more engaging and user-friendly within the Salesforce environment.
Show Background Image: Display a background image to create a visually appealing backdrop, aligning with your Salesforce org's branding or the flow's theme.
Show Dismissal Checkbox: Include a checkbox allowing users to close the Welcome Mat, giving them control over their flow experience.
Dismissal Checkbox Label: The text label beside the dismissal checkbox (e.g., "Don't show this again for this flow").
These options add interactive components to your Welcome Mat, allowing users to engage with your flow directly from the welcome screen and move seamlessly into the flow's actions.
Primary Button and Secondary Button: Add up to two buttons that trigger specific actions within the flow (e.g., "Start," "Learn More," "Next"). These actions can be linked to other flow elements.
Search: Include a search box below the title and caption, enabling users to quickly find what they need within the context of the flow. This can be tied to flow logic or external data sources.
Configuring the Link Section (For Interactive Elements): This section is crucial for defining the behavior of interactive elements like buttons. It determines what happens when a user clicks on them. You can configure the link to:
Navigate within Salesforce: Redirect the user to a specific Salesforce page, record, or list view.
Open Another Flow: Seamlessly launch a different flow, creating a connected and guided user journey.
Interact with Flow Navigation: Directly influence the current flow's path. For instance, a button click could advance to the next step, skip steps, or loop back based on user input or predefined logic.
Control the precise placement and appearance of content within the Welcome Mat's layout to ensure it integrates seamlessly with your flow's design.
Layout: Adjust the layout properties like content width and horizontal and vertical alignment. This gives you granular control over the title, caption, and description positioning, ensuring a visually balanced Welcome Mat within your flow.
Provide a visual cue to show users their progress through a multi-step flow, enhancing clarity and engagement.
Progress Option: Display a progress bar or circle, optionally customized with labels, prefixes, and suffixes, to indicate how far the user is in the flow sequence directly within the Welcome Mat.
Enrich your Welcome Mat with a video to create a more dynamic and engaging introduction to your flow, leveraging the power of multimedia within Salesforce.
Video Options: Embed a video on the left panel at the bottom of the Welcome Mat by providing a video file or a YouTube video ID. This is a great way to provide visual demonstrations or tutorials related to your flow.
If you choose to upload a video file directly, you must toggle the Public Link option in the video settings after uploading. Otherwise, the video will not be visible to users.
The Style panel provides extensive options to customize the visual style of nearly every element within the Welcome Mat. Here's a breakdown of the available styling settings:
Margin: Control the space around an element, creating visual separation.
Padding: Adjust the space between an element's content and its border.
Border: Define an element's border's style, width, and color.
Size: Set the width and height of elements.
You can apply the core styling properties plus more to the following Welcome Mat components, achieving pixel-perfect design:
Banner: The overall background area of the Welcome Mat.
Title: The main heading text.
Caption: The introductory text above the title.
Subtitle: The supporting text below the title.
Item: The container for individual items in a list (if applicable).
Item Title: The title of each item.
Item Description: The description within each item.
Item Complete: Visual indicator (like a checkmark) for completed items.
Progress Bar: The visual progress indicator.
Search Button: The button associated with the search bar.
Image: Any images used in the Welcome Mat (e.g., the background image).
Video Player: The container for embedded videos.
Primary Button: The main action button.
Secondary Button: The secondary action button.
By carefully configuring these style options, you can ensure that your Welcome Mat aligns perfectly with your Salesforce org's branding and provides a visually consistent and appealing user experience within your flows.
