The Avonni Welcome Mat offers a two-pane interface with informational content and actionable tiles for exploring a topic or application.
The Welcome Mat provides an onboarding-style welcome interface with a banner area (supporting a background image or video), informational text, interactive item tiles, and primary/secondary action buttons. Use it at the start of a flow to orient users, track onboarding progress, or present a menu of next steps.
To configure it, click the component on the Flow screen. The Edit Welcome Mat Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
The Data Source setting determines which items appear as interactive tiles on the right side.
Once the Data Source is configured, items are displayed on the right side of the Component Builder.
Customizing items: Each tile supports a Label, Name (title shown to the user), Description, Icon, Completed status, Disabled status, and Link configuration.
Dynamically controlling completion status: Use the Mapped attribute on the Completed field to link the status to a flow variable or formula — items are marked complete automatically based on conditions you define.
Data Mappings (Variable source): When using a collection variable, configure Data Mappings to connect variable fields to the tile elements. For example, map a "Name" field from your variable to the tile's Label.
When using Variable, configure Data Mappings in the Properties tab to tell the component how to build each tile from your data:
Label — Tile title.
Name — Unique identifier for the tile; used in output variables on interaction.
Description — Descriptive text shown on the tile.
Icon Name — Icon displayed on the tile.
Completed — Whether the tile is marked as completed.
Disabled — Whether the tile is disabled.
Link To — Navigation target when the tile is clicked.
Caption is a brief introduction or tagline displayed above the title.
Title is the main heading of the Welcome Mat — the most prominent text element.
Subtitle is a supporting line of text displayed beneath the title.
Content is the main body of text. Use it for detailed information, step-by-step instructions, or a welcome message.
Show Background Image displays a background image in the banner area.
Background Image sets the path to the background image. Requires Show Background Image to be enabled.
Show Dismissal Checkbox adds a checkbox that allows users to close or dismiss the Welcome Mat.
Dismissal Checkbox Label sets the text beside the dismissal checkbox (e.g., "Don't show this again"). Requires Show Dismissal Checkbox to be enabled.
Add a primary action button to the Welcome Mat.
Label — the button text (e.g., "Get Started").
Variant — the visual style of the button.
Icon Name — a Lightning Design System icon for the button.
Icon Position — Left or Right. Requires Icon Name to be set.
Icon Size — the size of the icon. Requires Icon Name to be set.
Add a secondary action button alongside the primary button. Configured the same way as the Primary Button.
Control the positioning of content within the banner area.
Content Width (%) — defines the width of the content area inside the banner, as a percentage (0–100). Defaults to 100.
Content Horizontal Alignment — aligns the title, caption, and description horizontally (Left, Center (default), Right).
Content Vertical Alignment — aligns the title, caption, and description vertically (Top (default), Center, Bottom).
Allow Search displays a search box below the title and caption.
Search Value pre-populates the search box with a default value.
Add a progress indicator to show users how far they are in the flow.
Show Progress — enables the progress indicator.
Value — the current progress as a percentage (0–100). Requires Show Progress to be enabled.
Progress Attributes — configure the indicator type (Bar or Circle), label, whether to show the numeric value, prefix, suffix, and accessibility text.
Embed a video in the lower-left area of the banner.
Source — the URL of the video file or YouTube video ID.
Video Attributes — configure autoplay, volume, hide controls, loop, playback rate, and accessibility title.
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.
Interactions define what happens when users interact with the Welcome Mat. Configure them from the Interactions tab of the Edit Welcome Mat panel.
Fires when the user clicks the primary action button. Use this to navigate to the next screen, start a guided process, or trigger any flow action tied to the main call-to-action.
Fires when the user clicks the secondary action button. Use this to offer an alternative path, skip a step, or show supplementary content.
Fires when the user submits a search query by clicking the search button. Use this to filter results or navigate to a search results screen.
The Style tab lets you customize nearly every element of the Welcome Mat. Configure it from the Style tab of the Edit panel.
Controls the outer spacing around the Welcome Mat.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between content and the border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the Welcome Mat.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Controls the Welcome Mat's dimensions.
Width / Height: Set fixed dimensions.
Overflow / Left side overflow / Right side overflow: Control how overflowing content is handled overall and on each side.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Styles the main heading text.
Color: Set the title text color.
Font Size / Font Style / Font Weight / Font Family: Control the title typography.
Styles the introductory text above the title.
Color: Set the caption text color.
Font Size / Font Style / Font Weight / Font Family: Control the caption typography.
Styles the supporting text below the title.
Color: Set the subtitle text color.
Font Size / Font Style / Font Weight / Font Family: Control the subtitle typography.
Styles the individual tiles across states.
Background Color / Background Color Complete: Set the tile background for the default and completed states.
Border Color / Border Color Complete: Set the tile border color for the default and completed states.
Border Size / Border Size Complete / Border Style / Border Style Complete / Border Radius: Control the tile border thickness, line style, and corner roundness.
Styles the title of each tile.
Text Color: Set the title text color.
Font Size / Font Style / Font Weight: Control the title typography.
Styles the description within each tile.
Text Color: Set the description text color.
Font Size / Font Style / Font Weight: Control the description typography.
Styles tiles in the completed state.
Background Color Complete: Set the completed tile background.
Border Color Complete / Border Size Complete / Border Style Complete: Control the completed tile border.
Styles the progress indicator.
Color / Completed Color: Set the bar background and the completed-portion color.
Controls how images are displayed.
Background Size: Set how the image scales.
Background Position: Set the image position.
Styles the embedded video container.
Height: Set the video player height.
The Welcome Mat exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Welcome Mat component, and pick the output variable you need.
When a user clicks a tile.
Clicked Item
Record (SObject)
The tile record the user clicked.
Clicked Item Name
Text (String)
The name (key) of the clicked tile.
Example: After the user clicks a tile, store Clicked Item Name in a Text variable, then use a Decision element to branch the flow based on which tile was selected.
Primary Button Clicked
Boolean
true if the user clicked the primary action button before advancing.
Secondary Button Clicked
Boolean
true if the user clicked the secondary action button before advancing.
Search Button Clicked
Boolean
true if the user submitted a search query before advancing.
Dismissal Checked
Boolean
true if the user checked the dismissal checkbox (e.g., "Don't show this again") before advancing.
Example: Store Dismissal Checked in a Boolean variable and use it downstream to skip the Welcome Mat screen on future flow runs.
Like all interactive Flow components, the Welcome Mat exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?
Was this helpful?