> For the complete documentation index, see [llms.txt](https://docs.fastn.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fastn.ai/tutorials-1/flow-customization-and-operations/how-to-customize-success-and-error-messages-ui-in-flows.md).

# How to Customize Success and Error Messages UI in Flows?

In **Flows**, you can display customized success and error messages to inform users about the outcome of a Flow execution.

{% hint style="info" %}
By default, success and error messages are shown as text notifications, but you can extend them into a UI format using the **`userMessage`** variable.
{% endhint %}

## What is userMessage?

**`userMessage`** is a Flow variable that enables you to define a custom interface for displaying messages on screen when a Flow runs.

> You can use it in both **Success Message** and **Error Message** components to present dynamic text, headers, or UI feedback.

## When to Use?

Use `userMessage` when you want to:

* Show a UI message confirming an action (e.g., successful activation or data sync)
* Display clear, branded, or styled error messages to users
* Customize the on-screen response after an API request or connector action completes

## How to Configure?

### **Step 1: Add a Success or Error Message Component**

In your Flow, add either:

* **Success Message** component → for successful runs
* **Error Message** component → for failed runs

{% hint style="info" %}
Place this component right after your API request or as the first step after the Flow trigger.
{% endhint %}

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

### **Step 2: Set User Message Variables**

You can define custom values for `userMessage` & `userMessageHeader` .

#### Example configuration

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

### **Step 3: Add the JSON Configuration**

Insert the following JSON code in your Flow to render the message UI dynamically:

```json
{
  "json": {
    "userMessage": "Google has been activated successfully!",
    "userMessageHeader": "Activation Succeeded"
  },
  "actions": {
    "json": {
      "action": [],
      "targetType": "object"
    },
    "json.userMessage": {
      "action": [],
      "targetType": "string"
    },
    "json.userMessageHeader": {
      "action": [],
      "targetType": "string"
    }
  }
}
```

This JSON enables the Flow to display the success UI message when executed successfully.

> You can modify the text or header based on your use case.

### Example Use Case

**Scenario:** After a new Microsoft account is activated via API.

#### **Implementation**

* Add a **Success Message** component.
* Set the `userMessage` and `userMessageHeader` values.
* Use the above JSON structure.
* Deploy the changes to live.

<figure><img src="/files/7DUqVgIKpDSxekt9rEb7" alt=""><figcaption></figcaption></figure>

### **Attach the Flow to the App Widget**

In the **widget** for the Google app (or any other app for your use case), add the Flow you created for activation.

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

> Deploy the changes to live, and you will be able to see the updated UI upon activation in the **Preview** section.

This ensures the Flow runs automatically when the widget action is triggered, for example, when a user clicks **Activate** or performs an API-based operation.

<figure><img src="/files/3zhdbQNNidKSiKL9qDAV" alt=""><figcaption></figcaption></figure>

\
After successful authentication by using the **Connect** button, a UI message appears displaying:

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

> **Activation Succeeded**\
> Your Google account has been activated successfully!


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.fastn.ai/tutorials-1/flow-customization-and-operations/how-to-customize-success-and-error-messages-ui-in-flows.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.