Customize the Pop-up templates using Visual Editor
- 20 Mar 2025
- 4 Minutes To Read
- Print
- DarkLight
- PDF
Customize the Pop-up templates using Visual Editor
- Updated On 20 Mar 2025
- 4 Minutes To Read
- Print
- DarkLight
- PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
The Visual Editor 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
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.
- Customize a Pop-up after creating it using the Edit icon on the Dashboard.
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:
On the Pop-up template, hover your cursor over the button corner and then click to open the button configuration menu.
Click the + icon. The Add Component dialog box opens.
In the Add Component dialog box, click Button.
The button gets added.
Info:
Whatfix enables you to change the following button configurations:
Change the button Type to Primary Button or Secondary Button.
Click the Button Style icon to change the Color, Hover color, and Corner radius of the button.
Click the Button Resize icon to resize the button.
Click the Horizontal Align icon to align the button horizontally.
Click the Vertical Align icon to align the button vertically.
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).
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.
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:
On the Pop-up template, double-click the text to open the Rich Text Editor.
Click the + icon. The Add Component dialog box opens.
On the Add Component dialog box, click Image.
Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
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.
- Click Insert.
The image gets added.
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).
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.
Add a video
Use the following steps to add a video in the Pop-up using the Add Component on the Visual Editor:
On the Pop-up template, double-click the text to open the Rich Text Editor.
Click the + icon. The Add Component dialog box opens.
In the Add Component dialog box, click Video.
Paste the video URL.
Note:
The video URL must contain https if the pop-up is displayed on a secure webpage.
- Click Insert.
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).
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.
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:
On the Pop-up template, double-click the text to open the Rich Text Editor.
Click the + icon. The Add Component dialog box opens.
On the Add Component dialog box, click Text.
The Text box gets added.
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).
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.
Add Pop-up background customizations
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.
To add an Image to the Pop-up background, under Controls click Upload image.
Paste the embed URL of the image that you want to insert or upload an image from your local drive or Whatfix Gallery.
Click Insert.
Note:
- Only .jpg, and .png image formats up to 4 MB in size are supported.
Was this article helpful?