How to help website users update their browsers

Some of your website users might be using a browser that is outdated or not compatible with your website. To help these users update or install a compatible browser, you can use a Yandex script to set up notifications on your site.

There are two types of notification messages: "outdated browser" and "unsupported browser".

Outdated browser

Users with outdated browsers see the update message every time a page loads. The message is shown on a bar at the top of the page. Clicking this bar opens a popup window with links to the latest versions of popular browsers.

You can choose the minimum browser versions yourself, or rely on the default list maintained by Yandex (more information in the instructions below). If you use your own list, don't forget to keep it updated as new browser versions are released.

A user who closes the notification without updating won't see the reminder again for 30 days by default. You can change this logic by manually configuring the remember and rememberFor (Additional parameters table) parameters.

Unsupported browser

If a user's browser isn't supported by your website, the user only sees a message with a link to the latest version of the supported browser. This notification message completely covers the page contents, so the site becomes unusable in a non-compatible browser.

There are two ways to get the notification code:

Generate it using the constructor
Write it yourself

Using the constructor to configure the notification

In the constructor, you can choose:

  • The notification type and language (the exclusive and lang parameters (Main parameters table)).

  • The color of the notification bar (the theme parameter (Main parameters table)). If only one browser can be used for accessing the site, this parameter is omitted.

  • A list of browser versions that you consider outdated (controlled by the browsers parameter (Main parameters table)). The list provided by Yandex is used in the constructor by default.

    The default list is updated from time to time. If you don't have specific requirements for browser versions, you can automatically get the most recent list of outdated versions. To do this, delete the browsers parameter from the generated code.

Insert the resulting code on every page of your site, after the opening <body> tag. For any additional parameters not specified in this code, the script uses the default values.

Configuring the notification yourself

The code for connecting and invoking the script must be inserted after the opening <body> tag on every page of your site.

Connect the script from the Yandex server:

<script type="text/javascript" src="https://static.yandex.net/browser-updater/v1/script.js"  charset="utf-8"></script>

Create a notification object using the ya.browserUpdater.init() method and pass the notification parameters in the arguments:

<script>var browserUpdater = new ya.browserUpdater.init(notification parameters);</script>

Code sample for outdated browser notification

<script type="text/javascript" src="https://static.yandex.net/browser-updater/v1/script.js" charset="utf-8"></script>
<script>var browserUpdater = new ya.browserUpdater.init(
 {
    theme: "yellow",
    lang: "ru",
    exclusive: false,
    browsers: {
      chromium: 35,
      amigo: "Infinity",
      iron: 35,
      flock: "Infinity",
      palemoon: 25,
      camino: "Infinity",
      safari: 5.2,
      yandexinternet: "Infinity",
      fx: 31,
      ie: 9,
      opera: 16,
      chrome: 35,
      maxthon: 4.4,
      seamonkey: 2.4
    },
    remember: true,
    rememberFor: 30,
    cookiePrefix: "yaBrowserUpdater",
    classNamePrefix: "ya-browser-updater",
    jsonpCallback: "yaBrowserUpdaterJSONPCallback",
    onStripeShow: null,
    onStripeHide: null
 });
</script>

Notification parameters

Main parameters

Parameter

Description

Acceptable values

Format

exclusive

Indicates that only one browser can be used for accessing the site.

true — The site is available only for a single browser.
false — The user's browser is outdated.

The default value is false.

boolean

theme

Color of the notification bar.

Ignored if you are using the notification that only one browser can be used for accessing the site.

The following colors are available:
yellow;
red;
blue;
green;
white;
black;
grey.

The default value is yellow.

string

lang

Notification language.

The following languages are available:
ru — Russian;
tr — Turkish;
en — English.

The default value is ru.

string

browsers

Restrictions for browser versions. If you want to always use the default list that is maintained by Yandex, omit the browsers parameter.

For some browsers, all versions are considered outdated if you don't specify one of the older versions as the minimum allowed version.

Versions can be specified for the following browsers:

  • chromium — Chromium;
  • amigo — Amigo/Mail.ru;
  • iron — Iron;
  • flock — Flock;
  • palemoon — Pale Moon;
  • camino — Camino;
  • safari — Safari;
  • yandexinternet — Yandex Internet;
  • fx— Firefox;
  • ie — Internet Explorer;
  • opera — Opera;
  • chrome — Google Chrome;
  • maxthon — Maxthon;
  • seamonkey — SeaMonkey;
  • yabrowser— Yandex Browser.

The supported key values depend on the value of the exclusive parameter.

exclusive=true

The site is available only for a single browser.

You can choose the following browsers:
chrome
fx
ie
yabrowser (default)

exclusive=false

A list of browser IDs with the minimum versions supported.

The version can be defined with a number or the word Infinity, which means that all versions of the browser are considered outdated.

string or object

Additional parameters

Only used for the outdated browser notification.

Parameter

Description

Acceptable values

Format

remember

Indicates that the yaBrowserUpdateHide cookie should be created, which records that the site user closed the notification bar and there should be a pause before displaying the notification bar again.

The pause lasts for the period specified in the rememberFor parameter, provided the site user doesn't clear cookies.

true — Don't show the notification for the number of days set in the rememberFor parameter (by default, 30 days).
false — Show the notification on every page load.

The default value is true.

boolean

rememberFor

The length of the pause before showing notifications, in days.

Applies if the remember parameter is omitted or the value is remember=true.

The default value is 30.

number

cookiePrefix

The name of the cookie installed by the script.

If you already set cookies with the name yaBrowserUpdaterHide, use this parameter to specify a name for the cookie that the script sets.

Your cookie name.

string

classNamePrefix

The prefix in the name of CSS classes generated by the script.

If you already use a CSS class with the prefix ya-browser-updater, use this parameter to specify the prefix that the script should use.

Your prefix for CSS class names.

string

jsonpCallback

The name of the JSONP global callback function that will be called after receiving the processed data about the browser.

If you already use a callback function with the name yaBrowserUpdaterJSONPCallback somewhere else, use this parameter to specify a name for the function that will be used by the script.

Your callback function name.

string

onStripeShow

The function that is triggered when the notification bar is displayed.

You can use it to transmit information about conversions to Yandex.Metrica or to define the upper page margin so the bar doesn't cover any of the page content.

The name of the function or the function itself. For example:

onStripeShow: function () {
             alert('show')
	}

The default value is null.

string or function

onStripeHide

The function that is triggered when the notification bar disappears.

You can use it to transmit information about conversions to Yandex.Metrica or to remove the upper page margin.

The name of the function or the function itself. For example:

onStripeHide: function() {
 yaCounterXXXXXX.reachGoal('stripe_hidden');
 }

The default value is null.

string or function