Show content based on something seen on the app

Using the Advanced Visibility Rules, Whatfix enables you to trigger a widget based on a particular element in the underlying application. Consider that you want to show a Self Help only when the user is not logged in to the application. In this case, use Something on the application as a start condition and select the login button as the element. This ensures that the Self Help is only shown when the login button is present on the page.

Use the following steps to show a widget based on something on the application:

1. In the Visibility rules section for your widget, click When does the {widget name} start or stop appearing?

   

2. In the When does the {widget name} appear? section, select Something on the application from the What causes the {widget name} to appear? dropdown.

   

3. Using the What would you like to identify? dropdown, select the element’s unique identifier. Whatfix enables you to select from the following options:

   

   Element

   Whatfix enables you to target specific elements in your application to display a widget when those elements are present. For example, if you want to show a Self Help widget only when the user is not logged in, choose the login button as the target element. This ensures the Self Help widget appears only when the login button is visible on the page.

   Use the following steps to select an element as an identifier:

   1. Using the What would you like to identify? dropdown, select Element.

      

   2. Click Select element using studio.

      

   3. Enter the URL of the page from which you want to select the element.

   4. Click Select element.

      

   5. On the redirected page, use Whatfix Studio to select the desired element.

      

      Your title goes here

      • Click Add display rules icon to add or edit display rules for the selected element. For more information, see Selected Element conditions.
        

      • Click Reselect element icon to reselect the element on the application.
        

   Local storage

   Local Storage is a type of web storage that is used to store data on the client’s side. It stores data with no expiration time. Data persists even after the browser is closed and reopened, making it useful for long-term storage across multiple sessions.

   Whatfix enables you to display widgets based on specific values stored in local storage. Consider that you want to show a specific widget only when the user turns on the dark mode.

   Use the following steps to select a local storage key as an identifier:

   1. Using the What would you like to identify? dropdown, select Local storage.

      

   2. In the Key field, enter the name of the key you want to identify.

      

   Session storage

   Session Storage is a type of web storage that is used to store data on the client’s side. It stores data for the duration of a single browser session. Data is kept only as long as the browser or tab is open. Once the browser or tab is closed, the data is cleared.

   Whatfix enables you to display widgets based on specific values stored in session storage. Consider that you want to show a Smart Tip segment on your application only after a user has clicked a certain number of times during their session.

   Use the following steps to select a session storage key as an identifier:

   1. Using the What would you like to identify? dropdown, select Session storage.

      

   2. In the Key field, enter the name of the key you want to identify.

      

   Cookie

   A cookie is a small piece of data stored on a user's device by their web browser. It is used to remember information about the user, such as login credentials, site preferences, or session data, across different visits to a website.

   Whatfix enables you to display widgets based on specific values stored in cookies. For example, if you want to show a particular Tasklist only when a user’s cookie data indicates they are from a specific country, choose Cookies as your identifier. Specify the cookie key you want to monitor and define the required value for that key. The widget appears only when the cookie key matches the specified value, allowing you to present content that is relevant to the user's geographic location.

   Use the following steps to select a cookie key as an identifier:

   1. Using the What would you like to identify? dropdown, select Cookie.

      

   2. In the Key field, enter the name of the key you want to identify.

      

   Window variable

   A Window Variable can be used when you need to make some widget available based on a global Javascript variable that is present in the application or based on the one you created in Whatfix Advanced Customization. For example, if you want to check the user's role, set the condition user.role='admin'. This enables you to display a widget for specific user roles.

   Your title goes here

   To determine which Window Variable to use or to configure a Window variable, contact support@whatfix.com.

   Use the following steps to select a Window Variable as an identifier:

   1. Using the What would you like to identify? dropdown, select Window Variable.

      

   2. In the Key field, enter the name of the key you want to identify.

      

4. In the Check if {identifier} section, choose the operator for the element selector. Whatfix enables you to add the following operators:

   • Exists: Show the widget only if the element or key exists in the application.

   • Doesn’t exist: Show the widget only if the element or key does not exist in the application.

   • Exists and compare: Show the widget based on some criteria in the underlying application. Select the element and set the conditions based on the text, number, and date fields that are fetched from the underlying application to show the widget to your users.
     

Your title goes here

• When you select Check and compare values, Whatfix enables you to set conditions based on a Text, Number, or Date value.

  

• Compare identifer with a Text condition

  When comparing the identifier with a text condition, Whatfix enables you to select from the following operators:

  • Equals

  • Not equals

  • Contains

  • Not contains

  • Starts with

  • Ends with

  • Is blank

  • Is not blank

  • Regex

  

• Compare identifer with a Number condition

  When comparing the identifier with a number condition, Whatfix enables you to select from the following operators:

  • Equals

  • Greater than

  • Less than

  

• Compare identifer with a Date condition

  When comparing the identifier with a date condition, Whatfix enables you to select from the following operators:

  • Before specific date

  • After specifc date

  • On specific date

  • Between date

  

Your title goes here

If you have selected Element as the unique identifier, Whatfix enables you to compare either the Element attribute or the Element text of the selector.

• Element text: This is the text that is displayed on the element. This enables you to compare the element based on its visible text. For example, show a Smart Tip only if the text content of a button is 'Submit' and not 'Close'.

• Element attribute: This refers to a specific property or characteristic of the element, such as its ID, class, or data attribute. This enables you to compare the element based on its attributes. For example, show a Launcher only if the class attribute of the element matches is hidden.

  
  When you use Element attribute, you need to specify the Attribute key you want to compare. An attribute key is the name of the property you want to check on the HTML element. Common attribute keys include:

  • id: The unique identifier for an element.

  • class: The class name(s) that define the element's styling.

  • data- attributes*: Custom data attributes that can hold extra information.

  Let's say you have a button in your application with the following HTML:

  <button id="submit-btn" class="btn primary" data-status="active">Submit</button>

  If you want to show a widget only when this when the button's data-status attribute is set to active, set the conditions as following:
  

5. Once you have added all the required Visibility Rules, click Save.

   

6. Finish creating the widget and then click Save.