---
title: "Customize the Pop-up templates using Visual Editor"
slug: "customize-the-pop-up-template-using-visual-editor"
updated: 2025-03-20T06:02:50Z
published: 2025-03-20T06:02:50Z
canonical: "support.whatfix.com/customize-the-pop-up-template-using-visual-editor"
---

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

# Customize the Pop-up templates using Visual Editor

The {{variable.Template Designer}} enables the design and customization of components in Whatfix Pop-ups, eliminating the need for code editing. The Drag-and-Drop feature enables content creators to resize Pop-ups, add or delete components, and add customizations directly in the UI

:::(Warning) (Note:)
* Customize a Pop-up during the Pop-up creation using Whatfix Studio. For more information on creating a Pop-up, see [Create a Pop-up](/studio/docs/creating-pop-ups){target=`_blank`}.
* Customize a Pop-up after creating it using the **Edit** icon on the Dashboard.  
![Edit_popup_DB](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Edit_popup_DB%281%29.png){height="" width="500"}    
:::
    
### Use Cases    
<div class="accordion">
<div class="accordion-toggle">Add an extra button</div>
<div class="accordion-content">
<p>

Use the following steps to add an extra button in the Pop-up using the Add Component on the Visual Editor:  
1. On the Pop-up template, hover your cursor over the button corner and then click to open the button configuration menu.
![RTE_Button_Edit](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RTE_Button_Edit.png){height="" width="500"}

2. 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){height="" width="500"}   
    
3. In the **Add Component** dialog box, click **Button**.   
![click_button.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_button.png){height="" width="500"}

The button gets added. 
    
:::(Info) (Info:)
Whatfix enables you to change the following button configurations:
* Change the button **Type** to **{{glossary.Primary Button}}** or **{{glossary.Secondary Button}}**.
    <div class="borderthick">

    ![Button_Type](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_Type.gif){height="" width="500"}
    </div>
        
* Click the **Button Style** icon to change the **Color**, **Hover color**, and **Corner radius** of the button.

    <div class="borderthick">

    ![Button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_config.gif){height="" width="500"}
    </div>
    
* Click the **Button Resize** icon to resize the button.
    <div class="borderthick">

    ![Button_resize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_resize.gif){height="" width="500"}
    </div>
    
* Click the **Horizontal Align** icon to align the button horizontally.
    <div class="borderthick">

    ![Horizontal Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Horizontal%20Align.gif){height="" width="500"}
    </div>
    
* Click the **Vertical Align** icon to align the button vertically.  
    <div class="borderthick">

    ![Vertical Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Vertical%20Align.gif){height="" width="500"}
    </div>
:::    

:::(Info) (Info:)
* Use the **Drag and Drop** feature to move or reposition the button around the Pop-up.
* Use the Drag Handlers to move or reposition the button both vertically (column-wise) and horizontally (row-wise).
        
<div class= "borderthick">    

![Button_DND](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button.gif){height="" width="500"}

</div>  
          
:::

:::(Warning) (Note:)
When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, re-create the Pop-up.
:::    
</div></div>  
   

<div class="accordion">
<div class="accordion-toggle">Add an Image or GIF</div>
<div class="accordion-content">
<p>

Use the following steps to add an image in the Pop-up using the Add Component on the Visual Editor:   
1. On the Pop-up template, double-click the text to open the **Rich Text Editor**.
![Click_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_RTE%281%29.png){height="" width="500"}

2. Click the **+** icon. The **Add Component** dialog box opens.
![click_add_component_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_component_icon.png){height="" width="500"}
    
3. On the **Add Component** dialog box, click **Image**. 
![click_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_image%281%29.png){height="" width="500"}
    
4. Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery. 
![click_add_img](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_img.png){height="" width="500"}
    
:::(Info) (Info:)
* The image URL must contain **https** if the Pop-up is displayed on a secure webpage.
* GIFs can also be added using the image dialog box.
* Only .jpg and .png image formats up to 4 MB in size are supported.
:::
    
5. Click **Insert**.
![click_insert](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_insert%281%29.png){height="" width="500"}

The image gets added. 
    
:::(Info) (Info:)
* Use the **Drag and Drop** feature to move or reposition the button around the Pop-up.
* Use the Drag Handlers to move or reposition the button both vertically (column-wise) and horizontally (row-wise).
        
<div class= "borderthick">  
    
![Image_dnd.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Image_dnd.gif){height="" width="500"}
    
</div>  
          
:::

:::(Warning) (Note:)
When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, re-create the Pop-up.
:::    
    
    
</div></div>       
    
    
<div class="accordion">
<div class="accordion-toggle">Add a video</div>
<div class="accordion-content">
<p>

Use the following steps to add a video in the Pop-up using the Add Component on the Visual Editor:     
    
1. On the Pop-up template, double-click the text to open the **Rich Text Editor**.
![Click_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_RTE%282%29.png){height="" width="500"}

2. Click the **+** icon. The **Add Component** dialog box opens.
![click_add_component_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_component_icon.png){height="" width="500"}
    
3. In the **Add Component** dialog box, click **Video**.
![Click_Video_Addcomponent](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Video_Addcomponent.png){height="" width="500"}

4. Paste the video URL.    
![Insert_video_url](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-06%20at%2011.26.00%20PM.png){height="" width="500"}
    
:::(Warning) (Note:)
The video URL must contain **https** if the pop-up is displayed on a secure webpage.
:::
    
5. Click **Insert**.    
 ![Click_insert_video](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_insert_video.png){height="" width="500"}

 :::(Info) (Info:)
* Use the **Drag and Drop** feature to move or reposition the button around the Pop-up.
* Use the Drag Handlers to move or reposition the button both vertically (column-wise) and horizontally (row-wise).
        
<div class= "borderthick">  
    
![Video_DND](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Video_DND.gif){height="" width="500"}
    
</div>  
          
:::
 
:::(Warning) (Note:)
When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, re-create the Pop-up.
:::
        
</div></div> 
    
<div class="accordion">
<div class="accordion-toggle">Add an extra Text box</div>
<div class="accordion-content">
<p>
    
Use the following steps to add an extra Text box in the Pop-up using the Add Component on the Visual Editor:     
1. On the Pop-up template, double-click the text to open the **Rich Text Editor**.
![Click_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_RTE%283%29.png){height="" width="500"}

2. Click the **+** icon. The **Add Component** dialog box opens.
![click_add_component_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_component_icon.png){height="" width="500"}
    
3. On the **Add Component** dialog box, click **Text**.    
![Click_Text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_Text.png){height="" width="500"}

The Text box gets added.
    
:::(Info) (Info:)
* Use the **Drag and Drop** feature to move or reposition the button around the Pop-up.
* Use the Drag Handlers to move or reposition the button both vertically (column-wise) and horizontally (row-wise).
        
<div class= "borderthick">  
    
![DND_Textbox](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DND_Textbox.gif){height="" width="500"}
    
</div>  
          
:::
 
:::(Warning) (Note:)
When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, re-create the Pop-up.
:::   
</div></div> 
    
    
<div class="accordion">
<div class="accordion-toggle">Add Pop-up background customizations</div>
<div class="accordion-content">
<p>
Customize the Pop-up background color and background image directly in the UI using the Visual Editor.
    
* Go to **Controls**, choose the **Color** of the Pop-up background 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){height="" width="500"}
         
* To add an **Image** to the Pop-up background, under **Controls** click **Upload image**.
![click_upload_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_image.png){height="" width="500"}

* Paste the embed URL of the image that 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){height="" width="500"}
    
* Click **Insert**.    

:::(Warning) (Note:)
* Only .jpg, and .png image formats up to 4 MB in size are supported.
:::
   
</div>
</div>

## Related

- [Pop-up Visual Editor](/pop-up-visual-editor.md)
- [Visual Editor](/visual-editor.md)