How to add multi-language support to a captive portal?

How to add multi-language support to a captive portal?

In order to allow for dynamic multi-language support, you need two pieces of 1) HTML and 2) JavaScript code. The HTML code required is below and displays a select box for switching between languages.

<label for="language" id="chooseLanguage">Choose language:</label> <select id="language" name="language" onchange="switchLanguage();"><option selected="selected" value="en">ENGLISH</option><option value="ja">JAPANESE</option> </select>

Next, you need to define the JavaScript switchLanguage() function, add a new <script> tag just before the ending </body>.

<script>

function switchLanguage(){

let lang = document.getElementById('language').value

if(lang == 'ja'){
document.getElementById('welcome').textContent = 'センティエントへようこそ';
document.getElementById('chooseLanguage').textContent = '言語を選択'
return false

}

if(lang == 'en'){
document.getElementById('welcome').textContent = 'Welcome to our free WiFi';
document.getElementById('chooseLanguage').textContent = 'Choose language:'
return false
}

}

</script>

You can also add automatic browser language detection using the following code snippet.


window.onload = function(){
var language = window.navigator.userLanguage || window.navigator.language;
if(language == 'ja'){
document.getElementById('language').value = 'ja'
switchLanguage()
}
}

Don't forget that each <p> or <h1> tag with text in it needs an "id" attribute in order to replace the textContent of the tag using document.getElementById().

 

    • Related Articles

    • How to add multi-language support to a captive portal?

      In order to allow for dynamic multi-language support, you need two pieces of 1) HTML and 2) JavaScript code. The HTML code required is below and displays a select box for switching between languages. <label for="language" id="chooseLanguage">Choose ...

    • SonicWall Captive Portal

      This page explains the configuration of SonicWall devices to work with IronWiFi Captive Portal and Captive Portal Authentication. Log in to your SonicWall firewall and click Manage at the top. On the left menu, click on VPN > Base Setting and ensure ...

    • SonicWall Captive Portal

      This page explains the configuration of SonicWall devices to work with IronWiFi Captive Portal and Captive Portal Authentication. Log in to your SonicWall firewall and click Manage at the top. On the left menu, click on VPN > Base Setting and ensure ...

    • pfSense with Captive Portal

      This page explains different configuration scenarios for pfSense Firewall and authentication with IronWiFi. IronWiFi Console configuration Log in to the IronWiFi Console From the menu, go to Network -> Captive Portals -> New Captive Portal Fill in ...

    • Captive Portals

      Name – Give your Captive Portal a name Description – Provide a description to your Captive Portal Network – The network that this Captive Portal belongs to. These Network's RADIUS servers will authenticate any access requests processed by this ...