Smart Tips help address certain process or form on your site that users often make mistakes on 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.
The Short Version
SmartTips are advanced tooltips that provide additional, contextual information to your user on a mobile or desktop site. SmartTips are created in the 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 at the same time as a Walk-Thru. SmartTips tips are ideal for addressing problematic forms, as well as providing a way to validate the information entered:
- Guidance SmartTip: These are used to present users with additional information to what’s on the page or an input field. You may have a Guidance SmartTip on a Name field to clarify that it should be first and last name. The Guidance SmartTips 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. 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 the Tooltip 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) the selected field and the field is incorrect (The Validation Rule is 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 within a Set. No single SmartTip can be independent of a Set just like no single step can exist independent of a Walk-Thru. First, create the Set in which the related SmartTips will be grouped.
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 Settings 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 SmartTips list.
In Settings, select “this page only” and create a rule that defines the page (most commonly used is the URL Rule Type). Defining a specific page, maximizes performance. If you would like to play the Set on all pages, you will not need to create a Rule.
In the image below, the Set has been configured to only show on ShopMe’s checkout page.
Add the Set to a Segment to target a specific audience. For a form that applies to both Admins and Sales, apply both Global Segments to the Smart Tip 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.
After creating a new Set, click add New SmartTip and select the element you would like to anchor your SmartTip to. For a Guidance SmartTip, the element is relevant only for placement. For Validation icons, the element selected is the field that will be checked by the Validation Rule you create. After selecting the element for your SmartTip, you will be able to make additional changes in the SmartTip Options Menu.
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 tab 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 along with access the Rich Text Editor and customize the design of the SmartTip.
Validation SmartTips verify that a user has added valid content into fields. It verifies field inputs by checking against Validation Rules.The Validation Rule allows you to determine what valid input for the field. If the validation rule is false (user input incorrectly) 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 is false ) and disappear when the user has corrected their mistake (the Validation Rule becomes 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 icons.
You may configure validation rules, validation and success messages from the interaction tab.
Use preset validation rules or create a 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, US Phone Number preset uses the following rule:
Global Customization enables you to change the design for all Smart Tips, without the need to customize the Smart Tip as it is being created. Using global customization keeps a consistent look and feel for all SmartTips. The best practice is to only set one style for error tooltips to keep uniformity within the platform. Global Customization does not apply retroactively and will only affect Smart Tips created after the design is saved. Customize Icon and Tooltips in the Customize menu located in the Admin Bar:
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. Validation SmartTips can only use the global default style and cannot be individually customized.
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 is an individual SmartTip(s) within the Set that you would like to not Publish, disable it in the SmartTip Options Menu. If changing between enabled and disabled, you will need to republish.
Similarly, individual SmartTips cannot be archived, only whole sets. To retire a 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 Validation SmartTip is not appearing: Check the Validation rule. When the rule is true, the Validation message will display.
If your SmartTips still aren’t showing, contact firstname.lastname@example.org
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 Smart Tip. 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 icon or selected element
- Create a Validation SmartTip Display on hover over field Create a validation rule for your SmartTip.
- Create a SmartTip that is BOTH
- Preview your SmartTips