Strategizing the WalkMe Build
Configuring Design and Customization
Reviewing Technical Considerations
Creating Logic with Condition Builder
Enhancing Smart Walk-Thrus
Elevating SmartTips
Refining Launchers
Customizing ShoutOuts
Creating Effective Surveys
Expanding on Segmentation
Ensuring QA & Troubleshooting

Resolving Content Problems

Objective

After completing this lesson, you will be able to resolve common problems like Z-Index clashes or jumpy elements in WalkMe content.

Advanced Settings Tab

Banner for Advanced Settings

The options in the Advanced Settings tab can play a key role in editing and testing your WalkMe content. Let's take a look at what these are all about.

What is the Advanced Settings Tab?

The Advanced Settings tab is where you can troubleshoot your Smart Walk-Thru Balloon Steps, Launchers, or SmartTips when they are not appearing as intended.

There are numerous technical settings in this tab related to how your item displays.

View of the Advanced Settings Tab

Element Loading Behavior

Element Loading Behavior Options

Element Loading Behavior generally applies to Launchers and SmartTips. This section describes to WalkMe when your item loads on the page.

Remember: WalkMe's default is to look to load content only when a web page loads. If your item appears after page load, you'll need to make an adjustment here.

By choosing one of the options, WalkMe will have a better understanding of how the element appears on the site so it knows when to try and load it.

Element loading behavior Options in the Editor

Appears On Page Load

This is the most common setting for Element Behavior. Most elements on the web page show up as soon as the page loads.

Example:

When we load the page, our SmartTips on the Favorites and plus (+) buttons on the application automatically load without any user interaction.

Watch the video to learn more about displaying an element on page load.

Appears After Page Load Then Stays Visible

This option is used for elements like buttons or forms that appear after we click on an element on the page.

Example:

This is common behavior with forms on some sites. When we click on a button, a form may appear for us to fill out. Once the form is on the page, there is no button to remove the form - it just stays on the page.

Watch the video to learn more about displaying elements after page load, which then stay visible.

Appears and Disappears as a Result of User Action

This option means that if we interact with a button or page, a new element will appear, but if we interact with that same element the new element will go away. The element our items are attached to can show up or go away depending on how the user interacts with the page.

Example:

Menus are the most common example of this. When we click or hover on a menu, we may see a list of options, but the moment we move away from the menu, it will disappear.

Watch the video to learn more about elements that appear and disappear as a result of user action.

Note

WalkMe has introduced a newer Element Behavior setting: Automatic. This is now the default setting for Launchers and SmartTips.

Automatic Setting

When using this setting, WalkMe will first apply the highest evaluation frequency (also highest performance impact) to your item. Over time, it learns the selected element's behavior and then automatically apply the appropriate evaluation frequency moving forward.

This setting is meant to support Builders who may not be sure of the appropriate behavior setting for their element. If you have a strong grasp on the element loading behavior settings and know which one is appropriate for your item, select the appropriate setting for optimal performance.

Image of Element loading behavior automatic option

Other Advanced Settings

There are a few other details in the Advanced Settings tab that more experienced Builders may want to explore for troubleshooting purposes.

Let's explore the Recognition Method section.

Recognition dropdown in the Editor

When you select an element on the page, WalkMe takes numerous attributes of the element into consideration for identification purposes.

The options here are alternative ways to identify your element when WalkMe content is not consistently playing as expected using the default WalkMe algorithm.

  1. Automatic - This is the default WalkMe algorithm.
  2. By Text - This will ensure that WalkMe focuses on the text of the element for identification. It will only work for elements that have text like a field name or page title (not recommended for multi-language sites). This is typically helpful if you have similar elements on a page but the text is different, and WalkMe is pointing to the wrong element.
  3. jQuery selector - The most commonly used in this section. If you're going to manually identify your element using jQuery instead of the WalkMe algorithm, select this option. After creating and testing your selector, type it into the input field here.

We've learned about the element recognition settings. Now, we'll take a look into what Z-Index is.

Z-Index

Z-index is a tool used in web design to control which elements appear on top of others when they overlap. Imagine stacking pieces of paper on a table—some will cover others depending on which one is on top. The Z-index works the same way: elements with a higher Z-index value will appear in front of elements with lower values.

What is Z-index?

Z-index refers to how elements are stacked on a webpage. The higher the number the more on top it is. WalkMe content has a really high Z-index and sits on top of all elements on a page.

The figure shows z-index in CSS.

Why is it important?

Understanding Z-index is important when it comes to troubleshooting issues with our WalkMe content. We'll need to adjust it accordingly if our content is blocking or being blocked by elements on the page.

Watch the video to learn more about Z-index.

banner of How to Resolve a Z-Index Issue

Go through the process steps to understand how adjusting the Z-index can resolve problems with content.

Scenario

Upon reviewing content, the QA reviewer noticed that the Give Feedback Launcher placement blocks the menu when clicking on the Profile icon. We will need to resolve this issue by using the Z-Index option.

The figure shows the Give Feedback Launcher placement blocks the menu when clicking on the Profile icon.

Step 1: Open the Launcher

Upon opening the Give Feedback Launcher, remain on the Behavior tab.

The figure shows the Give Feedback Launcher which is opened by clicking on the Behavior tab.

Step 2: Locate Z-Index

Scroll down to the option where it says Arrange Layer Order (z-index).

The figure shows the option where it says Arrange Layer Order (z-index).

Step 3: Toggle on Z-Index

Click the toggle to turn it on. It will be off by default.

Note

You do not need to enter any values. That is for more advanced scenarios when turning on the toggle.
The figure shows the toggle button. It will be off by default.

Step 4: Edit on Page

Now, either click Edit on Page within the Arrange Layer Order (z-index) section, or click the Edit on Page button on the bottom left of the Options Menu.

Note

You will need have the relevant web page open and attached to your Editor to be able to use the Edit on Page functionality. Otherwise, it will be grayed out.
The figure shows the Edit on Page button on the bottom left of the Options Menu.

Step 5: Arrange Layer Order

You should now see the Launcher you created in context, and the editing window will show your layer order arrangement options. Depending on your situation, select either:

  • Bring forward (if your Launcher is being hidden behind a site element when it should not be).

  • Send backward (if your Launcher is covering or "on top of" a website element it should be behind).

For our use case here, we would select send backward.

The figure shows the launcher you created in context, and the editing window will show your layer order arrangement options.

Step 6: Select on Screen Element

  • Click Select on-screen Element;

  • Click on the on-screen element you want your Launcher to go in front of or move behind.

    Once you click the element, look at the define Z-index value manually section; you should see the Z-index value change automatically (if a change was necessary) to reflect the required Z-index to achieve your desired effect.

The figure shows the on-screen element you want your launcher to go in front of or move behind.

Summary

Resolving Z-index issues can be as simple as turning on a toggle for Z-index. You'll notice when you Play the Launcher, it actually sends the Launcher behind the menu now.

In rare cases, you might have to enter a value and play with the number to resolve the issue.

The figure shows when you play the launcher, it actually sends the launcher behind the menu now.

Lock to Element

Lock to Element is a WalkMe-specific terminology. It is a feature that forces our WalkMe item to inherit the technical attributes of the web element it’s attached to. This allows it to behave and feel more similarly to the element on our application.

What is Lock to Element?

When we notice a piece of WalkMe content (usually a SmartTip or Launcher) "jumping around" when we scroll up and down a page, Lock to Element is the fix. Its main use case is to solve the "jumping around" issue.

Sometimes, Lock to Element can be used as a final troubleshooting tactic if a WalkMe item is not showing up on the screen as expected.

The figure shows the view of the 'lock to element' setting.

Why is it important?

We want WalkMe to feel as native to the site as possible. If users notice a piece of content that is acting erratically on the page, it will be distracting.

Fixing this with Lock to Element creates a better experience for users when our WalkMe content feels like it is naturally part of the application.

Watch the video to learn more about the Lock to Element feature.

banner of Let's Try Lock to Element!

Scenario

A QA reviewer stumbled across an issue with the What's New Launcher, where scrolling up and down the page caused it to jump up and down.

Let's resolve this by turning on Lock to Element.

Watch the video to explore a scenario for the Lock to Element feature.

Step 1: Open the What's New Launcher

Open the What's New Launcher, and remain on the Behavior tab.

Scroll down to find the Lock to Element toggle.

The figure shows the What's New launcher. Once you open the What's New launcher, click Edit on Page.

Step 2: Toggle on Lock to Element

Lock to Element will be off by default. Click the toggle to turn it on.

The figure shows the toggle for Lock to Element to activate the feature.

Summary

That's it! Lock to Element prevents the WalkMe item from jumping up and down a screen and will resolve most issues. In some cases, this can also resolve Z-Index issues as well!

Note

Lock to Element is a performance-heavy feature. That means we should not toggle this on just for fun. It should only be toggled on when we identify it is necessary.

Summary

Being able to efficiently identify and resolve issues not only improves your experience as a content creator, but it also ensures a smoother, more effective experience for your users.

  1. The Flow Tracker provides a quick, visual reference for quickly identifying and resolving technical issues. It provides a robust amount of information.
  2. While there are numerous possibilities for what could be occurring with each piece of content, consider having a troubleshooting checklist of common friction points that can always be checked. They are usually the culprit.
  3. The Advanced Settings tab contains a few less commonly-used tools, though they are great to keep in your back pocket as a Builder.

By creating more process around quality assurance and gaining troubleshooting skills, you elevate yourself from a basic Builder to a strategic owner who delivers polished, high-impact solutions users can trust.

Ongoing Resources

Flow Tracker Overview

An overview of all things Flow Tracker

Go To Article
Advanced Settings Overview

An overview of all things Advanced Settings

Go To Article
Z-Index Overview

A guide to Troubleshooting with Z-Index.

Go To Article