Top
Login
Contents x
Edit a Pop-up
  • 04 Dec 2023
  • 5 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Edit a Pop-up

  • Updated On 04 Dec 2023
  • 5 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article Summary

You can edit an existing Pop-up and customize it to suit your needs.
There are two ways of editing a Pop-up:

Edit a Pop-up 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.
  • Pop-ups that are not created using the Visual Editor cannot be customized further but their visibility rules can be edited.

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 for your Pop-up.
    edit_carousel_popup

  2. On the Pop-up template, edit the Description for your Pop-up.
    edit_description_popup

your title goes here

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

  • Add Components like Text, Button, Image, Video, and Audio
  • Change the Font size
  • Change the Text Color
  • Bold text
  • Italicize text
  • Underline text
  • Align or justify content to the left, right, or center
  • Insert a numbered list
  • Insert links
  • Remove a Component

RTE_edit_text

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

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

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

your title goes here

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

  • Change the button Type to Primary or Secondary.

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.
  • The components can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).
  • Each component has two Drag Handlers for repositioning the components, the horizontal Drag Handler for moving the component horizontally, and the vertical Drag Handler for moving the component vertically.

Drag_handlers_TD

your title goes here

When you make changes to the Pop-up using the Drag and Drop feature, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

  1. Under Controls, choose if you want to show the 'x' icon on the Popup and Don't show me again by enabling the toggles.
    under_control_select

  2. Choose if you want to show the Carousel Dots and Carousel Arrows by enabling/disabling the respective toggles.
    enable_carousel_dots

  3. Click the + icon to add a new slide to the carousel pop-up.
    add_new_slides

your title goes here
  • You can add up to 6 slides in Carousel Pop-Up using the Visual Editor.
  • You can move the slides to the desired positions in the Pop-up by dragging and dropping the slide number.
  • You can 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, you can remove up to 4 slides.
  • You can edit, move and remove the number of slides once you create them as well.
  1. If you want to configure the Pop-up position, enable the Position Pop-up toggle under Controls.
    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/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.
    enable_position_toggle

  2. Once you are done creating the Pop-up, click Save.
    click_save_popup1

Edit a Pop-up using Existing Templates on the Dashboard

Use the following steps to edit 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. Edit the Title, Description, and the Button Name.
    carousel_popup_rte.png
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, insert videos etc.
  • Double-click the button text to edit it.

  1. To change the button configurations, hover your cursor over the button corner, and then click to open the button configuration menu.
    CLM_Pop-up_button

  2. Choose if you want to show the 'X' icon on the Pop-up icon and Don't show me again checkbox using the toggles in the navigation panel.
    studio_pop-up_edit carousel_x and dont me again

  3. Enable the toggles to show the Carousel Dots and Arrows.
    studio_pop-up_edit carousel_arrows and dots

  4. Click the + button to add a new slide to the Carousel Pop-up.
    studio_edit carousel_add slides

Note
  • You can move the slides to the desired positions in the Pop-up by dragging and dropping the slide number.
  • You can remove a particular slide by clicking the X icon that appears next to the slide number.
  • You can remove only 4 slides if there are 6 slides to your Pop-up. The Pop-up needs to have at least 2 slides.
  • By default, you can create up to 6 carousel slides. However, you can increase this limit to 12 by contacting support@whatfix.com.
  • You can edit, move and remove the number of slides once you create them as well.
  1. Once you are done creating the Pop-up, click Save.
    studio_edit carousel_save
Was this article helpful?
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
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.
Logout