Appearance Tab

Brief Overview

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

Use the Appearance tab to move an item to prevent it from obscuring any important information. Common Appearance tab changes include moving the item around an element and refining 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, or SmartTip, you can customize the way it appears on the screen. The ShoutOut Appearance tab controls the way the ShoutOut appears on the screen.

Use Cases

Appearance tab use cases include the following:

• Emphasize an element on a busy page
• Modify the layering of items that incorrectly appear above or below a popup
• Lock an item to an element to prevent misidentification if a similar element appears on screen
• Better control the flow of Smart Walk-Thrus

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, SmartTip, or Survey. Hover over the Step/app and click on the pencil icon that appears. Appearance settings can be enabled while a Step/app is playing using Customize on Screen. This allows you to see the effects of the changes you are making in real time.

Appearance Settings

Spotlight

• Enabling the Spotlight Balloon feature for a step will dim the screen, except for your selected element.
• Other elements will be unclickable.

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 the current screen-scroll position displays, WalkMe will automatically scroll to that location and display the balloon.

Animated

• Generates a smooth scrolling experience that feels more polished than 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
• To learn about how to alter an elements’ z-index, see our z-index article

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
  
  

Skippable

• Toggling Skippable ON enables a Smart Walk-Thru Step to be skipped if its anchor element is not found, allowing the flow to continue.
• This is particularly useful on dynamic sites where elements in a fixed process can change due to user selections or content that changes based on user role.
• Skippable can be applied to any Smart Walk-Thru Step that is element-oriented (i.e., Steps and Auto-Steps).

• The default value for Skippable is OFF.
• In the Smart Walk-Thru flow map, skippable Steps will be indicated by a dotted semi-circular line: 
• Pro-Tips:
  • If a skippable Step has peer Steps, you can give the peer Step(s) triggers (using BBcode) to enable them to play in the event the main Step is skipped
  • The Flow Tracker will indicate when a Step was skipped during a Smart Walk-Thru flow

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.
• By activating Lock to Element, the Launcher/Step Balloon will be embedded in the Launcher/Balloon in the selected element and the Launcher/Balloon will then inherit the same z-index as the element.
• This will prevent it from jumping around the page.

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 tab and play the step. Change the z-index to see where your WalkMe item should appear.