Table of Contents

Launching a bot depending on browser language

We know how important it is to provide personalized customer service, which is why we have created this workaround to display a bot based on the language of the user's browser.

You need to create a bot for each language because the bot will not translate the language bot proactively.

In this case, we will show an example with two different languages, including a Proactive Message on each one. Let's start:

Create the bots

First, create bots in different languages to show the bot according to the user's language browser.

English bot

Builder:

Proactive Message:

French bot:

Builder:

Proactive Message:

Adding the snippet

This is the code that you will have to paste on your website:

<script>
        var lang = navigator.language;
                var myLandbot;
                window.addEventListener('mouseover', initLandbot, { once: true });
                window.addEventListener('touchstart', initLandbot, { once: true });
                function initLandbot() {
                if (lang.includes("en")) {
                    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
                s.addEventListener('load', function () {
                myLandbot = new Landbot.Livechat({
                configUrl: 'https://chats.landbot.io/v3/H-982474-O5M2P871ASHL53S2/index.json',
                });
                });
                s.src = 'https://cdn.landbot.io/landbot-3/landbot-3.0.0.js';
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
                }
                else if (lang.includes("fr")) {
                console.log("will de displayed")
                var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
                s.addEventListener('load', function () {
                myLandbot = new Landbot.Livechat({
                configUrl: 'https://chats.landbot.io/v3/H-982480-M1TXF1H5F0Z1FXU8/index.json',
                });
                });
                s.src = 'https://cdn.landbot.io/landbot-3/landbot-3.0.0.js';
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
                }
                }
                </script>

Editing the snippet

The things that we must change in our snippet will be: the languages and the configUrl of each bot.
  1. In the first part of the snippet we have a variable var lang = navigator.language which stores the language of the user's browser:
  1. Then we have a condition that checks the language stored in our variable, in this case there may be two options en (English) or fr (French).
You can change the commands of the conditions "en" or "fr" depending on the language abbreviations. You can find a list of more languages by clicking here.
  1. Then you have to change the configUrL for the one that you have in the Share Section of your bot:

Code:

Landbot:

  1. Finally, If one of the conditions is met, the corresponding bot will be loaded and the other will be ignored.

English language browser:

French language browser:

How did we do?

Open / Close a Web bot (embedded)

How to pass WordPress logged in user data to Landbot

Contact