--- title: "Customize a Pop-up template" slug: "customize-a-pop-up-template" updated: 2026-08-13T14:00:22Z published: 2026-08-13T14:00:22Z canonical: "support.whatfix.com/customize-a-pop-up-template" --- > ## 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 a Pop-up template 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, content creators can resize Pop-ups, add or delete components, and add customizations directly in the UI. > [!WARNING] > your title goes here > > - Customize a Pop-up during the Pop-up creation using Whatfix Studio. To know more about creating a Pop-up, see [Create a Pop-up](/desktop/docs/pop-up). > - A Pop-up can also be customized after creation 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) ### Use Cases **Add an extra button** 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 3. On the **Add Component** dialog box, click **Button**. ![click_button.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_button.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) The button gets added. > [!NOTE] > your title goes here > > Whatfix enables you to change the following button configurations: > > - 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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!NOTE] > your title goes here > > - Using the **Drag and Drop** feature, move or re-position the button around the Pop-up. > - Using the Drag Handlers, the button can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise). > > ![Button_DND](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!WARNING] > your title goes here > > When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up. **Add an Image or GIF** 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!NOTE] > your title goes here > > - 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 that are up to 4 MB in size are supported. 1. Click **Insert**. ![click_insert](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_insert%281%29.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) The image gets added. > [!NOTE] > your title goes here > > - Using the **Drag and Drop** feature, move or re-position the image around the Pop-up. > - Using the Drag Handlers, the image can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise). > > ![Image_dnd.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Image_dnd.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!WARNING] > your title goes here > > When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up. **Add a video** 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 3. On 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!WARNING] > your title goes here > > The video URL must contain **https** if the pop-up is displayed on a secure webpage. 1. Click **Insert**. ![Click_insert_video](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Click_insert_video.png?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!NOTE] > your title goes here > > - Using the **Drag and Drop** feature, move or re-position the video around the Pop-up. > - Using the Drag Handlers the video can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise). > > ![Video_DND](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Video_DND.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!WARNING] > your title goes here > > When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up. **Add an extra Text box** 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) 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?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) The Text box gets added. > [!NOTE] > your title goes here > > - Using the **Drag and Drop** feature, you can move/re-position the Text box around the Pop-up. > - Using the Drag Handlers the video can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise). > > ![DND_Textbox](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DND_Textbox.gif?sv=2026-02-06&spr=https&st=2026-11-12T08%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) > [!WARNING] > your title goes here > > When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up. **Add Pop-up background customizations** Customize the Pop-up background color and background image directly in the UI using the Visual Editor. - To change the **Pop-up Background Color**, under **CONTROL**, 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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) - To add a **Pop-up Background Image**, under **CONTROL**, 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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%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%3A43%3A40Z&se=2026-11-12T09%3A43%3A40Z&sr=c&sp=r&sig=M5O92niU5%2BO%2FrbY9JJYqXbotMOUbdGfeymCoe%2B4tNkc%3D) - Click **Insert**. > [!WARNING] > your title goes here > > - Only .jpg, and .png image formats that are up to 4 MB in size are supported. > - The Pop-up Background Image and Color can be changed only using Whatfix Studio and not the Dashboard. Similarly, mix and match multiple components, and create your own custom template. 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.