# Send Message Popup

## Overview

![](https://4051367598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD8v0DEN20QQwdYStdXm8%2Fuploads%2FKJRpoIYEU0z1qaP14Hn8%2F120.png?alt=media\&token=8230b9e4-a5be-49d6-88f1-dd429136321e)

This popup is helpful for the following uses cases:

* To send a message to a User
* To send a message to a company
* To request more information about a product or other unique thing
* To begin a customer support chat
* To display a form with any image elements at the top

{% hint style="info" %}
If you are displaying a product within this popup, it's best to change the roundness on the profile picture from 360px to 12px so that the product image isn't cropped. 
{% endhint %}

## Structure

* This popup contains two inner groups, which are shown conditionally based on the **var - step** value. The var - step value is 1 by default and changes to 2 after the user clicks Button Send Message element to show the confirmation UI. 
  * **Group Contact user - step 1**
    * This group contains the User profile and form elements to send a message
  * **Group Contact user - step 2**
    * This group shows a confirmation message that the message was successfully sent.
* Clicking on **Group close (send message)** or **Button Cancel** will close the popup.

## How to set up

* Add a display data action that changes the data source of the **Popup Send message** to be the just-clicked User. 
  * By default, the data source is set to "Do a Search for Users: first item". 
* In that same workflow, make sure the **var - step** value is set to **1.**
  * This ensures that the **Group Contact user** **- step 1** element is visible each time the popup is opened. 
* Add any other inputs that your form will need. 
* Hide or delete any inputs that may not be needed.