Identifying conditions for showing Smart Tips
  • 1 minute to read
  • Print
  • Dark

Identifying conditions for showing Smart Tips

  • Print
  • Dark

You can configure smart tips to display the tip only when certain conditions are true.

You can set conditions based on,

  • URL
  • 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,

  1. On the Whatfix Editor, click Smart Tips.

  2. Enter a name for the Smart Tip Collection. This information is for the creator's reference and is not visible to the end user.

  3. Click the + Tip button to create a new Smart Tip.

  4. Select an element on the application that you would like the Smart Tip to point to.

  5. 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).

  6. Scroll down to the Advanced Options.

    your title goes here

    If the Advanced Options are not displayed, click the checkbox to enable it.


  7. Now, under the Display Rules section set the desired conditions.

  8. If needed, you can add multiple conditions using the plus icon.

  9. Finish creating the smart tip.

Supported Conditions


URLYou 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.

URL Hostname
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, you can add a condition as shown in the screenshot on the right.

URL Path
The website path name is what comes after your domain name until the parameters or hashes.
For example, if the website URL is //, then the pathname is /mail/answer/8395

Your condition looks something like the image on the right.

URL Parameter
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 (URL Hostname)
2. The pathname is /search (URL Path)
3. The query parameter is ?q=water

URL Hash

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.

Other Element
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.

Window Variable
For advanced customization, you can choose to identify using the value of a particular Javascript global variable.
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:
  • Greater than

  • Less than

  • Date Greater than

  • Date Less than

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.
Sample values


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.

Element Text
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.

Supported Operators

For exact match
Not Equals
Doesn't equal the value
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
Set value is available (or true)
Not Exists
Set value is not available (or false)

Important Note

  • 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
For window variables:
  • 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 to make changes.
Was this article helpful?