Introducing WalkMe Environment and Apps
Strategizing with WalkMe
Creating Logic with Condition Builder
Using SmartTips
Using Smart Walk-Thrus
Managing Smart Walk-Thru Flow Steps
Configuring Resources
Exploring Shuttles
Managing Onboarding Tasks
Implementing Entry Points & Menu
Creating Launchers
Designing ShoutOuts
Implementing Segmentation
Previewing & Publishing Content
Troubleshooting Content Issues

Creating SmartTips

Objective

After completing this lesson, you will be able to create SmartTips to address business challenges.

Steps for Creating SmartTips

SmartTips are built in the WalkMe Editor. Below is the step wise process to learn about the four important aspects of building SmartTips. These steps will be applicable to both Guidance and Validation SmartTips.

SmartTip Setup

Each SmartTip will be comprised of four main components, these are the foundations of any SmartTip. They are Engage, Position, Text, and Select. Before you begin to build out your SmartTip, lets take a look at these four steps in action.

Step 1: Engage

Unlike the other WalkMe applications, with SmartTips you need to start by choosing where and when the users will engage with the content. This tells WalkMe what specific page or URL these SmartTips should display.

Use the Condition Builder to do this and enter the URL where the SmartTip should display.

In this example let's stipulate that the SmartTips will only play when the URL contains /partners-new-report.

Watch the video to learn how to engage with the content and configure SmartTips effectively.

Step 2: Select

In order to select an element where the SmartTip should appear, click the plus icon and select the field where you want it to appear. Then, choose whether you want this SmartTip to be Guidance, Validation, or Both.

Watch the video to learn how to select an element when configuring SmartTips.

Step 3: Text

If Guidance selected for SmartTip, simply fill in the guidance text for this particular tip.

If Validation selected, click done first so that the SmartTips options will appear. There select validation type and enter error messaging into the field.

If Both chosen, type the guidance text into the message field and click done to fill out validation type and validation message.

Watch the video to learn how to enter text when configuring SmartTips.

Step 4: Position

Once you select element, decide where to position this SmartTip. As a best practice, you want to make sure the SmartTip is not blocking other site elements and is aligned with its intended target.

When decided where you want the SmartTip, simply select the directional option on the compass within the SmartTip.

Watch the video to learn how to position SmartTips during configuration.

SmartTip Components
You now know the four components of a SmartTip. Be sure that each SmartTip uses these components as it is important to its success.

SmartTips Set

SmartTips are contained within a SmartTips Set.

Think of a SmartTips Set as being a group of SmartTips deployed on a single form or a webpage, and the individual SmartTips as a field or element within that form or page.

When creating a SmartTips Set first create conditions for the set to play. For example, if you only want them to appear on a particular page.

The image shows SmartTips Set containing a number of SmartTips.

When creating SmartTips, decide if you want them to display with or without an icon, or with placeholder text.

With an Icon

This works by placing an icon next to the field that you wish to draw people's attention to. When the user hovers or clicks this icon, the SmartTip will display.

Using an icon provides a visual cue that draws users to interact with it by hovering over it.

The image shows a shopping cart and order summary with an icon specifying shipping standards.

Without an Icon

In this case a user hovers over an element on screen, such as an input field, button, or text that is already part of the user interface, and this displays the text.

When you have limited screen space or want to maintain a minimalist look and feel then SmartTips without an icon are a good option.

The image shows a shopping cart and order summary specifying promo code conditions.

Placeholder Text

This can be used when require placeholder text to appear in a field that informs users about the type of information they need to input.

Once the user begins to type the placeholder text disappears.

Note

Placeholder text is only available to use with Guidance SmartTips.

This example shows placeholder text in the Phone field.

Placeholder text in the Phone field.
Divider

As you've seen, individual SmartTips are configured using the SmartTip editing window that pops up when you select the element. Understanding how to use the editing window is crucial to being able to set up your SmartTips.

WalkMe SmartTip configuration panel for Email Validation, showing display options, tip text, placeholder, and icon position settings.
Editing Window SectionsUsage
SmartTip Name

Here, can enter a name for the individual SmartTip in SmartTip Set.

By default, WalkMe auto-populates the name of each SmartTip.

In this instance select the "Street" element, and the SmartTip has taken that name.

SmartTip Type
Here you can select SmartTip type from the primary options: Guidance, Validation, or a combination of both.
SmartTip Text

Here is where you add the text that will be displayed for end users when they interact with the SmartTip.

In this example you are informing users about the "Enter a Promo Code" button so you want to display guidance text that explains how they can use this feature.

Placeholder Text
If using a Guidance SmartTip with Placeholder text, here is where you would enter the text to display.
Display Options

Here you can choose how you want SmartTip to display for end users. SmartTip can be displayed:

  • With Icon: this means a tooltip icon will appear next to the chosen element. Users will need to interact with the icon to display the text.
  • Without Icon: this means that users simply hover over the element itself to display the text. There is no additional tooltip.
  • Placeholder text only: When this option is selected, no icon will display, only the placeholder text.
Icon position selector with four directional arrow options.
When using an icon with SmartTip you can use the compass to change the positioning of the icon in relation to the element.
Further Options

At the bottom you have options to:

  • Re-Select: This allows to re-select the element.
  • Done: You can select this if you have finished.
  • Next SmartTip: This allows to move to next SmartTip if you need to select more than one as part of SmartTip Set.

You've learned about the foundations of creating a SmartTip, so let's delve into the details, starting with Guidance SmartTips.