Top
Creating Pop-ups
  • 27 May 2022
  • 4 Minutes To Read
  • Dark
    Light
  • PDF

Creating Pop-ups

  • Dark
    Light
  • 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 from 13 templates.

In the following table, you can find some of the unique templates that you can use based on your needs.

TemplatesUsage
CarouselTo 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/OpinionsTo include a survey or feedback form
VividTo 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,

  1. Navigate to the Whatfix Dashboard.
  2. Click Widgets.
    RB_DB_Click widgets(2)
  3. Click the Pop-ups tile.
    RB_DB_popups_popuptile(1)
  4. Click + New Pop-up button.
    RB_DB_pop-ups_newpopup
  5. Use the color theme using the Theme drop-down.
    RB_DB_selecttheme
Note

You can also use your custom color by entering the Hex Color Code in the text box.

  1. Select the template.
  2. Enter a name for the Pop-up segment by clicking the Untitled Popup text on top.
  3. Edit the Title, Description, and Button Name.
    RB_DB_popup_adddetails
    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.
  4. Hover the cursor over the button corner, and then click to open the button configuration menu.
    RB_DB_popup_selectbuttonaction
  5. Click the Select Action drop-down and select the button action.
    RB_DB_Pop-upselectaction


Button ActionBehavior
Attach FlowWhen the user clicks the button, they are routed to a Whatfix Flow that is attached to the button. 
Attach URLWhen the user clicks the button, they are routed to the URL that is attached to the button. 
SkipWhen 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.
CloseWhen 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 change the button color, hover color, and corner radius using this configuration menu.

  1. Choose if you want to show the X icon on Pop-up and Don't show me again options by enabling the toggle in the Controls pane.
    RB_DB_SHOWASBanner
your title goes here
ButtonBehaviorExample: A Pop-up is set to display twice
SkipThe user skips the Pop-up, and the display count is not impactedUsers 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" iconClicking either of these buttons closes the Pop-up, and the display is counted as one viewUsers 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 againThe 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.

  1. Once the Pop-up content is ready, click the Set Visibility Rules → button.
    RB_DB_Pop-upvisibilityrules
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.

  1. Set the Where Visibility Rules for the Pop-up to appear. See Visibility and Display Rule Conditions.
  2. Set the When Visibility Rules for the Pop-up. See, Scheduling Pop-ups.
  3. 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.
      RB_DB_popupactivate

Was This Article Helpful?

First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.