Translate cookies banner Axeptio according to language

You are using Axeptio to manage the cookies on your site, you have a multilingual website, and you want the Axeptio banner to be translated for each language? Worry no more, Digidop is here to help you.

In our tutorial, we will show you how to translate the Axeptio cookie banner regardless of the language used and without going through Weglot.

Step 1: Axeptio Configuration

The first step of this tutorial consists of logging into your Axeptio account. Once logged into this tool, you will navigate to your project and then click on “Cookie Management.”

From there, you will see all the existing configurations. Logically, there should only be one (the one present on your site).

At this stage, you need to create as many configurations as there are languages on your website. If your site has a French, English, and German version, you will need to have 3 configurations (one in FR, one in EN, and one in DE). For each configuration, you will be able to translate the text present on the cookie banner. We recommend using DeepL for translation if you are not fully proficient in any of the languages.

It is essential to name your configurations accurately, as this will help you later on.

Step 2: Publication & Integration

Once your configurations are set, you can publish your project on Axeptio. We will now move on to the integration part of your website.

Learn how to integrate Google Tag Manager on Webflow!

There are two methods to display the correct cookie banner (the appropriate configuration) on your website according to the language. This mainly depends on whether your site is using subdirectories or subdomains.

2.1 Using Axeptio if Subdirectory

If your website is translated into multiple languages and uses subdirectories, you will be able to integrate the changes directly from Axeptio.

You can achieve this using Regex. To do this, for each configuration, you need to follow this pattern:

• Open your configuration
• Click on “Integrate on your site” or “Cookie Integration on your site”
• In the section “Load this version on the following pages,” click “Add a page”
• Define a Regex after your domain name (For example, for the German version, you would insert: de.*, for the French version: fr.*, and so on.)
• Click on “RegExp”
• Click on “Save and Close”
• Publish the configuration

2.2 Using Custom Code if Subdomain

If you are using Weglot to translate your site into multiple languages, you may have enabled subdomains. If so, you will need to follow this method.

You will need to copy and paste the code below into the Footer Code of your site, modifying the parameters according to your configuration. If you already had Axeptio code, please remove it and replace it with the new one.

In the code, you will need to change the clientID, the lang attribute according to your configuration, and the name of the configuration for each language. Here is a list of the different HTML Lang attributes. After that, you just need to publish your site.

<script>
// Modifier la valeur 000000000000000 par votre id
window.axeptioSettings = {  clientId: '000000000000000',};

if (document.documentElement.lang === 'fr') {
  window.axeptioSettings.cookiesVersion = 'Nom de la config FR';
}

if (document.documentElement.lang === 'en') {
  window.axeptioSettings.cookiesVersion = 'Nom de la config EN';
}

if (document.documentElement.lang === 'de') {
  window.axeptioSettings.cookiesVersion = 'Nom de la config DE';
}

(function(d, s) { 
  var t = d.getElementsByTagName(s)[0],
  e = d.createElement(s); 
  e.async = true; e.src = "//static.axept.io/sdk.js"; 
  t.parentNode.insertBefore(e, t);
})
(document, "script");
</script>

Your configuration is now complete, and your cookie banner is translated according to the language of your website. Additionally, you are compliant with GDPR, and your users' data are protected. If you need assistance with the configuration, you can contact our no-code agency. Otherwise, you can find the native alternative to Axeptio in Webflow.