Updated at: Feb 19, 2023
Wouldn't it be nice for your users to not even have to leave your website so that they can detect what web browser they're using? Well now you can!
You can embed the best Web Browser Detection Website on the internet directly on to your site, so that you don't need to drive your users away from your site to find out what they're using.
It would be perfect to put this on your Technical Support page or perhaps your "Contact" page.
Don't forget, if you want to integrate this more tightly with your website or system, check out our API. You'll get tons more control; but if you just need a basic version, pop an IFrame in your page!
This guide assumes a basic understanding of HTML and IFrames and that you have the ability to insert HTML into your website. If you need to brush up on IFrames, view this page on W3Schools.
You can embed this in your page by inserting the embed html:
This will appear on your site like this:
You can view the contents of the Iframe here
You'll notice the inline CSS to remove the IFrame border; presumably you'll want to keep this too.
Also note that the IFrame is a little taller than it needs to be in most cases. We do this for two reasons:
So, we make the IFrame a little taller than it usually needs to be, just in case.
As you can see, the default setting is just the most basic output from the site.
Depending on what you want to display to your users, you have the option of adding more information to the display. Read on to find out more.
One of the great features of whatismybrowser.com is that we can check if web browsers are up to date (for the major browsers). We now provide this as an option for the IFrame as well.
Simply add the parameter to the url: version_check=true and if we can determine if your browser is up to date, we will show you a message.
If you want to also show the capabilities of your user's website (for example, whether or not they have Javascript enabled), you can add the parameter to the url: capabilities=true and it will cause their capabilities to display as well.
You can now also add &cookies_third_party=true to the URL parameters to include a check for Third-Party cookies. This adds another row to the capabilities table, so it's left as an optional setting for you to enable if you want it, and have size for it on your page.
If you want to show your users their Public IP Address, you can add the parameter to the url: ip_address=true and their IP address will be included.
Simliar to adding the Browser Capabilities or IP Address to the read-out, you can also set your user's Screen Settings to appear in the IFrame. This is done with the parameter: screen=true This causes their main screen resolution and bit depth to display in the iframe:
If you're giving your users the standard minimal output, you may want to also include a link to "View more information about your web browser", so that it is still possible to easily optionally find out more information if they're curious. You can do this by specifying: viewmore=true For example:
The Capabilities and Screen settings can be combined, simply by including them both in the IFrame's URL.
Note that as a part of the HTTP specification, the first one is preceeded by a question mark and the following parameter/s are preceeded by ampersands. For example:
You might be totally happy with the plain white and black; but if you want to change things like the colors and fonts, this is the section for you.
The objective behind this is to make the embedded IFrame match your site's appearance as much as we can to give your users the most uniform and pleasant experience as possible.
As with the other URL parameters, these can be combined with the above Capabilities/Screen settings by adding them to the embed URL.
You must specify color codes as a three or six digit hexadecimal color code. You can't use named colors (like "darkblue") or images.
Visit this link for a list of Hex Color Codes
You can specify the background color of the IFrame by using the parameter: "bgcolor". eg. bgcolor=90B5B5 For example, this makes the background a greeny/blue.
The typical use-case scenario for this is when you have the IFrame on a page with a non-white background and you want it to blend in with your content.
Note that our site intentionally sets the color that you specify on the html and body elements of the IFrame itself, not the "holder" div inside the IFrame, so that the color goes right to the edge and blends in with your site background. It looks a bit weird here because our site has a white background; but on yours it will look fine.
You can specify the color of the text in the IFrame by using the parameter "color". eg. color=5D7575 For example, this makes the text greeny/blue:
You can specify the color of IFrame's border by using: bordercolor=a29061. For example, this makes the border gold:
You can change the font family by specifying: font=serif This makes the text use fonts with Serifs (eg Times New Roman). Only use this if the rest of your site uses Serif fonts and you want the browser detection to match the appearance. If you don't specify this, Sans Serif fonts will be used (which is the default).
For example:
If you want the display a bit smaller (perhaps to fit in a sidebar), you can specify size=small This makes the text smaller.
For example:
Just for completeness sake, we added: size=large just in case you need the display much larger too.
For example:
This demonstrates combining some of the above options.
If after you put this IFrame on your site you get browser warnings about loading insecure content on a secure page; this means that you are using a https url for your site but are loading the IFrame without using SSL. To fix this, you can simply change the start of the IFrame url from http:// to https:// This should fix this problem. Our servers will automatically redirect your users to the secure version of our page so this problem shouldn't really occur unless your user is blocking redirects.
It's necessary for us to set some rules about using this service. We're very happy for you to put this on your site; but you have to play nice with it.
You can only embed an IFrame of WhatIsMyBrowser.com on your site provided that:
This entire feature was added because of a user's request; we're always really open to suggestions and feature requests. If this feature lacks something you require, or you have a suggestion about it, use the contact form to get in touch.
If you have any questions about these rules, any suggestions for the Iframe or the site in general, or any aspect of implementing the Iframe on your own website, please contact us via the Contact page and we'll do our best to respond.
Hopefully this Iframe feature gives your customers a more pleasant and streamlined experience.
Thanks for using the site!