Create a Pop-up

  • Updated On Nov 14, 2025
  • Published on Mar 14, 2024
  • 5 minute(s) read
Prev Next

Pop-ups grab your end users' attention to something that needs their immediate attention on an application page. Enhance the Pop-up experience by attaching a Flow, Survey, Video, Image, or GIF to it.

Pop-up creation is a two-step process:
Step 1: Create the Pop-up using the Visual Editor
Step 2: Configure the Pop-up

Create the Pop-up using the Visual Editor

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

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

  2. Click Pop-ups.
    Hub_widgets_popup.png

  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

    Note:

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

  4. Select a Pop-up template.
    Select_popup_template

  5. Enter a name for the Pop-up segment.
    RB_DB_namepopup

  6. On the Pop-up template, edit the Title and Description for your Pop-up.
    Edit_Popup_Title

    Info:

    To customize and align the text, hover your cursor over any text and then double-click to open the Rich Text Editor.

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

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

  9. 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 and their behaviors and descriptions:

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

Additionally, 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. On the Rich Text Editor, click the + icon. The Add Component dialog box opens.
    click_add_component

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

Note

  • Add up to 24 components to the Pop-Up, using the Add Component tab.

    Add component2

  • 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.
Info:
  • 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.

Drag Handlers

Note:

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

  1. Choose if you want to show the X icon on popup and Don't show me again options by enabling the respective toggles under Controls.
    Controls_toggles

    Note:
    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.
Info:

  • To change the Pop-up Background Color, choose the color from the existing color palette or enter the hex code of the desired color.
    Background_color

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

  1. To configure the Pop-up position, enable the Position Popup toggle.
    Popup_position
Note:
  • 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.
    Configure_popup_position

  2. Click Save to save the Pop-up, or continue configuring the Pop-up.
    RB_DB_clicksave

Configure the Pop-up Visibility Rules

  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
Note:

To know more about Visibility Rules, see Visibility Rule Conditions for Pop-ups.

  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