Top
Create a Pop-up
  • 29 Jan 2024
  • 14 Minutes To Read
  • Dark
    Light
  • PDF

Create a Pop-up

  • Dark
    Light
  • PDF

Article Summary

Pop-ups can grab your users' attention for something that needs their immediate attention as soon as they go to a particular page of your application. You can attach a Flow, Survey, video, image, or GIF to the Pop-up.

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 a Pop-up in the following three ways:

Pop-up Creation using the Visual Editor

your title goes here
  • Visual Editor is a Beta feature. To enable the feature, contact support@whatfix.com.
  • Once you enable the Visual Editor, you won’t be able to go back to the old experience.
  • Once the Visual Editor is enabled, Pop-ups can only be created using Whatfix Studio, and not using the Dashboard.
  • After creating Pop-ups using the Visual Editor, you can edit them using the Dashboard.
  • You can only edit the Visibility Rules of Pop-ups that were not created using the Visual Editor and cannot customize them further.

Use the following steps to create a Pop-up using the Visual Editor through Whatfix Studio:

  1. Log in to the application where you want to create content, and then launch Whatfix Studio.
    CLM_editor plug in2

  2. On the Whatfix Studio, click Popup.
    clm_studio_pop-up

  3. Choose the color theme using the Theme dropdown.
    RB_EDT_popupthemes

Note

You can also use your custom color by entering the hex color code in the text box.

  1. Select a template, for example Feature Onboarding.
    Select_popup_template

  2. Enter a name for the Pop-up segment.
    enter_name_pop-up

  3. On the Pop-up template, edit the Title and Description for your Pop-up.
    Edit_popup_title

your title goes here

To customize and align the text, double-click the text to open the Rich Text Editor.

For more information on Rich Text Editor, see Add Rich Text content inside a Pop-up using the Visual Editor.

  1. On the Pop-up template, edit the Button Name for your Pop-up.
    Popup_button_text

  2. To change the button configurations, hover your cursor over the button, and click to open the button configuration menu.
    button_configurations

  3. Click the dropdown next to Action, and then select the button action.
    popup_button_action

The following table lists the different types of Button Action, Behavior, and descriptions that can be added to a Pop-up:

Button Action Behavior
Start 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.
your title goes here

You can also make the following changes in the button configuration menu:

  • Change the button Type to Primary Button or Secondary Button.

change_button_type

  • Click the Button Style icon to change the Color, Hover color, and Corner radius of the button.

Change_button_style

  • Click the Button Resize icon to resize the button.

change_button_size

  • Click the Horizontal Align icon to align the button horizontally.

button_horizontal _align

  • Click the Vertical Align icon to align the button vertically.

click_align_button2

  1. Click the + icon. The Add Component dialog box opens.
    click_add_component

  2. Using Add Component, you can add Text, Button, Image/GIF, Video, and Audio to the Pop-up.
    open_add_component

Note
  • Using Add Component, you can add up to 24 components to the Pop-Up.

add_component_gif

  • The Pop-Up follows a structured grid layout, with a 6x4 configuration that includes both rows and columns.
  • You can have a maximum of 6 rows and 4 columns within this grid.
your title goes here
  • Using the Drag and Drop feature, you can move/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.

Drag_handlers_TD

your title goes here

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. For more information, see Can I undo the changes made with the Drag Handlers?.

  1. Under CONTROL, choose if you want to show the 'x' icon on the Popup and Don't show me again by enabling the toggles.
    control_panel.png
your title goes here

The following table lists the different types of Button Behavior and descriptions that can be added to a Pop-up:

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.
your title goes here
  • To change the Pop-up Background Color, choose the color from the existing color palette or enter the hex code of the desired color.
    under_control_click

  • To add a Pop-up Background Image, click Upload image.
    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_upload_img

  • Only .jpg, and .png image formats that are up to 4 MB in size are supported.

your title goes here

The Pop-up Background Image and Color can be changed only using Whatfix Studio and not the Dashboard.

  1. If you want to configure the Pop-up position, enable the Position Popup toggle.
    position_popup
your title goes here
  • 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.
  1. Set the Position of the Pop-up.
    set_position_popup

  2. Click Save Popup.
    click_save_popup

Pop-up Creation using Existing Templates

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 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.

Use the following steps to create Pop-ups using Existing Templates:

  1. Log in to the application where you want to create content, and then launch Whatfix Studio.
    CLM_editor plug in2

  2. On the Whatfix Studio, click Popup.
    clm_studio_pop-up

  3. Choose the color theme using the Theme dropdown.
    RB_EDT_popupthemes

Note

You can also use your custom color by entering the hex color code in the text box.

  1. Select a template.

  2. Enter a name for the Pop-up segment.
    RB_EDT_namepopup

  3. On the Pop-up template, edit the Title and Description for your Pop-up.
    edit_title_desc

your title goes here
  • 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, and more.
  1. On the Pop-up template, double-click the button text to edit the Button Name for your Pop-up.
    Edit_button_name

  2. Hover your cursor over the button corner, and then click to open the button configuration menu.
    RB_EDT_moreoptionsbutton

  3. Click the Select Action dropdown, and then select the button action.
    RB_EDT_selectaction

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.
your title goes here

You can also make the following changes in the button configuration menu:

Change the color of the button
Change the hover color of the button
Change the corner radius
DB_Pop-up_button configurations

  1. Choose if you want to show the X icon on popup and Don't show me again by enabling the toggles.
    RB_EDT_closebutton
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 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.
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.

mobile_desktop

  1. If you want to configure the position of the Pop-up, enable the Position Pop-up toggle.
    Position_pop-up
your title goes here
  • 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 or interact with the Pop-up.
  • If you choose to enable Position Popup, your end users will also be able to interact with other elements on your application.
  1. Set the position of the Pop-up.
    RB_EDT_Popupposition
Note

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 screen. This happens because of the limited space on mobile browsers.

  1. Click Save Popup.
    RB_EDT_savepopup

Pop-up Creation using the Dashboard

Use the following steps to create Pop-ups using the Dashboard:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  1. Click Create widget.
    CLM_DB_CreateWidget.png

  2. Click Pop Up.
    CLM_DB_Pop-up

  3. Choose the color theme using the Theme dropdown.
    RB_DB_selectthemes

your title goes here

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 Pop-up text on top.
    RB_DB_namepopup

  3. Edit the Title, Description, and the Button Name.

your title goes here
  • 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.
  1. Hover your cursor over the button corner, and then click to open the button configuration menu.
    RB_DB_hoverbutton

  2. Click the Select Action dropdown and select the button action.
    RB_DB_selectaction

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.
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 popup and Don't show me again options by enabling the toggles.
    RB_DB_closebuttons
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 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.
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. If you want to configure the Pop-up position, enable the Position Pop-up toggle.
    slm_dashboard_position_popup
your title goes here
  • 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.
  1. Set the position of the Pop-up.
    clm_dashboard_position
Note

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 space on mobile browsers.

  1. Click Save to save and mark the Pop-up as an inactive draft, or continue configuring the Pop-up.
    RB_DB_clicksave
Note

You can resume editing by hovering your cursor over the Pop-up segment, and clicking the Edit icon.

Configure the Pop-up Visibility Rules

Use the following steps to configure a Pop-up:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  3. Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
    CLM_DB_Click_edit_icon.png

  1. Click Set Visibility Rules →.
    RB_DB_setvisirulespopup

  2. Set the Where Visibility Rules for the Pop-up to appear.
    RB_DB_popupwhererules

your title goes here

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.

  1. Set the When Visibility Rules for the Pop-up. See, Schedule Pop-ups
    RB_DB_whenrulespopup
your title goes here

If the Pop-up has a Skip button and when your end users click the Skip button, it is not considered as an interaction and the Pop-up will be displayed to them regardless of the occurrences you have set.

  1. Click Finish later or Edit Popup depending on your preference.
    RB_DB_popupfinishlater
  • 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.
  1. Once you are done creating the pop-up, select the widget, and then click Send to ready.
    clm_db_send_to_ready

  2. Go to the Ready Stage and select the segment you want to move to Production Stage, and then click Push to production.
    clm_db_push_to_production

your title goes here

If you're using the JS Embed method to test or publish Whatfix content, add the relevant conditions in Map Stages. This ensures that the content appears in the correct instance. For more information, see How to add conditions in Map Stages? (Log in to see the article)


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
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.