Top
Login
Contents x
Create a Carousel Pop-up
  • 07 Dec 2023
  • 8 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Create a Carousel Pop-up

  • Updated On 07 Dec 2023
  • 8 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. You can 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.

There are two ways to create a Carousel Pop-up:

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

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
  • You can only add up to 6 slides in Carousel Pop-Ups created 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 while creating them as well.

  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 then 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. Click the + icon to add a new slide to the carousel pop-up.
    add_new_slides

  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, 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 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/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

Carousel Pop-up creation using Existing Templates

your title goes here

The Carousel Pop-up template is just one of the 15 pop-up templates with which you get to create Whatfix pop-ups. For more information, see Choose the Pop-up Template.

Use the following steps to create a Carousel Pop-up 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

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

  1. Select the Carousel template.
    studio_pop-up_carousel

  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
  • 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. Edit the Title, Description, and the Button Name.
    DB_clm_pop-up_carousel description
your title goes here
  • To customize and align the text, double-click the text to open the Rich Text Editor. You can change the text colors, formats, line height, insert images, insert videos, 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.
    studio_pop-up_carousel_button

  2. Click the Select Action dropdown and select the button action.
    studio_pop-up_carousel_select action

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, the Pop-up is skipped and continues to display until they click the close or do not show me again button.
Close When the user clicks the button, the pop-up is closed and the occurrence is counted once.
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 provide the X icon to close the pop-up and the Don't show me again toggle as options to your end user.
    studio_pop-up_carousel_x icon

  2. Choose if you want to show the Carousel Dots and Arrows by enabling/disabling the respective toggles.
    studio_pop-up_carousel_arrows and dots

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

your title goes here
  • 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.
  1. Once you are done creating the pop-up, click Save Popup.
    clm_pop-up_save pop-up
Info

You can resume editing the Pop-up using the dashboard.

  1. On the Whatfix dashboard, hover your cursor over the Pop-up to which you want to add Visibility Rules, and then click the Edit icon.

    CLM_DB_Click_edit_icon.png

  2. To configure the Pop-up Visibility Rules, click Set Visibility Rules.
    clm_pop-up_Visibility rules

  3. Click Edit Pop-up or Finish Later depending on your preference.
    Studio_pop-up_finish later or edit

  4. Select the Pop-up using the checkbox, and then click Send to ready.
    clm_db_send_to_ready

  5. Go to the Ready stage, and review the pop-up.

  6. Once your pop-up is reviewed, select the pop-up using the checkbox, and then click Push to production.
    clm_db_push_to_production

Note

For more information, see Create Pop-ups.

Configure the Pop-up

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

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