Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

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. Click through the process steps below to firstly 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 we 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.

We'll use the Condition Builder to do this and enter the URL where the SmartTip should display.

In this example we are stipulating that the SmartTips will only play when the URL contains /partners-new-report.

Watch the video to know more. Note that the video does not support audio.

Step 2: Select

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

Watch the video to know more. Note that the video does not support audio.

Step 3: Text

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

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

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

Watch the video to know more. Note that the video does not support audio.

Step 4: Position

Once we select our element, we'll want to 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 we decide where we want our SmartTip, simply select the directional option on the compass within the SmartTip.

Watch the video to know more. Note that the video does not support audio.

Nice Job!
Congratulations! 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 we first create conditions for the set to play. For example, if we only want them to appear on a particular page.

The image shows SmartTips Set containing a number of SmartTips.

When creating SmartTips, we can decide if we 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 we 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.

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 we have limited screen space or want to maintain a minimalist look and feel then SmartTips without an icon are a good option.

Placeholder Text

This can be used when we 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.

Paceholder text in the Phone field.

Divider

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

The image shows the sections of the editing window.

Editing Window Sections	Usage
	Here we can enter a name for the individual SmartTip in our SmartTip Set. By default, WalkMe auto-populates the name of each SmartTip. In this instance we've selected the "Street" element, and the SmartTip has taken that name.
	Here we can select our SmartTip type from the primary options: Guidance, Validation, or a combination of both.
	Here is where we add the text that will be displayed for end users when they interact with the SmartTip. In this example we are informing users about the "Enter a Promo Code" button so we want to display guidance text that explains how they can use this feature.
	If using a Guidance SmartTip with Placeholder text, here is where we would enter the text to display.
	Here we can choose how we want our 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.
	Here we can see the grading for our selected element, as well as options to expand or narrow the selection to improve.
	At the bottom we have options to: Re-Select: This allows us to re-select the element. Done: We can select this if we have finished. Next SmartTip: This allows us to move to our next SmartTip if we need to select more than one as part of our SmartTip Set.

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

Log in to track your progress & complete quizzes