WhatIsMyBrowser.com Frontend Library Integration Guide
Welcome
The WhatIsMyBrowser.com Frontend Library provides an easy way to discover lots of useful things about web browser technology via a Javascript library which runs in your customers/client's browsers.
The integration document you are now reading accompanies the demo, taking you from the beginning all the way to detecting whatever you require on your own site.
What is Frontend detection?
"Frontend" in web terminology refers to things which run "in the browser" (as opposed to on a webserver or in a stand-alone program on their computer or App on their device). The WhatIsMyBrowser.com Frontend library is written in Javascript and runs on your customer's web browsers.
Generally speaking, it will tell you things about your customers like "do they have Adobe Flash?", "are third-party cookies enabled?", "do they have an adblocker" and so on.
To do things such as browser detection, operating system detection, device detection, hardware/software types etc, you'll need to use the Browser Detection API instead.
Getting started
The Frontend Library is free to download and use. You don't require an API account with us.
Get help
We are dedicated to providing you with the best support we can for the Frontend Library.
If you get stuck, first make sure to check out our demo of the library. It provides a working example which you can see in action for yourself.
Even though the frontend library isn't a paid product, we're always happy to lend a hand with it; if you're stuck feel free to reach out via our contact form with a detailed description of your problem and what you've tried and we'll be happy to give you a hand.
Adding the Frontend Library to your site
Introduction
The Frontend Library is a single JavaScript file: whatismybrowser.min.js which will need to be included on any page on your site which uses it's functionality.
You'll need to download the library and put it on your web server.
Downloading the library
You can download the latest file from:
https://cdn.whatismybrowser.com/prod-developers/static/main/software/detection/frontend-library/whatismybrowser.min.js.zip
You must download the library and store it on your own webserver or CDN. Please don't directly reference this Javascript file from your site's code. It's against the Terms and Conditions of the Library and the URL may change unexpectedly which would break your site's functionality. Make sure to put it on your own server to prevent this from happening.
Including the library on your site
Now that you have downloaded the file, you need to add it to your website project. The way you achieve this is depends on how your website is built and is generally outside the scope of this document.
However basically your choices are to simply include it by referencing the file in your code. For example something like this:
<script src="path/to/your/files/whatismybrowser.min.js"></script>
(Don't forget to replace "path/to/your/files" with where ever you store your site's Javascript files on your server.)
Or, the other alternative is to combine it with the rest of your Javascript files and create a single Javascript file which gets downloaded. For more information please see this article: Combining External Javascript and CSS .
Frontend Detection
Introduction
Using our frontend library is quite straightfoward. Once you have included the library correctly in your page, your Javascript code will get access to the WIMB object. This is a bundle of functions that can be called as you require, each of which will detect a different thing about the web browser which is currently being used.
How you choose to hook the results of these functions into your own site is entirely up to you.
We have a demonstration page for the frontend library which you can look at for further reference. Make sure to "View Source" on the page to see the code for it. We have intentionally kept the page and the code as straightforward and simple as possible to avoid confusion or unneccessary complexity.
The function descriptions below are straightforward and are intended to be read along side the sample code in the demonstration page. Make sure to look there for working examples of how to use the code.
Cookies
This test checks whether the user's browser will let a first-party domain set a cookie.
WIMB.detect.cookies.enabled()
Returns true or false
Third-Party Cookies
Another type of cookie is a "third-party" cookie. This is a cookie which is set via a Javascript file which you have included on your page which comes from another domain. Many web browsers and privacy extensions block these by default (or perhaps the user has changed their settings to disable cookies instead.
This test works by making a request to a special URL on third party domain which we control which sets a special cookie, and then a few seconds later making another request to that same domain to check if that cookie had been successfully set. If the cookie exists, then we know that third-party cookies are enabled. If not, then it seems third party cookies are disabled.
First start by calling the function to set the cookie:
WIMB.detect.cookies_third_party.trigger_set_cookie();
and then every few milliseconds (maybe every 50 or 100), keep calling the other function using setInterval() to see if the cookie has been set:
if (WIMB.detect.cookies_third_party.enabled() == true) { [...]
You also probably want to include a setTimeout() to check if a result has been returned and if not, clear the 50ms interval you created to start with.
The sample code gives a clear example of doing all of this. Please refer to it.
Flash detection and Flash versions
Although no longer nearly as popular as it used to be, Adobe Flash is still required on some sites. This is an easy way to check for it and get the version number that's installed.
The function WIMB.detect.flash.enabled() will return true or false depending on if Adobe Flash is installed and whitelisted for your domain.
We also have some easy functions to check the installed version number as well:
WIMB.detect.flash.version() - will return a medium level of detail; the major release and the first minor release number, eg 17.0.
WIMB.detect.flash.version_full() - will return a maximum level of detail; all available version number fragments eg 17.0.0.
WIMB.detect.flash.version_major() - will return just the major version number, 17. This is useful when you just want to check which major release they're on; it saves you having to parse the results from WIMB.detect.flash.version_full() or WIMB.detect.flash.version()
Java detection and Java versions
Java applets have mostly gone completely extinct on the web, but in the event that you still need to check for them, we have a few functions that make it easy. Remember that this will only test for the presents of the JVM inside your user's browser. It has no bearing on whether they have Java installed at a system level (eg outside the browser). Please also remember that most if not all of the major browsers no longer support the NPAPI interface required to make Java applets run.
The function WIMB.detect.java.enabled() will return true or false depending on if Oracle's Java plugin is installed and whitelisted for your domain.
WIMB.detect.java.version() will return a human readable string of the version number and update number of the Java plugin.
For example: 8, update 45.
WIMB.detect.java.version_array() will return the version number list and update number of the Java plugin.
For example:
{
"version": [8, 0],
"update": 45
}
Screen size
The two functions: WIMB.detect.computer_screen.width() and WIMB.detect.computer_screen.height() will return the height and width of the user's primary screen. Pixel density has been taken into account.
Screen depth
Although more relevant in the earlier days of the web (where users could concievably have 8-bit or 16-bit displays), the function WIMB.detect.computer_screen.color_depth() will return the color depth of the user's primary display. An example value is 24.
Screen pixel ratio
WIMB.detect.computer_screen.device_pixel_ratio() will return a value like 2.
For more information, you can search the web or read these articles:
Browser window size
The two functions: WIMB.detect.browser_window_size.width() and WIMB.detect.browser_window_size.height() will return the height and width of the browser window, including their address bar and any toolbars they have displayed.
Browser viewport size
The two functions: WIMB.detect.browser_viewport_size.width() and WIMB.detect.browser_viewport_size.height() will return the height and width of the browser view port; that is to say, the size of the visible part of your website, not the browser itself.
Local IP Addresses
Your webserver will already know the public IP address of your user simply by looking at their web request, but to find their internal IP address requires a bit of Javascript.
You first need to trigger the detection:
WIMB.detect.local_ipv4_addresses.trigger_detection();
and then a few seconds later check to see which local IP addresses have been detected by looping over the list which is returned by: WIMB.detect.local_ipv4_addresses.retrieve()
Please remember to refer to the working demo. Also note that this detection will not be available in all browsers as some don't support the WebRTC technology used to discover the IPs.
GMT Offset
The WIMB.detect.gmt_offset() function will return a string that shows their GMT offset, for example: +11:00.
AdBlock detection
The function WIMB.detect.addons.adblock.enabled() will detect if an Adblocker extension (or some of the privacy extensions) are active in your customer's browser.
This test works by inserting a div named ads-advert-banner which is designed to be as "advertising-ish" as possible so as to cause adblocking extensions to block it. Then, the function checks to see if it is still shown on the page. If it isn't found to be shown then it's assumed that there must be an adblocker which is hiding things, and will thus return true.
It seems that at least some AdBlocker extensions take a short time (less than half a second) to initialise fully, and so, it's a good idea to wait about 500 milliseconds before running the test. Please refer to the demo source code for an example.
Conclusion
Introduction
This is the end of the Integration Guide. We hope you've found it useful.
Hopefully by this point, your system is hooked up to the library and working without any problems.
If you're having any issues, don't hesitate to contact us to get further help. We're always willing to give you whatever we can to get you going.
Feedback
We are always focused on providing a high quality product and excellent documentation. If there's anything you think is wrong or missing from the documentation, or from the library itself, then please let us know about it. We're always looking for feedback on what we're doing. Good or bad - let us know.
Please keep in mind that this library has only been released to the public recently and hasn't been tested in many different environments. There are probably edge cases of weirdness that we haven't encountered yet. If you find anything, let us know.
Testimonials
We love it when things that we've built help other people. If this library made your life as a developer a bit easier then we've love to feature your comments in our testimonials section.
Even if you just want your logo to be included in the "This library is used by..." section, let us know!
Back to the main Frontend Library page