Brief Overview

SmartTips provide on-screen guidance that can be used to give users additional information about specific items on your page. SmartTips are especially useful when addressing processes or forms on your site where users often make mistakes.

SmartTips come in two types: SmartTip and AI SmartTip. AI SmartTip is now the default type in the capture popover and is available for all eligible customers. Unlike standard SmartTips, AI SmartTips evaluate user input in real time and generate suggestions based on a validation rule you define, making them well-suited for text fields.

Follow this guide to create SmartTip sets and SmartTips. For AI SmartTips, learn how to set up here.

Create a SmartTips Set

1. From the Editor, click the + icon
2. Select SmartTips Set
   
3. Name the SmartTips set
   This will not be visible to your users, so choose a name that will be meaningful for you
4. Choose where to display the SmartTip Set. You have two options:

   1. Display Set only on a specific page | Recommended

      1. Why use this method:

         1. Optimize performance by checking for a specific rule for the Set to display

         2. Most SmartTips Sets display only on one specific page

   2. Display Set on multiple pages

      1. Why use this method: Your SmartTips appear on every page (in the header, footer, navigation pane, etc.)

5. If you select Display Set only on a specific page, click "Create rule to identify page"

   1. Define the conditions to determine when this SmartTips Set appears

   2. This is commonly based on the URL of the page, though your platform may require different rules. Follow the Rule Engine guide for more information

   3. Click Done

6. Apply segments if needed in the Segmentation tab to make the SmartTip set appear to your target audience only

7. Use the Notes tab to communicate with colleagues and document important info about your item

Create SmartTips

Now that you have created a SmartTips Set, you will create an individual SmartTip.

1. Click the + plus icon in the SmartTips set to add a new SmartTip
   
2. Select the element that you want to attach the SmartTip to
   
3. Use the mini-editor popup to define the SmartTip's initial settings:

   1. Edit the SmartTip name

      1. WalkMe may auto-fill the title if you selected a text element

      2. This is the display name and is not visible to end-users

   2. Select SmartTip as the SmartTip type

      1. AI SmartTip is the default selection when capturing input fields. If you want to use the AI SmartTip, go the the AI SmartTip article

4. Select the type of SmartTip: Guidance, Validation, or Both

   1. Guidance SmartTips give users additional information about specific elements on a page
      • This is the most commonly used SmartTip type.
   2. Validation SmartTips can be used in text fields to ensure that users fill out their forms correctly
      • For more information on Validation SmartTips, view the Validation SmartTips support article

5. Click Done

Customize SmartTips

1. Open the SmartTips Set that you want to customize, and open a specific SmartTip by clicking on the title
2. On the interactions page, you can adjust the SmartTips settings that were created when you initially created the SmartTip in the browser
   • To add Validation to a Guidance SmartTip, click the Add Validation button
     • See the Validation SmartTips guide for more information on how to set up Validation SmartTips
   • You can also choose here to determine whether to display the SmartTips message when the user hovers over the SmartTips icon or hovers over the element
3. Click the Selected Element options to adjust the SmartTip's behavior
   • If the SmartTip is attached to an element that appears and disappears as a result of page load, you will need to adjust these settings
   • This is often necessary for SmartTips that appear in a popup window or a modal
4. Use the Customize on Screen! button to adjust the appearance and position of this SmartTip in the browser
5. Use the Rich Text Editor to make additional customizations, including adding images that have been upload to the Assets Library
   • The following image types are supported - TIFF, SVG, PNG, JPG, JPEG, GIF
   • 

Guidance SmartTips

Guidance SmartTips present users with additional information on the content and the format of the data that should be entered in the input field.

Guidance SmartTips can be displayed in an icon and the messages appear when you hover over the icon or click on the element or in placeholder text, which is always visible until the user types in the field with the placeholder.

How to display the SmartTip?

• With icon. Select icon position: When this option is selected, the guidance icon will appear next to the element and the message displays when the user hovers over it
• Without icon: When this option is selected, the message will appear when the user hovers over the element
• Placeholder text only: When this option is selected, no icon will display, only the placeholder text

Placeholder text 

Placeholder text, located inside a text field, is an additional hint, description, or example of the information required for a particular field. It disappears when a user starts typing in the field. 

You can have both a placeholder and a message on hover.

The placeholder text option is only available for Guidance SmartTips. It's not available if Validation or Both is selected.

The captured element must be an input field for placeholder text to be supported. Placeholder text can also be used if the element is defined with jQuery.

Validation SmartTips

Validation SmartTips allow you to check your users' input on a text field to ensure that the information given meets the requirements of the field. The Validation SmartTip will highlight the field in red and display an error if the information given is invalid. Validation SmartTips must be placed on a text field.

1. To create a validation SmartTip, you can add a SmartTip to an existing SmartTips Set or you can create a new SmartTips Set.
   Note: You can add Validation to an existing Guidance SmartTip by clicking the Add Validation button in the Interaction tab of the SmartTip options.
2. In the appropriate SmartTips Set, click the orange plus sign.
3. Click the Validation radio button to make this SmartTip a Validation SmartTip:
   
4. Choose when to display the validation message, then click Done. This will open the SmartTip Options page in the Editor.
5. Choose from the available options for validation rules (if none of these are applicable, you can Define valid entries using the Rule Engine):
   1. Mandatory field
   2. Numeric field validation
   3. Date format validation
   4. Time format validation
   5. US Phone number format validation
   6. Email address format validation
   7. Web address format validation
6. Enter the Error message that you want to display when the text entered is invalid.
7. Optionally, you can check the box for Success indication, which will highlight the text field green once the text entered is valid.  You can also include a success message to be displayed once the information entered is correct.

Technical Note

Disable AI SmartTips

If you prefer not to use AI SmartTips, you can select SmartTip from the SmartTip type dropdown at any time during capture. To disable the feature entirely, contact your CSM or WalkMe Support.

SAP users

SAP users will have to enabled AI on their account and sign the WalkMe AI terms and conditions.