---
title: "Edit a Pop-up"
slug: "edit-a-pop-up"
updated: 2026-08-11T06:52:33Z
published: 2026-08-11T06:52:33Z
canonical: "support.whatfix.com/edit-a-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.

# Edit a Pop-up

Edit an existing Pop-up and customize it to suit your needs.

> [!WARNING]
> your title goes here
> 
> - Pop-ups created using the old Pop-up method cannot be edited using the Visual Editor. ![Edit_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2011.24.58%20AM.png)
> - Click **Continue anyway** to proceed with editing the Pop-up using the old Pop-up method, or click **Recreate** to recreate the Pop-up using the Visual Editor using any of the [6 Pop-up templates](/studio/docs/choosing-the-pop-up-template).
> - Please recreate any Pop-ups you wish to edit by December 2024.
> - When you recreate the Pop-up using the Visual Editor, visibility rules from the old Pop-up are retained.

Use the following steps to edit a Pop-up using the Visual Editor through 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)
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. 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)

> [!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 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)

> [!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)

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

> [!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)
> - 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)

> [!WARNING]
> Note
> 
> - Add up to 24 components to the Pop-Up, using the **Add Component** tab.
> 
> ![Add component2](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.

> [!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)

> [!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?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers).

1. Choose if you want to show the **Carousel Dots** and **Carousel Arrows** by enabling/disabling the respective toggles. ![enable_carousel_dots](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2010.50.40%20AM.png)
2. 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)

> [!WARNING]
> 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 on the application as long as they close/interact with the Pop-up.
> - If you enable the Position-Pop toggle, your end users will also be able to interact with other elements on your application.

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)

> [!WARNING]
> 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 the **+** icon to add a new slide to the carousel pop-up. ![add_new_slides](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/add_new_slides.png)

> [!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. Once you are done creating the Pop-up, click **Save**. ![click_save_popup1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_save_popup1.png)

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-up Images/Videos do not appear to end users](/pop-up-imagesvideos-not-appearing-to-end-users.md)