SmartTips help address certain processes or forms on your site that users often make mistakes due to lack of sufficient instruction on the page.
Use SmartTips to add useful tips to confusing elements on your website or to validate fields that often cause user error.
SmartTips are advanced tooltips that provide additional, contextual information to your user on a mobile or desktop site. SmartTips are created in WalkMe’s SmartTip app. Individual SmartTips are created within a Set — a group of SmartTips that generally appear on the same form or page.
SmartTips can be used instead of or in addition to Walk-Thrus. SmartTips tips are ideal for addressing problematic forms, as well as providing a way to validate the information entered.
There are two types of SmartTips:
- Guidance SmartTip: These are used to present users with additional information to what’s on the page or an input field. For example, you might place a Guidance SmartTip on a Name field to clarify that the user should enter both his/her first AND last name. The Guidance SmartTip on this field will appear constantly on the page and display the message “Enter your First and Last Name” when the user hovers over it:
- Validation SmartTip: These provide real-time feedback on fields before form submission. An example is a SmartTip on an email field that will display if an incorrect entry is made and will disappear from the screen when the mistake is corrected:
How It Works
Before displaying SmartTips, WalkMe checks the Set’s Segmentation rules to see if the rule is true. If it is, WalkMe simultaneously runs all the SmartTips within the Set.
SmartTips can display tooltips on either an icon or directly over the selected element. If SmartTips are set to display over the element, the Guidance SmartTip appears when a user focuses on the selected field (hovers, clicks or tabs into). A Validation SmartTip appears when a user focuses out (clicks or tabs out) of the selected field and the field is incorrect (the validation rule evaluates to false).
When using both Guidance and Validation SmartTips the guidance message is placed over an icon and the validation message appears over the selected element.
A Set is a group of related SmartTips. Much like Walk-Thru steps, SmartTips are created as a group within a Set. No single SmartTip can be independent of a Set just like no single step can exist independent of a Walk-Thru. Your first step when creating SmartTips is to create the Set in which the related SmartTips will be grouped.
Settings of a Set
When creating a Set, you will first be prompted to determine where this Set will play. After creating the Set, you can return to the Set’s Settings page and make changes by hovering over the Set from the Set Menu and clicking the settings icon or in the lower left-hand corner of the Editor when you are in the Set’s SmartTips page.
In Settings, select Display Set only on a specific page and create a rule that identifies the page (most commonly the URL rule type). Identifying a specific page maximizes performance. If you would prefer to play the Seton all pages, you do not need to create a rule.
In the image below, the Set has been configured to only show on ShopMe’s checkout page (see the URL in the Display Rules page to understand why).
Add the Set to a Segment to target a specific audience. For a form that applies to both Admins and Sales team members, apply both Global Segments to the SmartTip Set. If the Segment has not yet been created when you are building your Set, you can add the Set to the Segment later in the Segmentation Center.
What Are Guidance SmartTips?
A Guidance SmartTip only displays a message to the end-user. Guidance SmartTip messages appear when you hover over the icon or if you display the message on the element then it appears when you hover or focus on (click or tap into) the element. This message can be displayed either on the anchored element or the Smart Tip icon.
Using the Interaction tab you can configure these settings and access the Rich Text Editor to customize the design of the SmartTip.
What Are Validation SmartTips
Validation SmartTips verify that a user has added valid content into fields. They verify field inputs by checking against validation rules.
Validation rules allow you to set what is considered valid input for a field. If the validation rule evaluates as false (incorrect input into a field) then the SmartTip will display your validation message.
Validation rules are checked when a user focuses out (clicks or tabs out) of a field. The Validation SmartTip icon or element highlight will display if the user completes the field incorrectly (the validation rule evaluates as false ) and disappear when the user has corrected their mistake (the validation rule evaluates as true).
A Validation SmartTip only plays if the rule is false; in other words, if the selected element is not a valid phone number, the validation will display.
The validation can be set to appear either on the SmartTip icon or on the selected field. The message will appear when the user hovers over the icon.
You may configure validation rules and success messages from the Interaction tab.
Select from among the following preset validation rules or create a new, custom rule:
- Mandatory: The Rule will evaluate whether there is text in the attached field. If left empty, the validation Rule will be false.
- Numeric field: Checks that the entry is a numeric value.
- Date format: Checks that the entry is in a valid date format such as dd/mm/yyyy.
- Time format: Checks that the entry is in a valid time format such as 14:00 or 2PM.
- US Phone Number: Checks that the entry is a US phone number with 10 digits (area code plus number). This rule cannot check if numbers are real, only that it is written in the correct format.
- Email address format: Checks that the entry is in a valid email format and includes an @ symbol Web address format: Checks that the entry is in a valid web address format.
If you choose one of the presets and click Update Conditions, you will see the way these presets are written in the Rule Engine. For example, the US Phone Number preset uses the following rule:
- After creating a new Set, you are ready to create the Set’s SmartTips.
- First, click the “+” icon, and select an element to anchor the SmartTip to.
- Next, select the type of SmartTip, between Guidance, Validation, and Both.
- Finally, choose whether you want your message to appear when the user hovers over an icon of your choice, or over a field that exists on the page.
Depending on the type of SmartTip you selected, follow these steps:
- Once you click the + icon, you will enter Capture Mode
- Select the element you would like to anchor the SmartTip to
- Enter a Guidance message (required)
- If you would like to create another SmartTip, click Next SmartTip in the lower right corner:
- A success message will appear briefly: “SmartTip successfully saved.”
- Once you’ve created all the SmartTips you want, click Done.
Pro-Tip: For Guidance SmartTips, the element is only relevant only for placement.
Validation and BOTH SmartTips
The process is the same, except that you will not include a Guidance message and you must create a validation rule for each Validation SmartTip. Unlike with Guidance SmartTips, the element selected is the field that will be checked by the Validation Rule you create.
Once you’ve captured your element and selected Validation SmartTip, you will be redirected to the Interaction tab, where you must create a Validation Rule and write a message that will appear when the validation rule evaluates to false.
For both Guidance and Validation SmartTips, you can make additional changes to the SmartTips in the SmartTips’ Options Menu.
Pro-Tip: Want to change your SmartTip’s name? You can now do it by hovering over the SmartTip, hovering over the pencil icon, and clicking “Rename.” Simple as that!
Global customization enables you to change the design for all SmartTips, without the need to customize individual SmartTips as they are being created. Using global customization keeps a consistent look and feel for all SmartTips.
The best practice is to set one style for error tooltips to keep uniformity within the platform. Global customization does not apply retroactively, and will only affect SmartTips created after the design is saved.
Customize icon and tooltips in the Customize menu located in the blue Admin Bar at the bottom of the Editor. Here, you can change the default style of Guidance, Invalid Validations, and Valid Validations.
You can override global color, text, and icon styling for Guidance SmartTips in the SmartTip Options Menu. This is because there are different use cases for Guidance SmartTips and you may not always want the same style.
When you are ready to publish your SmartTips, find the Set in the Publish tab. Note that publishing a Set will publish all the SmartTips within this Set:
If there are one or more individual SmartTip within the Set that you would prefer not to publish, disable it in the SmartTip Options Menu. If toggling between enabled and disabled, you will need to republish for the change to take effect:
Similarly, individual SmartTips cannot be archived, only whole Sets. To retire an individual SmartTip, disable it in the SmartTip Options Menu.
SmartTips Not Showing?
If none of the SmartTips in the Set are showing:
- Check the Set’s page display rule.
- Check the Set’s Segmentation rule.
If individual SmartTips aren’t showing:
- Check the SmartTip’s display rule; both the display rule AND the Set Segmentation must be true for the SmartTip to show.
- Check SmartTip element grade; try recapturing your element If a Validation SmartTip is not appearing and check the validation rule. When the rule evaluates as true, the validation message will display.
If your SmartTips still aren’t showing, contact email@example.com.
Try it Out
Talk to your team about where on your site SmartTips could help your users. Select fields on the page on which users might need extra help and add a SmartTip.
Make SmartTips to provide guidance and error-proofing on a form on your site. Identify a page on which users may have difficulty understanding instructions or correctly completing fields.
- Enter your Editor account and go to SmartTips app.
- Create a new Set.
- Create a page rule for the Set you created.
- Create a Guidance SmartTip.
- Change the default icon and colors to your liking.
- Select whether to display tooltip on the icon or selected element.
- Create a Validation SmartTip.
- Display on hover over the field.
- Create a validation rule for your SmartTip.
- Create a SmartTip that is BOTH Validation and Guidance type.
- Preview your SmartTips.