Protect yourself online - The World's Best VPN Service - IP Vanish

Web Browser Detection on your site with an IFrame

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!

Implementation examples

Introduction

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.

Basic usage

You can embed this in your page by inserting the embed html:

<iframe src="https://www.whatismybrowser.com/feature/iframe" width="600" height="150" style="border: none;"></iframe>

This will appear on your site like this:

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:

  1. It's not possible for your site to "ask" the IFrame how tall it needs to appear (due to cross site browser security restrictions), so it has to just guess
  2. While most browser names are quite short and will fit on one line, some browsers (or platforms) have quite long names which can cause the read out to drop on to a second line, thus pushing everything down outside the height of the IFrame.

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.


Browser Capabilities

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

For example, this will cause their capabilities to display as well:

<iframe src="https://www.whatismybrowser.com/feature/iframe?capabilities=true" width="600" height="270" style="border: none;"></iframe>


Screen settings

Simliar to adding the Browser Capabilities, 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:

<iframe src="https://www.whatismybrowser.com/feature/iframe?screen=true" width="600" height="200" style="border: none;"></iframe>


A "View more info" link

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:

<iframe src="https://www.whatismybrowser.com/feature/iframe?viewmore=true" width="600" height="180" style="border: none;"></iframe>


Combining these settings for a fuller display

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:

<iframe src="https://www.whatismybrowser.com/feature/iframe?capabilities=true&screen=true" width="600" height="310" style="border: none;"id="wimb-detection-iframe"></iframe>


Customising the appearance

You might be totally happy with the plain white and black; and that's great, 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

Background Color

You can specify the background color of the IFrame by using:

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.

<iframe src="https://www.whatismybrowser.com/feature/iframe?bgcolor=90B5B5" width="600" height="150" style="border: none;"></iframe>

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.


Text Color

You can specify the color of the text in the IFrame by using:

color=5D7575

For example, this makes the text greeny/blue:

<iframe src="https://www.whatismybrowser.com/feature/iframe?color=5D7575" width="600" height="150" style="border: none;"></iframe>


Border Color

You can specify the color of IFrame's border by using:

bordercolor=a29061

For example, this makes the border gold:

<iframe src="https://www.whatismybrowser.com/feature/iframe?color=a29061" width="600" height="150" style="border: none;"></iframe>


Font Family

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:

<iframe src="https://www.whatismybrowser.com/feature/iframe?font=serif" width="600" height="150" style="border: none;"></iframe>


Display size

If you want the display a bit smaller (perhaps to fit in a sidebar), you can specify

size=small

This makes the text smaller. Don't forget that you can tweak the "width" parameter of the IFrame to fit your sidebar more accurately.

For example:

<iframe src="https://www.whatismybrowser.com/feature/iframe?size=small" width="340" height="150" style="border: none;"></iframe>

Just for completeness sake, I added:

size=large

just in case you need the display much larger too.

For example:

<iframe src="https://www.whatismybrowser.com/feature/iframe?size=large" width="340" height="300" style="border: none;"></iframe>


Putting it all together

This demonstrates combining some of the above options.

<iframe src="https://www.whatismybrowser.com/feature/iframe?size=small&bgcolor=BFBFB0&color=3E4759&bordercolor=8C7268&capabilities=true&viewmore=true" width="340" height="250" style="border: none;"></iframe>


SSL and insecure content warnings

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.


Wrapping up

The Rules

It's necessary for me to set some rules about using this service. I am 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:

  • You agree that all the standard Terms and Conditions of using WhatIsMyBrowser.com apply to using the Iframe.
  • You will not intentionally obscure the link back to WhatIsMyBrowser.com in the bottom of the IFrame, and thus:
  • It remains clear to all your users that the web browser detection is being done by WhatIsMyBrowser.com and they can click back to my site if they want.
  • You understand that this is a new feature of the site which is still in development. The way that it works, including its configuration options and output may change without notice as other websites start to use it and I modify and improve its behaviour.

Feedback

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.

Share the love

It's not a requirement of use, but if you embed an Iframe of my site on your page, please let me know! I'd love to see it in use on other sites and I'd be happy to link back to your site to show it as an example of other sites who are using it and help drive traffic to your site too.

In Conclusion

I suggest following the twitter account: @whatismybrowser, where I will post updates and changes to the system so that you can stay up to date.

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 me via the Contact page and I'll do my best to respond.

Hopefully this Iframe feature gives your customers a more pleasant and streamlined experience.

Thanks for using my site!

Ads by Google