Visibility and Display Rule Conditions
- 3 Minutes To Read
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.
|URL||You 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.|
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 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.
|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 google.com (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.
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. Use this option to provide your own CSS selector identifier for the 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 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
- 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 firstname.lastname@example.org to make changes.