WalkMe

WalkMe is a plugin that helps users through guided walkthroughs that we define to teach users about the different features of our app.

WalkMe needs to recognize elements of our UI so that it knows what is happening on screen and can guide the user by highlighting areas of focus. WalkMe supports an “automatic” element recognition ability, but its far too fragile to rely on long-term. Therefore, we need to provide CSS selectors for each step within a given walkthrough.

Getting Started

Enable WalkMe in your local bells.ai

• Adding a .env.local file to packages/app-bells-web folder.
• In this file, add the line VITE_WALKME_DEV=true
• Start bells.ai by running yarn start:ai

Launch the WalkMe Editor Extension

Adding WalkMe Selectors

Backup the original walkthrough

First, use the Duplicate option to make a backup of the walkthrough you are editing. Give it the same name as the original, but with “Backup” added to the end, such as “Hello World (Backup)”.

We can use this backup if something goes wrong with your edits and we need to see how it originally worked.

Selector conventions

• Prefer [id] whenever possible. Most of our core UI components automatically generate an id attribute.
• Use data-automation="{some id}" if using id on a component would result in duplicates.
• Use [aria-invalid] to search if there are any invalid form controls present
• Use [data-errormessage*="{ some text }"] to check for an invalid form control that contains some text
• Don’t use class names.

Tips and Tricks

• Combining selectors can be useful. For example, if you want to create a trigger for when the “firstName” field in a form is invalid, you can use [aria-invalid][id="form[My_Form].field[firstName].input"]
• You can detect specific error situations using data-errormessage.
  • e.g. “First Name is a required field” can be found by [data-errormessage*="required field"]