Updated on September 11, 2017
Download PDF

Appearance is a category in the Options Menu that enables you to modify the way a Walk-Thru Step, Launchers, ShoutOuts, individual Smart Tips and Surveys appear. With Appearance settings, you can highlight or focus on a particular element or correct the position of your WalkMe items.

The material in this article applies to both Smart Walk-Thrus and Walk-Thrus.

The Short Version

Use Appearance to move an item to prevent it obscuring any important information. Changing Appearance Settings is often used to move the item around an element and refine its position. Appearance settings also allow you to emphasize elements that may otherwise get lost. Any time you use the WalkMe Editor to select an Element on your site, whether it’s for a Walk-Thru step, Launcher, SmartTip you can customize the way it appears on the screen. ShoutOut Appearance controls the way the ShoutOut appears on the screen. The only Appearance setting for Surveys is Spotlight.

Uses for Appearance

  • Emphasize an element on a busy page
  • Modifying layering of items if it incorrectly appears above or below a popup
  • Lock an item to an element to prevent misidentification if a similar element appears on screen

How It Works

Each Element’s Appearance settings are checked immediately before the item appears on screen. Not every app contains all the Appearance Settings. To open the Step Options Menu, simply click on a step, Launcher, ShoutOut, Smart Tip, or Survey. Hover over the step and click on the pencil that appears. Appearance Settings can be enabled while a step is playing using Customize on Screen. This allows you to see the changes you are making real time.

Appearance Settings

  • Spotlight: Enabling the Spotlight Balloon feature for a step will turn the screen opaque, except for your selected element. Other elements will be un-clickable.
  • Highlighter: Enabling the Highlighter will present a colored box around the chosen element of a balloon. This feature is used to emphasize the selected element. The highlighter is customizable in both thickness and color.
  • Scrolling: If the element you selected for a balloon is past the fold or farther down the page than is currently on the screen, WalkMe will automatically scroll to that location and display the balloon.

    • Animated: Generates a smooth scrolling experience that feels more polished that a regular scroll. This will work on the major browsers, but you may have problems on mobile devices.
    • Normal: Generates a simple “A to B” scrolling experience. This option works on all browsers.
    • None: Scroll will be turned off.
  • Z-index: A Z-index specifies the layering of an element compared to other existing elements on the same webpage. An element with a greater stack order will be in front of an element with a lower stack order. In some cases, you will wish to modify the Z-Index: Consider an instance when WalkMe’s balloon is blocking a calendar menu to which the user needs access.
    Useful tip: After accessing the Step Options Menu or Launcher Options Menu, you can click on the “Customize on Screen” option, and then choose the first option from the left to easily adjust the Z-index’s value. 
  • Position: Alter the position of the balloon to the left and right by a number of pixels. This will allow you to make small adjustments and optimize how the balloon appears on screen relative to the element.
  • Invisible Balloon: Make a balloon invisible to prevent the balloon from showing. The element, trigger, and appearance changes you made will still appear, but the balloon will not. This can be useful to create multiple steps simultaneously, for example on a form, where you would not want multiple balloons.
  • Timing Options: Automatically trigger a step with the delay feature. This way, a Walk-Thru will automatically move on after a specified number of seconds.
  • Lock to Element: Lock to element prevents a step from moving away from the element when the page is scrolled.
  • Sticky: Use with a step that is attached to an element that might disappear from the screen; for example, in hover menus or when the page might be refreshed but the step needs to stay in place. If Sticky is enabled, WalkMe will keep searching for the element. This is on by default and you can turn this off if you are experiencing issues with a step displaying.
  • Margins: Offset the location of a ShoutOut when the center position is not selected.

Try it Out

Create a step on a popup or drop down menu. Open the Appearance Menu and play the step. Change the z-index to see where your WalkMe item should appear.

Related Articles