A carousel Pop-up enables you to share brief information through a series of slides that users can swipe through. Use this template to share multiple types of content, such as texts, videos, or images in one compact Pop-up.
Note:
Whatfix enables you to create pop-ups using a library of professionally designed templates. The new Popup Templates is a Beta feature. For more information, see Create Pop-ups with New Templates.
Expand the following sections to learn how to create a carousel Popup:
Step 1: Create a Carousel Popup (New Experience)
Your title goes here
Whatfix enables you to create professional Popups in minutes without any CSS or coding, with access to 50+ ready-to-use templates, along with drag-and-drop editing, element resizing and spacers, native GIF support to enhance engagement, and Undo or Redo functionality to experiment and iterate easily.
The new Pop-up Templates is a Beta feature. For more information, see Create Pop-ups with New Templates.
Select a Carousel Template
Log in to the application where you want to create content, and then launch Whatfix Studio.
In the WIDGETS section, click Popup.
Click the Filter icon.
In the Type section, select Carousel, and then click Apply.
Select a Template of your choice.
Edit the Popup
The Editor is a drag-and-drop workspace with a live preview of the Popup, where you can reorder, resize, add, and remove elements within the Popup boundary.
The following sections describe all the actions you can perform in the Editor:
Resize and reposition elements within the Popup
Reposition an element within the Popup: A grab handle appears at the top-centre of the element and is visible on both hover and select. Use it to reposition an element.
Here’s a GIF that shows how you can use the grab handle to drag and reposition the element:.gif?sv=2022-11-02&spr=https&st=2026-05-12T09%3A05%3A25Z&se=2026-05-12T09%3A26%3A25Z&sr=c&sp=r&sig=acXtEFmtp4RO7bWFe2Za4AUsAU3kj4j5Un3sAjRB82M%3D)
Resize an element within the Popup:
Text and image components: Use the resize controller in the middle-right side to adjust width only.
Button component: Resize controllers on the right side and bottom center, allowing both width and height adjustment.
The maximum width of an element is constrained by the Popup width. If padding is configured, the effective maximum width becomes the Popup width minus the applied padding.
Here’s a GIF that shows how you can resize text and buton components:
Configure the space in between elements: adjust vertical spacing and insert new elements between existing ones. Hover your cursor in between elements, and use the
(double-arrow) button to adjust the space in between elements. Vertically dragging up or down increases or decreases the space between the elements.
Here’s a GIF that shows how you can adjust the space in between elements:
Resize the Popup
The editor enables you to drag and resize the total size of the Popup. When you resize the Popup, the editor displays the width and height of the Popup, providing a clearer understanding of its size while resizing.
Here’s how you can resize the Popup width and height:
Review and revert changes using Undo and Redo
You can use the Undo and Redo buttons in the editor to quickly revert or reapply changes while editing your popup.
All edit actions performed within the Studio (right panel and editor space) can be undone or redone.
Your title goes here
The following limitations apply when reverting or reapplying changes:
Up to 20 actions are supported for Undo and Redo
Oldest actions are removed once the limit is reached
Redo history is cleared after a new action is performed
Undo or Redo history is session-based and does not persist after saving the Popup
Navigating away from the editor or refreshing the page clears the history
Add text and elements within a Popup
The Whatfix Rich Text Editor enables you to change font, size, and link multimedia content. Use the + (plus) icon to add elements or components at specific positions within the Popup layout. For more information, see Add Rich Text content inside a Popup.
Here’s how you can add components to the Popup:
Configure the Popup
The Whatfix Studio and Dashboard enable you to configure the Appearance, Position, and Control for the Popup.
You can configure the Popup configurations in any order based on your requirements.
In the Appearance section, you can configure the Background, Padding, and Border Radius of the Popup.
Expand the following section to learn how to configure Appearance for the Popup:Configure Background, Padding, and Border Radius
Background
Choose between Color or Image:For Color:
You can select Solid or Gradient option
You can also set the background color to transparent if required.
Or use color picker and specify HEX, or RGBA values
For Image:
You can choose to Replace or Delete the default image or GIF
Upload supported formats (such as, PNG, JPG, GIF, or SVG)
Here’s how you can choose the background color for your Popup:
Padding
Padding defines the inner spacing between the popup edges and its content.Enable Uniform padding to apply the same spacing on all sides
Disable to configure Top, Right, Bottom, and Left individually
Range: 0px to 64px
Default: 20px
Border Radius
Border radius controls how rounded the corners of the popup appear.Enable Uniform radius to apply the same value to all corners
Disable to configure each corner individually
Range: 0px (sharp corners) to 64px (fully rounded)
Default: 20px
7. In the Position section, configure the Overlay and position of the Popup.
Info:
Overlay
When you enable or disable the Overlay toggle, it controls how the background behind the popup appears. Position cannot be configured when Overlay is enabled.
Dim: When Overlay is enabled, adds a darkened overlay behind the popup.
Blur: When Overlay is disabled, applies a blur effect to the background content.
Position
Configure where the Popup appears on the screen. To change the position, disable the Overlay toggle, and then:Select a position from the 3×3 grid:
Top-Left, Top-Center, Top-Right
Middle-Left, Middle-Center, Middle-Right
Bottom-Left, Bottom-Center, Bottom-Right
Default position: Middle-Center
8. In the Control section, you can configure the behavior of the Popup.
Expand the following section to learn about the controls of the Popup:
Configure theme, behavior, and interactions
Control theme (applicable to Close (X) and Don’t show me again buttons)
Choose theme: Light or Dark
Show close (X) button
Toggle to show or hide the close button
When enabled, appears at the top-right corner of the Popup
Don’t show me again
Enable to allow users to opt out of seeing the Popup again.
Title for screen reader
Add a descriptive title for accessibility
The specified text is read by screen readers
Note:
The accessibility feature is not available by default. To enable, contact support@whatfix.com.
Carousel (applicable only for carousel templates)
Your title goes here
This section appears in the Controls accordion only when a carousel template is selected. For more information, see Create a Carousel Pop-up.
Enable or disable the Move slides automatically toggle.
Toggle ON (default): Slides transition automatically at the configured interval.
Toggle OFF: Slides advance only when the end user manually clicks an arrow or a marker.
Set delay: In the Delay by field, specify by how many seconds the next slide should appear (the default is four seconds).
Your title goes here
When Move slides automatically is enabled:
When end-users hover over the Popup, it pauses the slide transition.
When users move the cursor away, the timer resumes from where it paused and the next slide appears based on the remaining time.
Configure navigation for the Popup. In the Show dropdown, select from three options:
Both arrows and markers (displays both left and right arrow marks, and dot indicators)
Only Arrows (displays left and right arrow marks only)
Only Markers (displays dot indicators only)
Add Carousel slides
Use the + Add button to add new slides to the carousel. The active slide being edited is visually highlighted.
Once done, click Save Popup.
Step 1: Create a Carousel Pop-up using Visual Editor (Old Experience)
-
Log in to the application where you want to create content, and then launch Whatfix Studio.
-
On the Whatfix Studio, click Popup.
-
Choose the color theme using the Theme dropdown.
Use custom color by entering the hex color code in the text box.
Select the Carousel template.
Enter the number of carousel slides you wish to have in your Pop-up, and then click Create.
Note:
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 next to the slide number.
Add a minimum of 2 slides to the Carousel Pop-up. If your Pop-up contains 6 slides, up to 4 slides can be removed.
On the Pop-up template, edit the Title and Description of your Pop-up.
Info:
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 Rich Text Content Inside a Pop-up using the Visual Editor.
On the Pop-up template, edit the button name of your Pop-up.
Info:
To customize the button text, hover your cursor over any text and then double click to open the Rich Text Editor.
To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu.
Click the dropdown next to Action, and then select the button action.
The following table lists the different types of button Action, their behavior, 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. |
Info:
Additionally, make the following changes in the button configuration menu:
Change the button Type to Primary Button or Secondary Button.
Click the Button Style icon to change the Color, Hover color, and Corner radius of the button.
Click the Button Resize icon to resize the button.
Click the Horizontal Align icon to align the button horizontally.
Click the Vertical Align icon to align the button vertically.
On the Rich Text Editor, click the + icon. The Add Component dialog box opens.
Use Add Component to add Text, Button, Image/GIF, Video, and Audio to the Pop-up.
Note:
Add up to 24 components to the Pop-Up, using the Add Component tab.
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:
Use the Drag and Drop feature to move or reposition 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.
Note:
When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, re-creation of the Pop-up may be necessary. For more information, see Can I undo the changes made with the Drag Handlers?.
Click the + icon to add a new slide to the Carousel Pop-up.
Under CONTROL, select 'x' icon on the Popup and/or Don't show me again by enabling the toggles.
Choose if you want to show the Carousel Dots and Carousel Arrows by enabling/disabling the respective toggles.
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.
To add a Pop-up Background 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.
Only .jpg, .png, and .gif image formats that are up to 4 MB in size are supported.
If you want to configure the Pop-up position, enable the Position Pop-up toggle.
Info:
By default, the Pop-up appears at the center of the page, preventing end users from interacting with other elements of the application until they close or interact with the Pop-up.
If you enable the Position Pop-up toggle, end users can interact with other elements of the application.
Set the Position of the Pop-up.
Once you are done creating the Pop-up, click Save Popup.
Step 2: Configure the Pop-up Visibility Rules
Use the following steps to configure a Pop-up:
-
On the Whatfix Guidance dashboard, click Widgets.
-
Click Pop-ups.
-
Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
Click Set Visibility Rules.
Set the Visibility Rules Where does the pop up appear? for the Pop-up to appear.
Info:
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.
Set the Visibility Rules When does the pop up start and stop appearing for the Pop-up. For more information, see Schedule Pop-ups.
Note:
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 is displayed to them regardless of the occurrences you have set.
Click Save.
Once you are done creating the Pop-up, select the widget, and then click Send to ready.
Go to the Ready Stage, select the Pop-up, and then click Publish.
