- 26 Aug 2024
- 6 Minutes To Read
-
Print
-
DarkLight
-
PDF
Create a Carousel Pop-up
- Updated On 26 Aug 2024
- 6 Minutes To Read
-
Print
-
DarkLight
-
PDF
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.
Pop-up creation is a two-step process:
Step 1: Create the Carousel Pop-up using the Visual Editor
Step 2: Configure the Pop-up Visibility Rules
Use the following steps to create a Carousel Pop-up using the Visual Editor:
-
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 your 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.
- 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.
- On the Pop-up template, edit the Title and Description for your Pop-up.
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 for your Pop-up.
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 behaviors 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. |
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.
-
Using Add Component, you can add Text, Button, Image/GIF, Video, and Audio to the Pop-up.
-
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.
-
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.
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?.
-
Click the + icon to add a new slide to the Carousel Pop-up.
-
Under CONTROL, choose if you want to show the 'x' icon on the Popup and 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.
-
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.
- 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.
-
Set the Position of the Pop-up.
-
Once you are done creating the Pop-up, click Save Popup.
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 Where Visibility Rules for the Pop-up to appear.
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 When Visibility Rules for the Pop-up. For more information, see Schedule Pop-ups.
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.
- Click Finish later or Edit Popup depending on your preference.
- Finish later: Saves the Pop-up as Draft.
- Edit Pop-up: Takes you back to the Pop-up where you can make changes.
-
Once you are done creating the Pop-up, select the widget, and then click Send to ready.
-
Go to the Ready Stage and select the segment you want to move to Production Stage, and then click Push to production.