# 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="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FaYNYdktXvMf0OkW7Mejv%2Fimage.png?alt=media&#x26;token=ad625ba9-5ff2-4f0b-adf5-b388a7247b4d" alt=""><figcaption></figcaption></figure>

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

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

#### Example configuration

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FO6HX1HnQZAdxbKMHssYh%2Fimage.png?alt=media&#x26;token=ebb5eda5-b46b-4256-909b-02118895cbc7" 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="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FPOXmK13xr0U1VsyEv5lw%2Fimage.png?alt=media&#x26;token=fef8c51c-b886-4699-a450-e7bf900cb3de" 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="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2Fr037e7hAkee3Svq2QAgX%2Fimage.png?alt=media&#x26;token=6b003c1e-603a-4fe9-a9d6-c366f2273fe7" 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="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FqQ9E9x4rBrYVECsEmVlb%2Fimage.png?alt=media&#x26;token=cd0efb6d-ca42-4093-8396-f9b97b1ad413" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FFc5V2dNYikEQjEHqCo6t%2Fimage.png?alt=media&#x26;token=ecb4cfc7-b027-4d91-9e63-3b7fa4d5f4a4" alt=""><figcaption></figcaption></figure>

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