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
After creating a Popup, the Popup Step options menu will open. In the Interaction tab, configure the following:
- Click to Add Text: Add the main message of the Popup in the title field and add additional text in the field below
- Change Design: Use the Design Gallery to apply a template appearance to the balloon
- Rich Text Editor and CSS: Access the Rich Text Editor to change the text size, style, color, add dynamic text, or insert a video. Access the CSS to make custom changes
- Display X on Balloon: It is recommended not to remove the X from the balloon
- Spotlight: When the Spotlight is on, the user will not be able to interact with other elements on the page
- Show buttons:
- Next/Done: Next if there is a step after the Popup or Done if it is the last step
- Start button: if it is the first step in a Walk-Thru
- Back: Go back to the previous step
- Back buttons only show up if the previous step had the Next trigger
- Cancel: End the Walk-Thru
- Display During Automation: Displays the Popup Step while an automation is in process. See below for more information.
Display During Automation
When playing Flow Steps (Auto-Steps, Wait for, etc.), users can interrupt an automation by clicking on the screen, which will stop the Smart Walk-Thru from continuing to play.
By enabling this feature, the Popup will remain on the screen and will notify users that an automation is in process.
This may be useful in situations where users are unaware of the automation occurring and they may perceive it simply as an unusual behavior. If they are unaware, it might even look as if their computer is being remotely controlled.
The Popup will stop showing in one of the following 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
