- 09 Mar 2023
- 8 Minutes To Read
-
Print
-
DarkLight
-
PDF
Create a Pop-up
- Updated On 09 Mar 2023
- 8 Minutes To Read
-
Print
-
DarkLight
-
PDF
Pop-ups can grab your users' attention for something that needs their immediate attention as soon as they navigate to a particular page of your application. You can attach a Flow, survey, video, image, and GIF to the Pop-up.
When you create a new Pop-up, you don't have to start from scratch. Instead, you can base your new Pop-up on a template. Whatfix enables you to choose from 15 templates.
In the following table, you can find some of the unique templates that you can use based on your needs.
Templates | Usage |
---|---|
Carousel | To convey multiple text information, videos, or images in one Pop-up in the form of sliders. Users can move left or right to view the content. |
Surveys/Opinions | To include a survey or feedback form |
Vivid | To include only the video. This gives your users a distraction-free experience to watch the video. |
For choosing the right Pop-up based on your requirement see, Choose the Pop-up template.
Create Pop-ups
Pop-up creation is a two-step process:
Step 1: Create the Pop-up
Step 2: Configure the Pop-up
You can create Pop-ups both from the Whatfix Studio and the dashboard.
Use the following steps to create Pop-ups using Whatfix Studio,
-
Log in to the application where you want to create content, and then launch the Whatfix Studio.
-
On the Whatfix Studio, click Popup.
-
Choose the color theme using the Theme dropdown.
You can also use your custom color by entering the hex color code in the text box.
-
Select a template.
-
Enter a name for the Pop-up segment.
-
On the Pop-up template, edit the Title, Description, and the Button Name.
- To customize and align the texts, double-click the text to open the rich text editor. Here, you can change the text colors, formats, line height, insert images, etc.
- Double-click the button text to edit it.
-
Hover your cursor over the button corner, and then click to open the button configuration menu.
-
Click the Select Action dropdown and select the button action.
Button Action | Behavior |
---|---|
Attach Flow | When the user clicks the button, they are routed to a Whatfix Flow that is attached to the button. |
Attach URL | When the user clicks the button, they are routed to the URL that is attached to the button. |
Skip | When the user clicks the button, they skip this particular Pop-up and continue to see the Pop-up until they click the Close or Don't show me again button. |
Close | When the user clicks the button, they close this particular Pop-up and do not see the Pop-up again. |
You can also make the following changes in the button configurations menu,
Change the color of the button
Change the hover color of the button
Change the corner radius
- Choose if you want to show the X icon on popup and Don't show me again by enabling the toggles.
Button | Behavior | Example: A Pop-up is set to display twice |
---|---|---|
Skip | The user skips the Pop-up and the display count is not impacted | Users who click the Skip button continue to see the Pop-up until they click Close or "X" icon. If the user clicks the Skip button, the Pop-up appears to your users next time when they refresh the application/page or visit the page again at any time. For example, Let's assume you created a Pop-up with only a Skip button and no Close or "X" icon. If you set the display count of a Pop-up to 1 and a user clicks the Skip button, the user continues to see the Pop-up until they close the Pop-up using the Close or "X" icon. Whatfix recommends you have a Close or "X" button to avoid this scenario. |
Close button or "X" icon | Clicking either of these buttons closes the Pop-up and the display is counted as one view | Users who click Close and exit the Pop-up will see the Pop-up again based on the Pop-up display count. |
Don't show me again | The user clicks the check-box to make sure the Pop-up never appears again. The count reduces to zero. | Users who click the Don't show me again check-box never see the Pop-up again. It does not matter if the count has not been reached. |
You can preview how the Pop-up looks like on mobile and desktop devices using the toggle button on the top-right of the Pop-up.
- If you want to configure the position of the Pop-up, enable the Position Pop-up 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 choose to enable Position Pop-up, 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 Pop-up toggle and configured the Pop-up position, your end user sees the Pop-up at the center of the screen. This happens because of the limited space on mobile browsers.
- Click Save Popup.
Use the following steps to create Pop-ups using the Dashboard,
-
On the Whatfix dashboard, click Widgets.
-
Click the Create Widget button.
-
Click Popup.
-
Choose the color theme using the Theme dropdown.
You can also use your custom color by entering the hex color code in the text box.
-
Select the template.
-
Enter a name for the Pop-up segment by clicking the Untitled Pop-up text on top.
-
Edit the Title, Description, and the Button Name.
- To customize and align the texts, double-click the text to open the rich text editor. Here, you can change the text colors, formats, line height, insert images, etc.
- Double-click the button text to edit it.
-
Hover the cursor over the button corner, and then click to open the button configuration menu.
-
Click the Select Action dropdown and select the button action.
Button Action | Behavior |
---|---|
Attach Flow | When the user clicks the button, they are routed to a Whatfix Flow that is attached to the button. |
Attach URL | When the user clicks the button, they are routed to the URL that is attached to the button. |
Skip | When the user clicks the button, they skip this particular Pop-up and continue to see the Pop-up until they click the close or do not show me again button. |
Close | When the user clicks the button, they close this particular Pop-up and do not see the Pop-up again. |
You can also change the button color, hover color, and corner radius using this configuration menu.
- Choose if you want to show the X icon on popup and Don't show me again options by enabling the toggles.
Button | Behavior | Example: A Pop-up is set to display twice |
---|---|---|
Skip | The user skips the Pop-up and the display count is not impacted | Users who click the Skip button continue to see the Pop-up until they click Close or "X" icon. If the user clicks the Skip button, the Pop-up appears to your users next time when they refresh the application/page or visit the page again at any time. For example, Let's assume you created a Pop-up with only a Skip button and no Close or "X" icon. If you set the display count of a Pop-up to 1 and a user clicks the Skip button. The user continues to see the Pop-up until they close the Pop-up using the Close or "X" icon. Whatfix recommends you have a Close or "X" button to avoid this scenario. |
Close button or "X" icon | Clicking either of these buttons closes the Pop-up and the display is counted as one view | Users who click Close and exit the Pop-up will see the Pop-up again based on the Pop-up display count. |
Don't show me again | The user clicks the check-box to make sure the Pop-up never appears again. The count reduces to zero. | Users who click the Don't show me again check-box never see the Pop-up again. It does not matter if the count has not been reached. |
You can preview how the Pop-up looks like on mobile and desktop devices using the toggle button on the top-right of the Pop-up.
- If you want to configure the Pop-up position, enable the Position Pop-up 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 Pop-up 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 space on mobile browsers.
- Click the Save button to save and mark the Pop-up as an inactive draft, or continue configuring the Pop-up.
You can resume editing by hovering the cursor over the Pop-up segment, and clicking the Edit icon.
Configure the Pop-up
Use the following steps to configure a Pop-up,
-
On the Whatfix Dashboard, hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
-
Click the Set Visibility Rules → button.
-
Set the Where Visibility Rules for the Pop-up to appear.
If you have configured multiple Pop-ups with different Visibility Rules to appear on the same page, the Pop-up configured with User Action Completed as the Visibility Rule is always shown first when the end user performs the User Action.
-
Set the When Visibility Rules for the Pop-up. See, Schedule Pop-ups
-
Click Finish later or Edit Popup depending on your preference.
- Finish later- Saves the Pop-up as Draft and marks it as Inactive.
- Edit Pop-up - Takes you back to the Pop-up where you can make changes.
-
Once you are done creating the pop-up, select the widget, and then click Send to Ready.
-
Navigate to the Ready Stage and select the segment you want to move to Production Stage, and then click Send to Production.