Popup Steps: Getting Started Guide

Last Updated October 15, 2023

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.

🎓 Digital Adoption Institute

Take the Smart Walk-Thrus 101 course in the DAI.
Don’t have a DAI account yet? Sign up here.

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:

Note

If a Popup step is moved by the user, the following Popup steps in the Smart WalkThru will appear in the same location of previous step
If a new SWT is initiated, the first Popup of that flow will appear on the same display (in case the user has more than one monitor) as the last SWT but on the predefined location set by the builder

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.

Learn more about Flow Steps.

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.

Please note:

The checkbox will be available only when there is a Flow Step after the Popup
Flow Steps must be saved in order to appear in the drop-down list of options
A page must finish loading in order for the Popup to reappear

Read about using Notes

Tip Tuesday Videos

Add CSS Arrows on Pop-Up Steps

To see more Tip Tuesday videos on WalkMe World click here.

Was this article helpful?

Yes No

Yes

Thanks for your feedback!

Popup Steps: Getting Started Guide

Brief Overview

Use Cases