> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/welcome-mat.md).

# Welcome Mat

## Overview

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

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.

***

## Configuration

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.

### Data Source

The **Data Source** setting determines which items appear as interactive tiles on the right side.

| Data Source                                                      | Best For                              | When to Use                               |
| ---------------------------------------------------------------- | ------------------------------------- | ----------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined tiles              | Static onboarding steps that never change |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Tiles from a Flow collection variable | Dynamic tiles driven by prior flow steps  |

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

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.

<figure><img src="/files/mADHD9MznBXqIdwaP6lo" alt="" width="188"><figcaption></figcaption></figure>

**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.

<figure><img src="/files/nmtTjsPIx2yMNzQUeD9L" alt="" width="322"><figcaption></figcaption></figure>

### Data Mapping

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.

### Properties

**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.

### Primary Button

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.

### Secondary Button

Add a secondary action button alongside the primary button. Configured the same way as the Primary Button.

### Layout

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).

### Search

**Allow Search** displays a search box below the title and caption.

**Search Value** pre-populates the search box with a default value.

### Progress

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.

### Video

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.

{% hint style="warning" %}
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.
{% endhint %}

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Welcome Mat. Configure them from the **Interactions** tab of the Edit Welcome Mat panel.

### Primary Button Click

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.

### Secondary Button Click

Fires when the user clicks the secondary action button. Use this to offer an alternative path, skip a step, or show supplementary content.

### Search

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.

***

## Styling

The **Style** tab lets you customize nearly every element of the Welcome Mat. Configure it from the **Style** tab of the Edit panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the Welcome Mat.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between content and the border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
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.
  {% endtab %}

{% tab title="Size" %}
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.
  {% endtab %}

{% tab title="Banner" %}
Styles the overall banner area.

* **Background Color:** Set the banner background color.
* **Content padding bottom:** Adjust the space below the content.
* **Items Container Background Color:** Set the background of the items container.
  {% endtab %}

{% tab title="Title" %}
Styles the main heading text.

* **Color:** Set the title text color.
* **Font Size / Font Style / Font Weight / Font Family:** Control the title typography.
  {% endtab %}

{% tab title="Caption" %}
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.
  {% endtab %}

{% tab title="Subtitle" %}
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.
  {% endtab %}

{% tab title="Item" %}
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.
  {% endtab %}

{% tab title="Item Title" %}
Styles the title of each tile.

* **Text Color:** Set the title text color.
* **Font Size / Font Style / Font Weight:** Control the title typography.
  {% endtab %}

{% tab title="Item Description" %}
Styles the description within each tile.

* **Text Color:** Set the description text color.
* **Font Size / Font Style / Font Weight:** Control the description typography.
  {% endtab %}

{% tab title="Item Complete" %}
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.
  {% endtab %}

{% tab title="Progress Bar" %}
Styles the progress indicator.

* **Color / Completed Color:** Set the bar background and the completed-portion color.
  {% endtab %}

{% tab title="Search Button" %}
Styles the search button.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background across states.
* **Icon Color / Icon Color Active / Icon Color Hover:** Set the icon color across states.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color across states.
* **Border Size / Border Style / Border Radius:** Control the border thickness, line style, and corner roundness.
  {% endtab %}

{% tab title="Image" %}
Controls how images are displayed.

* **Background Size:** Set how the image scales.
* **Background Position:** Set the image position.
  {% endtab %}

{% tab title="Video Player" %}
Styles the embedded video container.

* **Height:** Set the video player height.
  {% endtab %}

{% tab title="Primary Button" %}
Styles the main action button. Colors are set per button variant.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background across states.
* **Text Color / Text Color Active / Text Color Hover:** Set the text color across states.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color across states.
  {% endtab %}

{% tab title="Secondary Button" %}
Styles the secondary action button. Colors are set per button variant.

* **Background Color / Background Color Active / Background Color Hover:** Set the button background across states.
* **Text Color / Text Color Active / Text Color Hover:** Set the text color across states.
* **Border Color / Border Color Active / Border Color Hover:** Set the border color across states.
  {% endtab %}
  {% endtabs %}

***

## Output Variables

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.

### Item Interaction

When a user clicks a tile.

| Output variable       | Type             | What it returns                     |
| --------------------- | ---------------- | ----------------------------------- |
| **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.

### Button Clicks

| Output variable              | Type    | What it returns                                                          |
| ---------------------------- | ------- | ------------------------------------------------------------------------ |
| **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.            |

### Others

| Output variable       | Type    | What it returns                                                                                     |
| --------------------- | ------- | --------------------------------------------------------------------------------------------------- |
| **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.

### Flow Interaction Output Variables

Like all interactive Flow components, the Welcome Mat exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/flow-components/welcome-mat.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.