# Message

A message is a popup that can be displayed at the top of your page.

Once you’ve added your message element, click “Edit Message”.

Often, you need to add interactions to manage opening and closing message.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FsOzwpkbkBmxEgaqNW0op%2Fimage.png?alt=media&#x26;token=ae4345fa-25aa-4b6c-96ec-71df4bcb9698" alt=""><figcaption></figcaption></figure>

A popup area will appear. Next, drag in other elements, such as text, to build your message.

## Properties

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FnWxXkDtpO9uvln7gx4Wq%2Fimage.png?alt=media&#x26;token=d847b655-a346-4814-97c8-a5c62406be23" alt=""><figcaption></figcaption></figure>

**Type:** Select a message type. This option styles your message's background color based on the colors set in your theme. Options include: success, warning, info, error, or custom.

**Duration:** Specify how long the message will be displayed on the screen.

**Offset top:** Set the distance (in pixels) from the top edge of the screen.

**Show close icon:** When toggled on, users will be able to close the message manually.

**Z-index:** Set the z-index of the message. It is used to ensure that the modal is displayed on top. See [CSS doc](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) for more details.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") for tooltip configurations.

## Displaying a message

To trigger the message popup, set up an interaction on another element, such as a button.

Here is an example for a button click to trigger the message popup.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkWdZq2Y73PI5nKh1Vdpp%2Fimage.png?alt=media&#x26;token=b72ad4c9-4e5f-4b73-a9f5-48fb9290335f" alt=""><figcaption><p>Use interaction to show a message</p></figcaption></figure>

## Supported Events

**Close Message:** Triggered when a user closes the message.

## Supported Actions

**Show Message:** Display message on the screen.

**Close Message:** Close message.

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}