Visibility and Display Rule Conditions
  • 3 Minutes To Read
  • Print
  • Dark

Visibility and Display Rule Conditions

  • Print
  • Dark

The following table lists all the conditions that can be used when configuring Visibility Rules to segment widgets or Display Rules to show the tooltips. These rules determine where and when Whatfix content is displayed on your application.


URLYou can use the URL criteria to specify the entire 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 when 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 ParameterIf 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 HashIf 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 ElementIf 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. Use this option to 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)

  • If you have created a Smart tip inside iframes, then the 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?