Follow

Creating Multilingual Custom Threat Response Pages

If your website serves a global audience and you are using Distil custom branded threat response pages, you can improve end user experience by showing each page in a user’s preferred language. Using a bit of javascript, you can easily and dynamically display Distil’s custom pages.

NOTES: The code examples included throughout this guide are meant to only provide guidance for developing custom pages. Distil provides no warranties for the code.

The methods used herein relies on a browser supporting the navigator.language property.

Creating Language-Specific Images

The first step is to create <div> containers with images appropriate to the language used by the client.

In the examples below, replace the blue text with base64 images or externally accessible resources that do not go through Distil. The images are statically set to not display by using the code, style="display: none;".

<div class="container"> 
      <div id="langBlock_en" style="display: none;">
          <img src="<base64 embedded or externally reachable image>" alt="Default Image" />
          <hr />
          <h1>Your request has been blocked for security reasons</h1>
          <p>Please fill out the recovery form to gain access again</p>
     </div>

English

<div id="langBlock_en-US" style="display: none;">
<img src="<base64 embedded or externally reachable image>" alt="English image" />
<hr />
<h1>Your request has been blocked for security reasons</h1>
<p>Please fill out the recovery form to gain access again</p>
</div>

German

<div id="langBlock_de" style="display: none;">
<img src="<base64 embedded or externally reachable image>" alt="German image" />
<hr />
<h1>Die Anfrage wurde zu Ihrem Schutz abgebrochen</h1>
<p>Bitte füllen Sie das Formular aus, um den Zugang wiederherzustellen</p>
</div>

French

<div id="langBlock_fr" style="display: none;">
<img src="<base64 embedded or externally reachable image>" alt="French image" />
<hr />
<h1>Votre demande a été bloquée pour des raisons de sécurité</h1>
<p>Merci de compléter notre formulaire de récupération pour accéder à nouveau</p>
</div>

Customizing the COMPLETE CAPTCHA Button

Next, you’ll customize the  COMPLETE CAPTCHA  button (shown above). It’s based on the JavaScript client language switch statement (based on the navigator.language output).

function distilChangeDisplayLanguage(distilUserLng){
switch (distilUserLng) {
case 'en' || 'en-US':
return "Complete Captcha in English";
break;
case 'de':
return "Complete Captcha in German";
break;
case 'fr':
return "Complete Captcha in French";
break;
default:
return "Default Complete Captcha";
}
}

Putting it All Together

Insert the following code within the above JavaScript to make the language-specific image and  COMPLETE CAPTCHA  button available.

    var distilLng = navigator.language || navigator.userLanguage || 'en';
document.getElementById('langBlock_' + distilLng).style.display = 'block';
    var distilDisplayCaptchaText = distilChangeDisplayLanguage(distilLng);
document.getElementById('dCF_input_complete').value = distilDisplayCaptchaText;
    function distilUpdateDisplayLanguage(distilUserLng) {
distilUpdatedCaptchaText = distilChangeDisplayLanguage(distilUserLng);
document.getElementById('langBlock_' + distilLng).style.display = 'none';
document.getElementById('langBlock_' + distilUserLng).style.display = 'block';
distilLng = distilUserLng;
document.getElementById('dCF_input_complete').value = distilUpdatedCaptchaText;
}

The code snippet below sets the distilLng variable using navigator.language as the primary mechanism.

     var distilLng = navigator.language || navigator.userLanguage || 'en';

The following code snippet displays the language-specific image.

     document.getElementById('langBlock_' + distilLng).style.display = 'block';

The next code snippet displays the language-specific COMPLETE CAPTCHA button.

     document.getElementById('dCF_input_complete').value = distilDisplayCaptchaText;

The distilUpdateDisplayLanguage function lets users manually change their language using an onclick event, such as the examples shown below.

     <button onclick="distilUpdateDisplayLanguage('en')">English</button>
     <button onclick="distilUpdateDisplayLanguage('de')">German</button>
     <button onclick="distilUpdateDisplayLanguage('fr')">French</button>
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments