Skip to main content
Matrix42 Self-Service Help Center

How to show browser warning banners?

This short article will provide you with an example on how to show warning banners in your web browser based on given criteria.
In our use case a permanent warning should be visible whenever any other browser is used to run Matrix42 Workspace Management other than Google Chrome.

The implementation can be achieved by following below steps:

  1. add javaScript to index.html
  2. add warning message to index.html

1. Add javaScript to index.html

Find the index.html file located at the UUX web directory called 'WM'. The full file path is <installPath>\Matrix42\Matrix42 Workplace Management\WM\index.html

Open the file using a text editor like notepad or notepad++ and search for the below javaScript function called'document.addEventListener'which is located at the very end of the initial scripts section.

Document.addEventListener.png

Make sure that you are within the opening and closing brackets {} and add below code section

 

In case you want to change the appearance of your message simply change the values at

  • .style.textAlign = 'center';
  • .style.fontWeight = 'bold';
  • .style.color = 'orange';

Add warning message to index.html

In order to display the warning message we need to add an additional element to our index.html page which we are currently adjusting.

As it should be on the very top we will place it at the beginning of the HTML body.

Add Message

Please use below code:

<!--index.html customizing to enable browser warning: Positioning and text of warning lable -->
    <div style="display:none" id="NotChromeWarningContainer">This application is optimized for Google Chrome. Using other browsers might result in reduced user experience.</div>
    <!-- End -->

 

In case you want to change the message itself simply alter  
'This application is optimized for Google Chrome. Using other browsers might result in reduced user experience.'

Once saved the changes will be applied and visible to your users. Below image shows IE on the left and Chrome on the right.

IE vs. Chrome

 

This kind of customizing is only meant to be of temporary nature like during an migration from legacy interface to UUX.

Therefore all settings need to be checked after installation of a hotfix or newer application version.