Identifying conditions for showing Smart Tips
- 1 minute to read
You can configure smart tips to display the tip only when certain conditions are true.
You can set conditions based on,
- URL Hostname
- URL Path
- URL Parameter
- URL Hash
- Other Element on Page
- Window variable
- Element CSS Selector/JQuery
- Select Element
- Element Text
To add conditions,
On the Whatfix Editor, click Smart Tips.
Enter a name for the Smart Tip Collection. This information is for the creator's reference and is not visible to the end user.
Click the + Tip button to create a new Smart Tip.
Select an element on the application that you would like the Smart Tip to point to.
Enter the description for the Smart Tip. You can also add a more detailed optional description (for eg. to specify the rules of an input field).
Scroll down to the Advanced Options.your title goes here
If the Advanced Options are not displayed, click the checkbox to enable it.
Now, under the Display Rules section set the desired conditions.
If needed, you can add multiple conditions using the plus icon.
Finish creating the smart tip.
|URL||You can use the URL criteria to specify any part of the URL that you want to use as a visibility rule. You can specify the URL Hostname, path, parameter, etc using this criterion.|
When you want to uniquely identify a page using the domain name, you can use this condition. The URL Hostname is the first part of any URL.
Example: If you wish to display the tip only if you are on google.com, you can add a condition as shown in the screenshot on the right.
The website path name is what comes after your domain name until the parameters or hashes.
For example, if the website URL is //support.google.com/mail/answer/8395?hl=en&ref_topic=3394219, then the pathname is /mail/answer/8395
Your condition looks something like the image on the right.
If you want to identify your web page using the parameters on the URL, you can use this condition.
For example, If you want to show a tip to a user only when the search phrase has "water" in Google, you can add a condition as shown in the screenshot on the right.
As you can see in the snapshot on the right, we have added three conditions.
1. The page must be google.com (URL Hostname)
2. The pathname is /search (URL Path)
3. The query parameter is ?q=water
If you want to identify a page using the hash value of your URL, you can use this condition. Hashes are usually present in Single page applications made using AngularJs or ReactJs. There are no page refreshes but only Hash changes.
If you want to identify a page based on the presence of a particular element (other than the one selected by you) on your web page, you can use this condition.
The values passed to this condition are CSS selectors like #ID, .class or Jquery.
Note: Use this only if it doesn't slow your application.
Example: If you want to check user.role='admin', you can set the condition.
You can also use this option to perform comparison options using the following criteria:
Note: You don't need to add a window at the start for window variables.
Element CSS Selector/ JQuery
|Your application uses unique IDs for some elements on the page. This is used when your element is selected from a list of options. For example, a drop-down menu. This lets you provide your own CSS selector identifier for the element.|
|Select Element |
If you find using CSS Selectors difficult when configuring Branching and Display Rules, you can now use the Select Element option. It is as simple as selecting an element on your app.
In the Branching/Display Rules section, choose the Select Element option from the dropdown, click the element in your app, and then finish configuring the rule as usual.
This is the text that is displayed on the Element selector that is selected above.
If your application supports multiple languages, you can choose "is one of" option and add the name with a comma(,) as a delimiter.
Note: The value is case sensitive.
For a better understanding of CSS selectors see CSS Selectors.
|Equals||For exact match|
|Not Equals||Doesn't equal the value|
|Contains||Set value is present anywhere in the value of the condition. (Check for strings)|
|Not Contains||Set value is not present anywhere in the value of the condition|
|Starts With||Set value is at the beginning of the value of the condition|
|Ends With||Set value is at the end of the value of the condition|
|Exists||Set value is available (or true)|
|Not Exists||Set value is not available (or false)|
- If you have created smart tip inside iframes, then window variable must be pointed to the respective frame. You may use window.frames
- If you are adding multiple conditions, then the tip is displayed only if all the conditions are true. (Similar to the Boolean AND)
- jQuery CSS selector options always show in the UI, however, it is supported ONLY for applications that have jQuery in the underlying platform
- Greater and less than accept only numerical values
- For date greater than/less than the default format is “MM/DD/YYYY”. The format can be changed to match your system date format. Contact email@example.com to make changes.