--- title: "Create a Carousel Popup" slug: "creating-a-carousel-pop-up" updated: 2026-04-30T09:20:20Z published: 2026-04-30T09:20:20Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Create a Carousel Popup 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](/studio/docs/create-pop-up-with-templates). Expand the following sections to learn how to create a carousel Popup: ****Step 1: Create a Carousel Popup (New Experience)**** > [!WARNING] > 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**](https://portal.document360.io/studio/docs/create-pop-up-with-templates). ## Select a Carousel Template 1. Log in to the application where you want to create content, and then launch **Whatfix Studio**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. In the **WIDGETS** section, click **Popup**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_pop-up.png) 3. Click the **Filter** icon. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-2SWH4UYQ.png) 4. In the **Type** section, select **Carousel**, and then click **Apply**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-4HFD2E29.png) 5. Select a **Template** of your choice. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-3MSOC8N8.png) ## 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: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Grab handler Pop-up(1).gif) - **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: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Element Width, Button Both.gif) - **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![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-L6I842NP.png)**(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: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Space handlers.gif) ****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: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Pop-up resizer.gif) ****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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-ECIMORS1.png) All edit actions performed within the Studio (right panel and editor space) can be undone or redone. > [!WARNING] > 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](/studio/docs/adding-rich-text-content-inside-a-pop-up). Here’s how you can add components to the Popup: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add Text Component.gif) ## 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. 1. In the **Appearance** section, you can configure the **Background**, **Padding**, and **Border Radius** of the Popup. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-7921ZFDA.png) 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 ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-V8145OQP.png) - 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 ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-FZ43DDJZ.png) - Upload supported formats (such as, PNG, JPG, GIF, or SVG) Here’s how you can choose the background color for your Popup: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Appearance Color.gif) **Padding** Padding defines the inner spacing between the popup edges and its content. - Enable **Uniform padding** to apply the same spacing on all sides ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-BY53TLCM.png) - 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. > [!NOTE] > 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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-0Z9XUCQZ.png) > > > > - **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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-4QBYLQ14.png) 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 > [!WARNING] > Note: > > The accessibility feature is not available by default. To enable, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20WCAG%20for%20Popups&body=Hi%2C%0A%0APlease%20enable%20accessibility%20for%20Popups.). --- **Carousel** (applicable only for carousel templates) > [!WARNING] > 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](/studio/docs/creating-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). ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-OLUNLH03.png) > [!WARNING] > 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: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-YR6PLYBV.png) - **Both arrows and markers**(displays both left and right arrow marks, and dot indicators) ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-48OVG94V.png) - **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. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-58NABU3N.png) 1. Once done, click **Save Popup**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-3MC1AU49.png) ****Step 1: Create a Carousel Pop-up using Visual Editor (Old Experience)**** 1. Log in to the application where you want to create content, and then launch **Whatfix Studio**. ![CLM_editor plug in2](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. On the Whatfix Studio, click **Popup**. ![clm_studio_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_pop-up.png) 3. Choose the color theme using the **Theme** dropdown. ![2024-10-18_16-49-43.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_16-49-43%281%29.png) Note: Use custom color by entering the hex color code in the text box. ![Add hex color code for Pop-ups before you select a template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Pop-ups_hexcolor_code.png) 1. Select the **Carousel** template. ![carousel_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel_pop-up.png) 2. Enter the number of carousel slides you wish to have in your Pop-up, and then click **Create**. ![Studio_pop-up_slides](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_pop-up_slides.png) 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. 1. On the Pop-up template, edit the **Title** and **Description** of your Pop-up. ![Edit_popup_title](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.42.48%20PM.png) 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.](/studio/docs/adding-rich-text-content-inside-a-pop-up) 1. On the Pop-up template, edit the button name of your Pop-up. ![Edit_button_name](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.44.41%20PM.png) Info: To customize the button text, hover your cursor over any text and then double click to open the Rich Text Editor. ![Button_RTE](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.08.48%20AM%282%29.png) 1. To change the button configurations, hover your cursor over the button, and then click to open the button configuration menu. ![Button_configurations](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.10.27%20AM.png) 2. Click the dropdown next to **Action**, and then select the button action. ![Button_action](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%209.13.43%20AM%281%29.png) 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**. ![Button_Type](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_Type.gif) - Click the **Button Style** icon to change the **Color**, **Hover color**, and **Corner radius** of the button. ![Button_config](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_config.gif) - Click the **Button Resize** icon to resize the button. ![Button_resize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Button_resize.gif) - Click the **Horizontal Align** icon to align the button horizontally. ![Horizontal Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Horizontal%20Align.gif) - Click the **Vertical Align** icon to align the button vertically. ![Vertical Align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Vertical%20Align.gif) 1. On the Rich Text Editor, click the **+** icon. The **Add Component** dialog box opens. ![Add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.55.51%20PM.png) 2. Use **Add Component** to add **Text**, **Button**, **Image/GIF**, **Video**, and **Audio** to the Pop-up. ![open_add_component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/open_add_component.png) Note: - Add up to 24 components to the Pop-Up, using the **Add Component** tab. ![Add component(2)](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Add%20component%282%29.gif) - 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. ![Drag Handlers](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Drag%20Handlers.gif) 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?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers). 1. Click the **+** icon to add a new slide to the Carousel Pop-up. ![Add_new_slide](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.59.13%20PM.png) 2. Under **CONTROL**, select **'x' icon on the Popup** and/or **Don't show me again** by enabling the toggles. ![enable_xicon_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/enable_xicon_popup.png) 3. Choose if you want to show the **Carousel Dots** and **Carousel Arrows** by enabling/disabling the respective toggles. ![enable_carousel arrow_edit.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/carousel%20arrow_edit.png) 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. ![under_control_click](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/under_control_click.png) - To add a **Pop-up Background Image**, click **Upload image**. ![click_upload_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_image.png) - 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_upload_img.png) - 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/position_popup.png) 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. 1. Set the **Position** of the Pop-up. ![set_position_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/set_position_popup.png) 2. Once you are done creating the Pop-up, click **Save Popup**. ![click_save_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_save_popup.png) Step 2: 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png) 2. Click **Pop-ups**. ![ia_widget_popups](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_popups.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_Click_edit_icon.png) 1. Click **Set Visibility Rules**. ![RB_DB_setvisirulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_DB_setvisirulespopup.png) 2. Set the Visibility Rules **Where does the pop up appear?** for the Pop-up to appear. ![RB_DB_popupwhererules](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Pop-up_Where_AVR.png) 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. 1. Set the Visibility Rules **When does the pop up start and stop appearing** for the Pop-up. For more information, see [Schedule Pop-ups](/studio/docs/scheduling-pop-ups). ![RB_DB_whenrulespopup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Dashboard_Pop-up_When_AVR.png) 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. 1. Click **Save**. ![click_save_popup1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_save_popup1.png) 2. Once you are done creating the Pop-up, select the widget, and then click **Send to ready**. ![clm_db_send_to_ready](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready_button.jpg) 3. Go to the **Ready** Stage, select the Pop-up, and then click **Publish**. ![clm_db_push_to_production](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/db_clm_publishcontent.png) The Whatfix Rich Text Editor enables you to format content using multiple options. It also enables you to link and include multimedia content. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/image-1720150380939.png) The primary button is associated with a positive user action based on the Pop-up's contents. For example, trigger a flow or open a URL. The Secondary Button is used to close or dismiss the Pop-up without triggering any specific action. Drag Handlers are used to move or reposition the component within the Pop-up. Use the Horizontal Drag Handler to move the component horizontally (column-wise). ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/Horizontal_DH.gif) Use the Vertical Drag Handler to move the component vertically (column-wise). ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Glossary/use%20vertical%20drag%20handler.gif) ## Related - [Pop-up continues to appear even after occurrence is exhausted](/pop-up-continues-to-appear-even-after-occurrence-is-exhausted.md)