SmartTipsSmart 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.
- 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.
Set SettingsWhen 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.
Guidance SmartTipA 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.
Validation SmartTipValidation 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.
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:
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
- 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.
Try it OutTalk 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