Creating Pop-ups
- 27 Oct 2022
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Creating Pop-ups
- Updated On 27 Oct 2022
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Note
You can now configure the position of a Pop-up segment on your application page. This feature is available only in the new Studio Editor. To know more about what's new in Studio, see Whatfix Studio - A New Content Creation Experience.
Pop-ups help grab your users' attention to something that needs their immediate attention on 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 a Pop-up from 13 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. your title goes here You can add or remove slides in a Carousel Pop-up after creating them. For more information on creating a Carousel Pop-up see, Creating a Carousel Pop-up. For more information on editing a Carousel Pop-up see, Editing a Carousel Pop-up. |
| 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, Choosing the Pop-up template.
Use the following steps to create Pop-ups,
- Navigate to the Whatfix Dashboard.
- Click Widgets.
.png?sv=2019-07-07&sig=PcyW%2FQQMfhhVL%2FGxqct3%2BO%2BcpDT6jqiQXhPTqvfAkNE%3D&spr=https%2Chttp&st=2022-12-02T00%3A34%3A46Z&se=2022-12-02T00%3A44%3A46Z&srt=o&ss=b&sp=r)
- Click the Pop-ups tile.
.png?sv=2019-07-07&sig=PcyW%2FQQMfhhVL%2FGxqct3%2BO%2BcpDT6jqiQXhPTqvfAkNE%3D&spr=https%2Chttp&st=2022-12-02T00%3A34%3A46Z&se=2022-12-02T00%3A44%3A46Z&srt=o&ss=b&sp=r)
- Click + New Pop-up button.
- Use the color theme using the Theme dropdown.
Note
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 Popup text on top.
.png?sv=2019-07-07&sig=PcyW%2FQQMfhhVL%2FGxqct3%2BO%2BcpDT6jqiQXhPTqvfAkNE%3D&spr=https%2Chttp&st=2022-12-02T00%3A34%3A46Z&se=2022-12-02T00%3A44%3A46Z&srt=o&ss=b&sp=r)
- Edit the Title, Description, and Button Name.
your title goes here- To customize and align 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 during that session. They will continue to see the Pop-up when they refresh the application/page or revisit the page later. |
| Close | When the user clicks the button, they close this particular Pop-up and do not see the Pop-up again. |
your title goes here
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
- In the Controls pane, choose if you want to show the X icon on Pop-up and Don't show me again options by enabling the toggle.
your title goes here
| 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 is displayed to your users when they refresh the application/page or revisit the page later. 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 checkbox never see the Pop-up again. It does not matter if the count has not been reached. |
your title goes here
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.
- Once the Pop-up content is ready, click the Set Visibility Rules → button.
your title goes here
Click the Save button to save and mark the Pop-up as an inactive draft. You can resume editing by clicking the Edit icon.
- Set the Where Visibility Rules for the Pop-up to appear. See Visibility and Display Rule Conditions.
- Set the When Visibility Rules for the Pop-up. See, Scheduling Pop-ups.
- Click Finish later or Activate depending on your preference.
- Finish later - Saves the Pop-up as Draft and marks it as Inactive.
- Activate - Marks the Pop-up as Active and publishes it. Your end users can see the Pop-up based on the Visibility Rules configured.
Was this article helpful?