- 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
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.
- 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
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.
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.
- 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).
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.
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.
- 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.
- 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).
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.
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.
The video URL must contain https if the pop-up is displayed on a secure webpage.
- Click Insert.
- 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).
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.
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.
- 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).
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.
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.
- 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.