SmartTips: Getting Started Guide

Updated on April 16, 2020 Download PDFDownload as PDF
Download PDF

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.

For more information on SmartTips, view the SmartTips Introduction page.

Individual SmartTips are created within a Set — a group of SmartTips that generally appear on the same form or page.  This article will guide you through the process of creating a SmartTips Set.

Create a SmartTips Set

  1. In the WalkMe Editor, click the orange plus sign and select SmartTips Set:
  2. Name the SmartTips set based on where the Set will appear. (This title will not be visible to your users, so choose a name that will be useful for you in identifying the Set in the future.)
  3. Choose where to display the SmartTip Set:
    1. If this SmartTips Set appears on every page (if it appears in the header, footer, navigation pane, etc.), Choose the Display Set on multiple pages option.
      • Most SmartTip Sets will only be displayed on a specific page.
      • Choosing to display a SmartTips set on a specific page also optimizes performance.
    2. Adding SmartTips to a Specific Page:
      1. Choose the Display Set only on a specific page option.
      2. Click the Create rule to identify page button.
      3. Define the conditions to determine when this SmartTips Set appears. (Most commonly, this will be based on the URL of the page, though your platform may require different results. Follow the Rule Engine Best Practices guide for more on how to use this Rule Engine.)
  4. Now that you have created a SmartTips Set, you will create an individual SmartTip.  Click the orange plus sign in the SmartTips Set to add a new SmartTip.
  5. Select the element that you want to attach the SmartTip to.
  6. Use the mini-editor popup in your browser to define the SmartTip’s initial settings:
    1. Add a title to the SmartTip. This will help you find and edit the SmartTip in the future.
    2. Guidance SmartTips give users additional information about specific elements on a page.  This is the most commonly used SmartTip type.
    3. 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.
    4. Enter the message that you want to appear to your users in the Guidance message field.
    5. Choose when to display this message.
      • You can set this SmartTip guidance to appear when the user hovers over a SmartTip icon. If you choose this option, use the directional arrows to determine where the icon will be positioned:
      • You can also choose to display a SmartTip when a user hovers over an element:
    6. When you have made these changes, click Done. (If you are creating multiple SmartTips, you can select Next SmartTip instead.)
  7. Your SmartTips Set is now created.  You can continue adding more SmartTips to this set by repeating Steps 4-6.  To further customize each SmartTip, see the Customizing SmartTips process below. (If the SmartTip is attached to an element that appears or disappears on the page, customizing the Element Behavior settings is a necessary step.)

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.

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.

Was this article helpful?

Related Articles