Top
    Login
    Contents x
    Create a Carousel Pop-up
    • 30 Sep 2024
    • 6 Minutes To Read
    • Print
    • Dark
      Light
    • PDF
    Contents

    Create a Carousel Pop-up

    • Updated On 30 Sep 2024
    • 6 Minutes To Read
    • Print
    • Dark
      Light
    • PDF
    Article summary

    The Carousel Pop-up template is designed to help you communicate brief product information in the form of slides that your users can swipe through. Use the carousel Pop-up template to create a sense of curiosity among your users by conveying multiple pieces of information (text, videos, or images) using slides that are compiled together in a single Pop-up.

    Step 1: Create the Carousel Pop-up using Visual Editor

    Create the Carousel Pop-up using Visual Editor

    Use the following steps to create a Carousel Pop-up using the Visual Editor:

    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.
      2024-10-18_16-49-43.png

    Note

    Use your custom color by entering the hex color code in the text box.

    1. Select the Carousel template.
      carousel_pop-up

    2. Enter the number of carousel slides you wish to have in your Pop-up, and then click Create.
      Studio_pop-up_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. 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 in a pop-up using the rich text editor.

    1. On the Pop-up template, edit the Button Name for your Pop-up.
      Edit_button_name
    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 ActionBehavior
    Start FlowWhen the user clicks this button, they are taken to a Whatfix Flow that is attached to the button.
    Attach URLWhen the user clicks this button, they are taken to the URL that is attached to the button.
    SkipWhen 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.
    CloseWhen 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, you can 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 component(2)

    • 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. Click the + icon to add a new slide to the Carousel Pop-up.
      Add_new_slide

    2. Under CONTROL, choose if you want to show the 'x' icon on the Popup and Don't show me again by enabling the toggles.
      enable_xicon_popup

    3. Choose if you want to show the Carousel Dots and Carousel Arrows by enabling/disabling the respective toggles.
      enable_carousel arrow_edit.png

    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, .png, and .gif image formats that are up to 4 MB in size are supported.

    1. If you want to configure the Pop-up position, enable the Position Pop-up 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 of the application as long as they close or interact with the Pop-up.
    • If you enable the Position-Pop toggle, your end users will also be able to interact with other elements of your application.

    1. Set the Position of the Pop-up.
      set_position_popup

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

    Step 2: Configure the Pop-up Visibility Rules

    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. For more information, 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.
    • 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

    Was this article helpful?
    What's Next
    Privacy Policy | Whatfix Glossary | Whatfix Platform Status
    Copyright © 2025 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