--- title: "Edit a Pop-up" slug: "edit-a-pop-up" updated: 2024-10-11T17:06:00Z published: 2024-10-11T17:06: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. # Edit a Pop-up Edit an existing Pop-up and customize it to suit your needs. 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) 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) 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. | 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) 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. 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) 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) 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) 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) 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)