Translate Axeptio cookie banner by language

You use Axeptio to manage your website cookies, you have a website in several languages and you want the axeptio banner to be translated for each language? Don't worry, Digidop comes to your rescue.

In our tutorial we will show you how to translate the Axeptio cookie banner in any language without using Weglot.

Step 1: Axeptio configuration

The first step of this tutorial will be to log in to your Axeptio account. Once logged in to this tool, you will then go to your project and click on "Cookie Management".

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

In this step, you will have 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 3 configurations (one in FR, one in EN and one in DE). For each configuration, you will be able to translate the texts present on the cookie banner. We recommend that you use DeepL for the translation, if you are not completely familiar with one of the languages.

It is important to name your settings correctly, as this will help you later on.

Step 2: Publication & Integration

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

Learn how to integrate Google Tag Manager on Webflow!

There are two ways to get the right cookie banner (the right setting) on your website depending on the language. It will mainly depend on whether your site is a subdirectory or a subdomain.

2.1 Via Axeptio if subdirectory

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

This can be done using Regex. To do this, for each configuration, the following scheme must be repeated:

• Open your configuration
• Click on "Integrate on your site" or "Integrate cookies on your site".
• In the section "Load this version on the following pages", click on "Add a page".
• Define a Regex after your domain name (For example, for the German version, we would insert: de.*, for the French version: fr.*, etc.).
• Click on "RegExp".
• Click on "Save and close".
• Publish the configuration

2.2 Via Custom Code if subdomain

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

You will need to copy and paste the code below into your site's Footer Code, modifying the parameters according to your configuration. If you already had an Axpetio code, delete it and replace it with the new one.

In the code, you will have to modify the clientID, the lang attribute according to your configuration and the configuration name for each language. Here is a list of the different HTML Lang attributes. Then, you just have 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>

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