Customize the Pop-up templates using Visual Editor
- 10 Jul 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Customize the Pop-up templates using Visual Editor
- Updated On 10 Jul 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
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.
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.
- A Pop-up can also be customized after creation 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.
-
On the Add Component dialog box, click Button.
The button gets added.
your title goes here
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.
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).
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:
-
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.
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.
- Click Insert.
The image gets added.
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).
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:
-
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 Video.
-
Paste the video URL.
your title goes here
The video URL must contain https if the pop-up is displayed on a secure webpage.
- Click Insert.
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).
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:
-
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.
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).
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.
-
To add a Pop-up Background Image, under CONTROL, click Upload image.
-
Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
-
Click Insert.
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.
Was this article helpful?