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?