Create a Pop-up

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

Create a Pop-up in the following two ways:

Pop-up creation using Visual Editor through Whatfix Studio

Pop-up creation using Visual Editor through the Whatfix Dashboard

Pop-up Creation using the Visual Editor through Whatfix Studio

The Visual Editor enables you to design and customize the components in Whatfix Pop-ups easily, eliminating the need for code editing. With the Drag-and-Drop feature, content creators can resize Pop-ups, add or delete components, and add customizations directly in the UI.

Use the following steps to create a Pop-up using the Visual Editor through Whatfix Studio:

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.

Note

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

Select a template, for example Feature Onboarding.
Enter a name for the Pop-up segment.
On the Pop-up template, edit the Title and Description for your Pop-up.

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 Rich Text Content Inside a Pop-up using the Visual Editor.

On the Pop-up template, edit the Button Name for your Pop-up.

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

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.

your title goes here

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

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.

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?.

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

your title goes here

The following table lists the different types of Button Behavior and descriptions that can be added to a Pop-up:

Button	Behavior	Example: A Pop-up is set to display twice
Close button or "X" icon	Clicking either of these buttons closes the Pop-up and the display is counted as one view	A user who clicks Close and exits the Pop-up will see the Pop-up again based on the its display count.
Don't show me again	The user clicks the check-box to make sure the Pop-up never appears again. The count reduces to zero.	A user who clicks the Don't show me again check-box will never see the Pop-up again. It does not matter if the count has not been reached.

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

To configure the Pop-up position, enable the Position Popup toggle.

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 on 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 on your application.

Set the Position of the Pop-up.
Click Save Popup.

Pop-up Creation using Visual Editor through the Dashboard

Use the following steps to create Pop-ups using the Dashboard:

On the Whatfix Guidance dashboard, click Widgets.
Click Pop-ups.

Click Create widget.
Click Pop Up.
Choose the color theme using the Theme dropdown.

your title goes here

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

Select the Pop-up template.
Enter a name for the Pop-up segment by clicking the Untitled Pop-up text on top.
Edit the Title, Description, and the Button Name.

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 Rich Text Content Inside a Pop-up using the Visual Editor.

On the Pop-up template, edit the Button Name for your Pop-up.

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

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.
Button_action

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 the button, they are taken to the URL that is attached to the button.
Skip	When the user clicks this button, they skip the particular Pop-up and continue to see the Pop-up until they click the close or do not show me again button.
Close	When 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.
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, 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.

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.

your title goes here

Choose if you want to show the X icon on popup and Don't show me again options by enabling the respective toggles under Controls.

your title goes here

Button	Behavior	Example: A Pop-up is set to display twice
Close button or "X" icon	Clicking either of these buttons closes the Pop-up and the display is counted as one view	A user who clicks Close and exits the Pop-up will see the Pop-up again based on its display count.
Don't show me again	The user clicks the check-box to make sure the Pop-up never appears again. The count is reduced to zero.	A user who clicks the Don't show me again check-box never see the Pop-up again. It does not matter if the count has not been reached.

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

To configure the Pop-up position, enable the Position Popup toggle.

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 on 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 on your application.

Set the position of the Pop-up.

Note

If your end user is using a mobile browser, then even if you have enabled the Position Popup toggle and configured the Pop-up position, your end user sees the Pop-up at the center of the page. This happens because of the limited screen space on mobile browsers.

Click Save to save the Pop-up, or continue configuring the Pop-up.

Step 2: Configure the Pop-up Visibility Rules

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 Where Visibility Rules for the Pop-up to appear.

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.

Set the When Visibility Rules for the Pop-up. See, Schedule Pop-ups

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.

Click Finish later or Edit Popup depending on your preference.

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.

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.

your title goes here

After pushing the Pop-up to Production, analyze the engagement of end users with the Pop-up from different cities, countries, and more, using Product Analytics. For more information, see How can I see analytics of Pop-ups using Trend Insights?

your title goes here

If you're using the JS Embed method to test or publish Whatfix content, add the relevant conditions in Map Stages. This ensures that the content appears in the correct instance. For more information, see How to add conditions in Map Stages? (Log in to see the article)

Create a Pop-up

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

Step 2: Configure the Pop-up Visibility Rules

Related Articles

What's Next