---
title: "Create a Pop-up (Old Experience)"
slug: "creating-pop-ups"
tags: ["pop-up", "Visual Editor"]
updated: 2026-04-30T07:59:00Z
published: 2026-04-30T07:59:00Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a Pop-up (Old Experience)

Pop-ups can grab your users' attention for something that needs their immediate attention as soon as they go to a particular page of your application. Enhance the Pop-up experience by attaching a Flow, Survey, Video, Image, or GIF to it.

> [!WARNING]
> Your title goes here
> 
> Whatfix enables you to create professional Popups in minutes without any CSS or coding, with access to 50+ ready-to-use templates, along with drag-and-drop editing, element resizing and spacers, native GIF support to enhance engagement, and Undo or Redo functionality to experiment and iterate easily.
> 
> 
> 
> The **new Pop-up Templates** is a Beta feature. For more information, see [**Create Pop-ups with New Templates**](https://portal.document360.io/studio/docs/create-pop-up-with-templates).

Pop-up creation is a two-step process: [Step 1: Create the Pop-up using the Visual Editor](/studio/docs/creating-pop-ups#step-1-create-the-popup) [Step 2: Configure the Pop-up Visibility Rules](/studio/docs/creating-pop-ups#step-2-configure-the-popup-visibility-rules)

Info:

Expand the accordion(s) below for more details.

## Step 1: Create the Pop-up using the Visual Editor

Create a Pop-up in the following two ways:

- Pop-up creation using Visual Editor through Whatfix Studio
- Pop-up creation using Visual Editor through the Whatfix Dashboard

     Pop-up Creation using the Visual Editor through Whatfix Studio
    
     

The Visual Editor enables you to design and customize the components in Whatfix Pop-ups easily, eliminating the need for code editing. With the Drag-and-Drop feature, you can resize Pop-ups, add or delete components, and add customizations directly in the UI.

Use the following steps to create a Pop-up using the Visual Editor through Whatfix Studio:

1. Log in to the application where you want to create content, and then launch **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png)
2. On the Whatfix Studio, click **Popup**. ![clm_studio_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_pop-up.png)
3. Choose the color theme using the **Theme** dropdown. ![2024-10-18_16-49-43.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_16-49-43%281%29.png)

          Note:

          

Use custom color by entering the hex color code in the text box. ![Add hex color code for Pop-ups before you select a template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Pop-ups_hexcolor_code.png)

1. Select a template, for example **Feature Onboarding**. ![Select_popup_template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_popup_template.png)
2. Enter a name for the Pop-up segment. ![Enter_popup_segment](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Enter_popup_segment_name.png)
3. On the Pop-up template, edit the **Title** and **Description** for your Pop-up. ![Edit_Popup_Title](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%208.58.17%20AM.png)

Info:

To customize and align the text, hover your cursor over any text and then double-click to open the **Rich Text Editor**. For more information on Rich Text Editor, see [Add Rich Text Content Inside a Pop-up using the Visual Editor.](/studio/docs/adding-rich-text-content-inside-a-pop-up)

1. On the Pop-up template, edit the **Button Name** for your Pop-up.  ![Pop-up button text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.04.37%20AM.png)

Info:

To customize the Button text, hover your cursor over any text and then double-click to open the Rich Text Editor. ![Button_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.08.48%20AM%282%29.png)

1. To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu. ![Button_configurations](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.10.27%20AM.png)
2. Click the dropdown next to **Action**, and then select the button action. ![Button_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.13.43%20AM%281%29.png)

The following table lists the different types of Button Action, their behaviors and descriptions:

| Button Action | Behavior |
| --- | --- |
| **Start Flow** | When the user clicks this button, they are taken to a Whatfix Flow that is attached to the button. |
| **Attach URL** | When the user clicks this button, they are taken to the URL that is attached to the button. |
| **Skip** | When the user clicks this button, the particular Pop-up is omitted and they continue to see the Pop-up until they click the **Close** or **Don't show me again** button. |
| **Close** | When the user clicks this button, they close the particular Pop-up. |

Info:

Additionally, make the following changes in the button configuration menu:

- Change the button **Type** to **Primary Button** or **Secondary Button**.

  

![Button_Type](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_Type.gif)
- Click the **Button Style** icon to change the **Color**, **Hover color**, and **Corner radius** of the button.

  

![Button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_config.gif)
- Click the **Button Resize** icon to resize the button.

  

![Button_resize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_resize.gif)
- Click the **Horizontal Align** icon to align the button horizontally.

  

![Horizontal Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Horizontal%20Align.gif)
- Click the **Vertical Align** icon to align the button vertically.

  

![Vertical Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Vertical%20Align.gif)

1. On the Rich Text Editor, click the **+** icon. The **Add Component** dialog box opens. ![Add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.55.51%20PM.png)
2. Using **Add Component**, add **Text**, **Button**, **Image/GIF**, **Video**, and **Audio** to the Pop-up. ![open_add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/open_add_component.png)

Note:

- Add up to 24 components to the Pop-Up, using the **Add Component** tab.

  

![Add component(2)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add%20component%282%29.gif)
- The Pop-Up follows a structured grid layout, with a 6x4 configuration that is 6 rows and 4 columns.
- The Visual Editor supports a maximum of 6 rows and 4 columns that is 24 components in the Pop-up template.

Info:

- Using the **Drag and Drop** feature, move or re-position different components on the Pop-up, both vertically (row-wise) and horizontally (column-wise).
- Each component has two Drag Handlers, the Horizontal Drag Handler and the Vertical Drag Handler for moving the component.

    

![Drag Handlers](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Drag%20Handlers.gif)

Note:

When you make changes to the Pop-up using the Drag Handlers, you may unfortunately not be able to undo certain changes. In that case, you may need to re-create the Pop-up. For more information, see [Can I undo the changes made with the Drag Handlers?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers).

1. Under **CONTROL**, choose if you want to show the **'x' icon on the Popup** and **Don't show me again** checkbox by enabling the toggles. ![control_panel.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/control_panel%281%29.png)

Note:

The following table lists the different types of Button Behavior and descriptions that can be added to a Pop-up:

| Button | Behavior | Example: A Pop-up is set to display twice |
| --- | --- | --- |
| **Close button or "X" icon** | Clicking either of these buttons closes the Pop-up and the display is counted as one view | A user who clicks **Close** and exits the Pop-up will see the Pop-up again based on the its display count. |
| **Don't show me again** | The user clicks the check-box to make sure the Pop-up never appears again. The count reduces to zero. | A user who clicks the **Don't show me again** check-box will never see the Pop-up again. It does not matter if the count has not been reached. |

Info:

  - To change the **Pop-up Background Color**, choose the color from the existing color palette or enter the hex code of the desired color. ![under_control_click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/under_control_click.png)
  - To add a **Pop-up Background Image**, click **Upload image**. ![click_upload_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_image.png)
  - Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery. ![click_upload_img](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_img.png)
  - Only .jpg, and .png image formats that are up to 4 MB in size are supported.
2. To configure the Pop-up position, enable the **Position Popup** toggle. ![position_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/position_popup.png)

Info:

- By default, the Pop-up appears at the center of the page, and end users cannot interact with other elements on the application as long as they close or interact with the Pop-up.
- If you enable the **Position Popup** toggle, your end users can interact with other elements on your application.
- If you enable the **Position Popup** option and select the center position, the Pop-up scrolls along with the page content. To keep the Pop-up visible without scrolling, use any other position instead. For more information, see [Pop-up scrolls with the page when positioned at center](/studio/docs/pop-up-scrolls-with-the-page-when-positioned-at-center).

1. Set the **Position** of the Pop-up. ![set_position_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/set_position_popup.png)
2. Click **Save Popup**. ![Studio_clicksavepopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_16-51-24.png)

     Pop-up Creation using Visual Editor through the Dashboard 
    
     

Use the following steps to create Pop-ups using the Dashboard:

1. On the Whatfix Guidance dashboard, click **Widgets**. ![ia_left_nav_widgets](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png)
2. Click **Pop-ups**. ![ia_widget_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_popups.png)

1. Click **Create widget**. ![CLM_DB_CreateWidget.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_CreateWidget.png)
2. Click **Pop Up**. ![CLM_DB_Pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_Pop-up.png)
3. Choose the color theme using the **Theme** dropdown. ![RB_DB_selectthemes](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_selectthemes.png)

Note:

Use your custom color by entering the hex color code in the text box.

1. Select the Pop-up template.
2. Enter a name for the Pop-up segment by clicking the **Untitled Pop-up** text on top. ![Edit_popup_text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.10.01%20AM.png)
3. Edit the **Title, Description**, and the **Button Name**. ![Edit_Popup_Title](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%208.58.17%20AM.png)

Info:

To customize and align the text, hover your cursor over any text and then double-click to open the **Rich Text Editor**.

For more information on Rich Text Editor, see [Add Rich Text Content Inside a Pop-up using the Visual Editor.](/studio/docs/adding-rich-text-content-inside-a-pop-up)

1. On the Pop-up template, edit the **Button Name** for your Pop-up.  

![Pop-up button text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.04.37%20AM.png)

Info:

To customize the Button text, hover your cursor over any text and then double-click to open the Rich Text Editor. ![Button_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.08.48%20AM%282%29.png)

1. To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu. ![Button_configurations](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.10.27%20AM.png)
2. Click the dropdown next to **Action**, and then select the button action. ![Button_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.13.43%20AM%281%29.png)

| Button Action | Behavior |
| --- | --- |
| **Start Flow** | When the user clicks this button, they are taken to a Whatfix Flow that is attached to the button. |
| **Attach URL** | When the user clicks the button, they are taken to the URL that is attached to the button. |
| **Skip** | When the user clicks this button, they skip the particular Pop-up and continue to see the Pop-up until they click the close or do not show me again button. |
| **Close** | When the user clicks this button, they close the particular Pop-up. |

Info:

Additionally, make the following changes in the button configuration menu:

- Change the button **Type** to **Primary Button** or **Secondary Button**.

  

![Button_Type](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_Type.gif)
- Click the **Button Style** icon to change the **Color**, **Hover color**, and **Corner radius** of the button.

  

![Button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_config.gif)
- Click the **Button Resize** icon to resize the button.

  

![Button_resize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_resize.gif)
- Click the **Horizontal Align** icon to align the button horizontally.

  

![Horizontal Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Horizontal%20Align.gif)
- Click the **Vertical Align** icon to align the button vertically.

  

![Vertical Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Vertical%20Align.gif)

1. On the Rich Text Editor, click the **+** icon. The **Add Component** dialog box opens. ![click_add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_component.png)
2. Using **Add Component**, add **Text**, **Button**, **Image/GIF**, **Video**, and **Audio** to the Pop-up. ![open_add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/open_add_component.png)

Note:

- Add up to 24 components to the Pop-Up, using the **Add Component** tab.

  

![Add component(2)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add%20component%282%29.gif)
- The Pop-Up follows a structured grid layout, with a 6x4 configuration that is 6 rows and 4 columns.
- The Visual Editor supports a maximum of 6 rows and 4 columns that is 24 components in the Pop-up template.

Info:

- Using the **Drag and Drop** feature, move or re-position different components on the Pop-up, both vertically (row-wise) and horizontally (column-wise).
- Each component has two Drag Handlers, the Horizontal Drag Handler and the Vertical Drag Handler for moving the component.

    

![Drag Handlers](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Drag%20Handlers.gif)

Note:

When you make changes to the Pop-up using the Drag Handlers, you may unfortunately not be able to undo certain changes. In that case, you may need to re-create the Pop-up. For more information, see [Can I undo the changes made with the Drag Handlers?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers).

1. Choose if you want to show the **X icon on popup** and **Don't show me again** options by enabling the respective toggles under **Controls**.  

![Controls_toggles](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.16.14%20AM.png)

Note:

| Button | Behavior | Example: A Pop-up is set to display twice |
| --- | --- | --- |
| **Close button or "X" icon** | Clicking either of these buttons closes the Pop-up and the display is counted as one view | A user who clicks Close and exits the Pop-up will see the Pop-up again based on its display count. |
| **Don't show me again** | The user clicks the check-box to make sure the Pop-up never appears again. The count is reduced to zero. | A user who clicks the Don't show me again check-box never see the Pop-up again. It does not matter if the count has not been reached. |

Info:

- To change the **Pop-up Background Color**, choose the color from the existing color palette or enter the hex code of the desired color. ![Background_color](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.18.40%20AM.png)
- To add a **Pop-up Background Image**, click **Upload image**. ![Click_upload_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.22.47%20AM.png)
- Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery. ![click_upload_img](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_img.png)
- Only .jpg, and .png image formats that are up to 4 MB in size are supported.

1. To configure the Pop-up position, enable the **Position Popup** toggle.  

![Popup_position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.25.20%20AM.png)

Note:

- By default, the Pop-up appears at the center of the page, and end users cannot interact with other elements on the application as long as they close or interact with the Pop-up.
- If you enable the **Position Popup** toggle, your end users can interact with other elements on your application.
- If you enable the **Position Popup** toggle and select the center position, the Pop-up scrolls along with the page content. To keep the Pop-up visible without scrolling, use any other position instead. For more information, see [Pop-up scrolls with the page when positioned at center](/studio/docs/pop-up-scrolls-with-the-page-when-positioned-at-center).

1. Set the position of the Pop-up.  

![Configure_popup_position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.26.36%20AM.png)

Note

If your end user is using a mobile browser, then even if you have enabled the **Position Popup** toggle and configured the Pop-up position, your end user sees the Pop-up at the center of the page. This happens because of the limited screen space on mobile browsers.

1. Click **Save** to save the Pop-up, or continue configuring the Pop-up.  

![RB_DB_clicksave](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_clicksave.png)

## Step 2: Configure the Pop-up Visibility Rules

     Configure the Pop-up Visibility Rules
    
     

Use the following steps to configure a Pop-up:

1. On the Whatfix Guidance dashboard, click **Widgets**. ![ia_left_nav_widgets](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png)
2. Click **Pop-ups**. ![ia_widget_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_popups.png)
3. Hover your cursor over the Pop-up segment you want to configure, and then click the **Edit** icon. ![CLM_DB_Click_edit_icon.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_Click_edit_icon.png)

1. Click **Set Visibility Rules →**. ![RB_DB_setvisirulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_setvisirulespopup.png)
2. Set the **Where** [Visibility Rules](/studio/docs/visibility-and-display-rule-conditions) for the Pop-up to appear. ![RB_DB_popupwhererules](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_popupwhererules.png)

Info:

- If you have configured multiple Pop-ups with different Visibility Rules to appear on the same page, the Pop-up configured with **User Action Completed** as the Visibility Rule is always shown first when the end user performs the User Action.
- If you are using new visibility rules, see [how to upgrade your widgets from existing Visibility Rules to the new Visibility Rules experience](/studio/docs/migrate-your-widgets-from-existing-visibility-rules-to-advanced-visibility-rules).

1. Set the **When** Visibility Rules for the Pop-up. See, [Schedule Pop-ups](/studio/docs/scheduling-pop-ups)  

![RB_DB_whenrulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_whenrulespopup.png)

Note:

If the Pop-up has a Skip button and when your end users click the Skip button, it is not considered as an interaction and the Pop-up will be displayed to them regardless of the occurrences you have set.

1. Click **Finish later** or **Edit Popup** depending on your preference.  

![RB_DB_popupfinishlater](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_popupfinishlater.png)

- **Finish later**: Saves the Pop-up as Draft and marks it as Inactive.
- **Edit Pop-up**: Takes you back to the Pop-up where you can make changes.

1. Once you are done creating the pop-up, select the widget, and then click **Send to Ready**. ![clm_db_send_to_ready](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready.png)
2. Go to the **Ready** Stage and select the segment you want to publish, and then click **Publish**. ![clm_db_push_to_production](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_push_to_production.png)

Info:

- After publishing, analyze the engagement of end users with the Pop-up from different cities, countries, and more, using Product Analytics. For more information, see [How can I see analytics of Pop-ups using Trend Insights?](/studio/docs/how-can-i-see-analytics-of-pop-ups-using-trend-insights)
- If you want to create Pop-ups using AI, see [Create Pop-ups using AI](/studio/docs/create-ai-pop-ups).

          Note:

          

If you're using the [JS Embed method](/studio/docs/integrating-whatfix-using-javascript) to test or publish Whatfix content, add the relevant conditions in Map Stages. This ensures that the content appears in the correct instance. For more information, see [How to add conditions in Map Stages?](/studio/docs/how-are-the-visibility-rules-evaluated-while-mapping-stages) (Log in to see the article)

         

The Whatfix Rich Text Editor enables you to format content using multiple options. It also enables you to link and include multimedia content.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/image-1720150380939.png)

The primary button is associated with a positive user action based on the Pop-up's contents. For example, trigger a flow or open a URL.

The Secondary Button is used to close or dismiss the Pop-up without triggering any specific action.

Drag Handlers are used to move or reposition the component within the Pop-up.

Use the Horizontal Drag Handler to move the component horizontally (column-wise).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/Horizontal_DH.gif)

Use the Vertical Drag Handler to move the component vertically (column-wise).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/use%20vertical%20drag%20handler.gif)

## Related

- [Pop-ups Best Practices](/pop-ups-best-practices.md)
- [Trigger a Flow using the Pop-up Visual Editor](/pop-up-with-flow-attached.md)
- [Insert an Image in a Pop-up](/inserting-an-image-in-a-pop-up.md)
- [Embed Videos in Pop-ups](/embed-videos-in-pop-ups.md)