A component for changing the language of the current page.
mzp-c-cta-link
is optional, and should be used only if a website has a page dedicated to language selection. If omitted, the form <label>
will be displayed visually insteadmzp-t-dark
can be applied for use on dark backgrounds.
<form class="mzp-c-language-switcher" method="get" action="#">
<label for="mzp-c-language-switcher-select">Language</label>
<select name="language" id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select">
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="hi-IN">हिन्दी (भारत)</option>
<option value="ja">日本語</option>
</select>
<!-- form submit button is shown when JavaScript is not enabled -->
<button type="submit">Go</button>
</form>
<script src="../../protocol/js/protocol-lang-switcher.js">
</script>
<script>
(function() {
'use strict';
// a custom callback can be passed to the lang switcher for analytics purposes.
Mzp.LangSwitcher.init(function(previousLanguage,
newLanguage) {
console.log('Previous language: ',
previousLanguage);
console.log('New language: ', newLanguage);
})
})();
</script>