Popup Steps: Getting Started Guide
Brief Overview
Popup Steps are floating balloon steps that are not attached to any specific element. Popup steps can be used to give a user general information or guidance, without attaching the message to any page element.
Popup are used to draw your users attention to featured text. Unlike regular step balloons, Popups are not attached to an element but appear in the center of the page. Popups can be placed anywhere within a Smart Walk-Thru.
Popups are commonly used to enhance the user experience by communicating a message about your site or the process the user is completing. Popups can also be used for promotional purposes.
Use Cases
Common examples of how to use Popups include:
- Using a success Popup at the end of a process
- Placing a welcome Popup at the beginning of an Auto Play Smart Walk-Thru when they arrive on your site
- Creating a mini-menu Popup by using the Rich Text Editor to add links other Smart Walk-Thrus
How It Works
Popups can be created in the Smart Walk-Thru as you are initially building or added later. The Popup will appear to the user in the center of the screen, unattached to any element. Popups can be used anywhere in the Main Path or a branch of the Smart Walk-Thru.
Creating a Popup Step
- In a Smart WalkThru, hover over the orange plus sign between two steps where you want to add a Popup Step:
- In the hover menu, select Popup:
- In the Interaction tab, the balloon section works the same as a normal balloon step. You can enter any title and body text and adjust the text using the text tools:
The grid lets you determine where the popup step will appear on the screen. You can toggle the Enable Spotlight switch to disable the Spotlight overlay. This will allow the user to continue interacting with your site while the popup is visible:
If you disable the spotlight, you can use the Step Triggers to add a custom trigger to the Popup Step:
- The Popup Step will be represented by the Popup icon in the WalkThru overview:
Popup Interaction Options
- When the automation ends – for example, when a Smart Walk-Thru has reached the last step or if it’s followed by a regular Step or another Popup.
- After playing a specific Flow Step – this option is enabled by ticking the box “Close after playing” and choosing the desired Flow Step from the drop-down list.
💡Pro-Tip:
- Set up another Popup after the last Flow Step to let the user know that the automation process was finished, and mention in the first Popup to wait until there is a message indicating completion.
Customize the Popup in the Appearance Tab
Add Notes to the Popup
Tip Tuesday Videos
How to Create a Popup with Clickable Action Items
How to Build a Table in a Popup
Add CSS Arrows on Pop-Up Steps