- 01 Oct 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Edit a Pop-up
- Updated On 01 Oct 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Edit an existing Pop-up and customize it to suit your needs.
-
Pop-ups created using the old Pop-up method cannot be edited using the Visual Editor.
-
Click Continue anyway to proceed with editing the Pop-up using the old Pop-up method, or click Recreate to recreate the Pop-up using the Visual Editor using any of the 6 Pop-up templates.
-
Please recreate any Pop-ups you wish to edit by December 2024.
-
When you recreate the Pop-up using the Visual Editor, visibility rules from the old Pop-up are retained.
Use the following steps to edit a Pop-up using the Visual Editor through the Dashboard:
-
On the Whatfix Guidance dashboard, click Widgets.
-
Click Pop-ups.
-
Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
- On the Pop-up template, edit the Title and Description for your Pop-up.
To customize and align the text, hover your cursor over any text and then double-click to open the Rich Text Editor.
For more information on Rich Text Editor, see Add content inside a pop-up using the rich text editor.
- On the Pop-up template, edit the Button Name for your Pop-up.
To customize the Button text, hover your cursor over any text and then double-click to open the Rich Text Editor.
-
To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu.
-
Click the dropdown next to Action, and then select the button action.
The following table lists the different types of Button Action, their behaviors and descriptions:
Button Action | Behavior |
---|---|
Start Flow | When the user clicks this button, they are taken to a Whatfix Flow that is attached to the button. |
Attach URL | When the user clicks this button, they are taken to the URL that is attached to the button. |
Skip | When the user clicks this button, the particular Pop-up is omitted and they continue to see the Pop-up until they click the Close or Don't show me again button. |
Close | When the user clicks this button, they close the particular Pop-up. |
Additionally, make the following changes in the button configuration menu:
-
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.
-
On the Rich Text Editor, click the + icon. The Add Component dialog box opens.
-
Using Add Component, add Text, Button, Image/GIF, Video, and Audio to the Pop-up.
-
Add up to 24 components to the Pop-Up, using the Add Component tab.
-
The Pop-Up follows a structured grid layout, with a 6x4 configuration that is 6 rows and 4 columns.
-
The Visual Editor supports a maximum of 6 rows and 4 columns that is 24 components in the Pop-up template.
-
Using the Drag and Drop feature, move or re-position different components on the Pop-up, both vertically (row-wise) and horizontally (column-wise).
-
Each component has two Drag Handlers, the Horizontal Drag Handler and the Vertical Drag Handler for moving the component.
When you make changes to the Pop-up using the Drag Handlers, you may unfortunately not be able to undo certain changes. In that case, you may need to re-create the Pop-up. For more information, see Can I undo the changes made with the Drag Handlers?
-
Choose if you want to show the Carousel Dots and Carousel Arrows by enabling/disabling the respective toggles.
-
To configure the Pop-up position, enable the Position Popup toggle.
- By default, the Pop-up appears at the center of the page, and end users can not interact with other elements on the application as long as they close/interact with the Pop-up.
- If you enable the Position-Pop toggle, your end users will also be able to interact with other elements on your application.
- Set the position of the Pop-up.
If your end user is using a mobile browser, then even if you have enabled the Position Popup toggle and configured the Pop-up position, your end user sees the Pop-up at the center of the page. This happens because of the limited screen space on mobile browsers.
- Click the + icon to add a new slide to the carousel pop-up.
- Add up to 6 slides in Carousel Pop-Up using the Visual Editor.
- Move the slides to the desired positions in the Pop-up by dragging and dropping the slide number.
- Remove a particular slide by clicking the X icon that appears next to the slide number.
- Since, it is a Carousel Pop-up, it needs to have at least 2 slides. If your Pop-up contains 6 slides, up to 4 slides can be removed.
- Once you are done creating the Pop-up, click Save.