A simple JavaScript library that asks the visitor if they'd like to view the current page in one of it's alternate languages, if the their browser indicates another language is preferred.
This library does not translate your website, but offers the alternate versions of your website, as defined by <link rel="alternate" hreflang="es" href="..." />
tags in the <head>
of your web page. See the usage below for an example.
Uses acceptedlanguages.js to discover the users accepted languages and the pages alternate languages.
Language dropdowns are often placed below the fold or in inconspicuous locations of a web page. Including this library into a web page invites the visitor to switch quickly to their preferred language without requiring them to discover the language drop down.
See the example.
bower install acceptedlangaugesui
npm install acceptedlanguagesui --save
Download acceptedlanguages.min.js and acceptedlanguagesui.min.js.
Include acceptedlanguages.js
and acceptedlanguagesui.js
into the page and call init
.
<html lang="en">
<head>
<link rel="alternate" hreflang="pt-BR" href="..." />
<link rel="alternate" hreflang="es" href="..." />
<link rel="alternate" hreflang="en" href="..." />
<script src="acceptedlanguages.js"></script>
<script src="acceptedlanguagesui.js"></script>
<script type="text/javascript">
window.onload = function() {
acceptedlanguagesui.init();
};
</script>
</head>
<body>
</body>
</html>
If the visitor is viewing the en
version of the page, and the browser is configured with the languages pt, zh-Hans, en-US
, they will be offered to switch to pt-BR
.
Include the library and then use as a dependency:
define(['acceptedlanguagesui'], function(acceptedLanguagesUI) {
acceptedlanguagesui.display();
});
All browsers supporting ECMAScript 5: Chrome, Safari, Firefox, IE9, etc. If you need to support older browsers use es5-shims to get the following:
Array.forEach
Array.filter
Array.map