Basic widget
This is the most basic code to include the updatemybrowser.org widget on your page. Insert the code before the closing </body> tag in your page:
<script>
(function(u) {
var s = document.createElement('script'); s.async = true; s.src = u;
var b = document.getElementsByTagName('script')[0]; b.parentNode.insertBefore(s, b);
})('//updatemybrowser.org/umb.js');
</script>
This will automatically display the notification bar when updates for the browser are available.
Advanced widget
Notification threshold versions
Two different notifications can be shown in the widget. If a user has a browser version lower than the minimum required version, they will see a more urgent upgrade message shown below:
Users for which an update is available, but having a browser version equal to or higher than the minimum required version, will see the following notification bar:
The widget is automatically updated with the recommended threshold for every browser, but you can override these settings by including the following configuration parameters somewhere in a <script> tag on your page (but before the widget script):
var _umb = {
require: {
chrome: 42,
// firefox: 37,
ie: 10,
opera: 7,
safari: 29
}
};
When omitting a certain browser (in the above example Firefox) the widget will use the latest recommended miminum version.
Don't display widget on page load
By default, the widget will show immediately on page load when an update is available for the users browser. To prevent this, use the following configuration:
var _umb = {
display: false
};
Display widget for critical updates only
By default, the widget will not display a notification when a non-critical update is available for the users browser. If you want to display the notification for non-critical updates (when a users browser version is equal to or higher than the recommended version), use the following configuration:
var _umb = {
nonCritical: true
};
When combining above configuration options, make sure to produce a valid JSON object. When in doubt, use the widget code generator on this site.
API
Methods
UMB.displayWidget();
// --> displays the widget
UMB.hideWidget();
// --> hides the widget
Getters
UMB.getCurrentBrowser();
// "chrome"|"ie"|"firefox"|"safari"|"opera"
UMB.getCurrentVersion();
// i.e. 43
UMB.getStatus();
// "latest"|"update"|"warning"
UMB.getBrowserInfo('chrome');
/* {
name: "Chrome",
vendor: "Google",
current: "43",
minimum: "42",
update_url: "http://www.google.com/chrome",
info_url: "http://www.google.com/chrome/intl/en/more/index.html"
} */