---
title: "Create a Carousel Pop-up"
slug: "create-a-carousel-pop-up"
updated: 2026-08-13T14:00:10Z
published: 2026-08-13T14:00:10Z
canonical: "support.whatfix.com/create-a-carousel-pop-up"
---

> ## 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 Carousel Pop-up

The Carousel Pop-up template is designed to help you communicate brief product information in the form of slides that your users can swipe through. Use the carousel Pop-up template to create a sense of curiosity among your users by conveying multiple pieces of information (text, videos, or images) using slides that are compiled together in a single Pop-up.

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

**Create the Carousel Pop-up using Visual Editor**

Use the following steps to create a Carousel Pop-up using the Visual Editor:

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

          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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

1. Select the **Carousel** template. ![carousel_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel_pop-up.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Enter the number of carousel slides you wish to have in your Pop-up, and then click **Create**. ![Studio_pop-up_slides](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_pop-up_slides.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!WARNING]
> your title goes here
> 
> - Add up to **6 slides** in Carousel Pop-Up using the Visual Editor.
> - Move the slides to the desired positions in the Pop-up by dragging and dropping the slide number.
> - Remove a particular slide by clicking the **X** icon that appears next to the slide number.
> - Since, it is a Carousel Pop-up, it needs to have at least 2 slides. If your Pop-up contains 6 slides, up to 4 slides can be removed.

1. 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%202.42.48%20PM.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!NOTE]
> your title goes here
> 
> 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 content in a pop-up using the rich text editor](/desktop/docs/adding-content-inside-a-pop-up-using-rich-text-editor).

1. On the Pop-up template, edit the **Button Name** for your Pop-up. ![Edit_button_name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.44.41%20PM.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!NOTE]
> your title goes here
> 
> 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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. |

> [!NOTE]
> your title goes here
> 
> 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Using **Add Component**, you can 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!WARNING]
> 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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.

> [!NOTE]
> your title goes here
> 
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!WARNING]
> your title goes here
> 
> 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?](/desktop/docs/can-i-undo-the-changes-made-with-the-drag-handlers)

1. Click the **+** icon to add a new slide to the Carousel Pop-up. ![Add_new_slide](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.59.13%20PM.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Under **CONTROL**, choose if you want to show the **'x' icon on the Popup** and **Don't show me again** by enabling the toggles. ![enable_xicon_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/enable_xicon_popup.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
3. Choose if you want to show the **Carousel Dots** and **Carousel Arrows** by enabling/disabling the respective toggles. ![enable_carousel arrow_edit.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel%20arrow_edit.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!NOTE]
> your title goes here
> 
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
> - Only .jpg, .png, and .gif image formats that are up to 4 MB in size are supported.

1. If you want to configure the Pop-up position, enable the **Position Pop-up** toggle. ![position_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/position_popup.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!NOTE]
> your title goes here
> 
> - By default, the Pop-up appears at the center of the page, and end users can not interact with other elements of the application as long as they close or interact with the Pop-up.
> - If you enable the Position-Pop toggle, your end users will also be able to interact with other elements of your application.

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Once you are done creating the Pop-up, click **Save Popup**. ![click_save_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_save_popup.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

### 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Click **Pop-ups**. ![ia_widget_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_popups.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

1. Click **Set Visibility Rules →**. ![RB_DB_setvisirulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_setvisirulespopup.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!NOTE]
> your title goes here
> 
> 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.

1. Set the **When** Visibility Rules for the Pop-up. For more information, see [Schedule Pop-ups](/desktop/docs/schedulingpop-ups). ![RB_DB_whenrulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_whenrulespopup.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

> [!WARNING]
> your title goes here
> 
> 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

- **Finish later**: Saves the Pop-up as Draft.
- **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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)
2. Go to the **Ready** Stage and select the segment you want to move to Production Stage, and then click **Push to production**. ![clm_db_push_to_production](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_push_to_production.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)

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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A59%3A44Z&se=2026-11-12T09%3A59%3A44Z&sr=c&sp=r&sig=8tXC%2FWh3U88PQz1ZdwA3KlQVzj1JZFBcUfqwGQZlL9g%3D)