Top
Edit a Pop-up
  • 01 Oct 2024
  • 4 Minutes To Read
  • Dark
    Light
  • PDF

Edit a Pop-up

  • Dark
    Light
  • PDF

Article summary

Edit an existing Pop-up and customize it to suit your needs.

your title goes here
  • Pop-ups created using the old Pop-up method cannot be edited using the Visual Editor.
    Edit_popups

  • Click Continue anyway to proceed with editing the Pop-up using the old Pop-up method, or click Recreate to recreate the Pop-up using the Visual Editor using any of the 6 Pop-up templates.

  • Please recreate any Pop-ups you wish to edit by December 2024.

  • When you recreate the Pop-up using the Visual Editor, visibility rules from the old Pop-up are retained.

Use the following steps to edit a Pop-up using the Visual Editor through the Dashboard:

  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. 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, hover your cursor over any text and then double-click to open the Rich Text Editor.

For more information on Rich Text Editor, see Add content inside a pop-up using the rich text editor.

  1. On the Pop-up template, edit the Button Name for your Pop-up.
    Pop-up button text
your title goes here

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

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

  2. Click the dropdown next to Action, and then select the button action.
    Button_action

The following table lists the different types of Button Action, their behaviors and descriptions:

Button Action Behavior
Start Flow When the user clicks this button, they are taken to a Whatfix Flow that is attached to the button.
Attach URL When the user clicks this button, they are taken to the URL that is attached to the button.
Skip When the user clicks this button, the particular Pop-up is omitted and they continue to see the Pop-up until they click the Close or Don't show me again button.
Close When the user clicks this button, they close the particular Pop-up.
your title goes here

Additionally, make the following changes in the button configuration menu:

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

    Button_Type

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

    Button_config

  • Click the Button Resize icon to resize the button.

    Button_resize

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

    Horizontal Align

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

    Vertical Align

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

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

your title goes here

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 Carousel Dots and Carousel Arrows by enabling/disabling the respective toggles.
    enable_carousel_dots

  2. To configure the Pop-up position, enable the Position Popup toggle.
    Popup_position

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

  1. Click the + icon to add a new slide to the carousel pop-up.
    add_new_slides
your title goes here
  • Add up to 6 slides in Carousel Pop-Up using the Visual Editor.
  • Move the slides to the desired positions in the Pop-up by dragging and dropping the slide number.
  • Remove a particular slide by clicking the X icon that appears next to the slide number.
  • Since, it is a Carousel Pop-up, it needs to have at least 2 slides. If your Pop-up contains 6 slides, up to 4 slides can be removed.
  1. Once you are done creating the Pop-up, click Save.
    click_save_popup1

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.