Déployez un bot par langue de votre site internet

Déployez un bot par langue de votre site internet 💻

Si vous avez un site ou une application multilingue, nous vous recommandons de déployer un bot par langue, principalement car même si le périmètre de départ est similaire, rapidement chaque chatbot va évoluer différemment.

Pour cela, vous allez devoir charger le script du webchat en fonction de la langue de votre site.

Deux approches sont possibles selon les contraintes et le fonctionnement de votre site.

1/ La langue du site est présente dans l'url de vos pages, et la

Dans ce cas, il suffit de créer une condition en fonction de la langue courante et de charger l'identifiant du "bot" correspondant.

Par exemple :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Changer Tolk Bot en fonction de l'URL</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script> 
      // Bots list 
      var FRENCH_BOT_ID = "XXXXXXXXX";
      var ENGLISH_BOT_ID = "XXXXXXXXX"; 

      // Get locale by querystring 
      var url = window.location.search; 
      var queryString = new URLSearchParams(url); 
      var locale = queryString.get("language");

      // Bot configuration 
      switch (locale) { 
        case "fr": 
          tcfbot = FRENCH_BOT_ID; 
          break;
        case "en":
          tcfbot = ENGLISH_BOT_ID; 
          break; 
        default: 
          tcfbot = FRENCH_BOT_ID; 
          break; 
      } 
      var TcfWbchtParams = { behaviour: "default" }; 

      // Add bot on page load 
      var display = "iframe";
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "<https://script.tolk.ai/iframe-latest.js>";
      document.body.appendChild(script); 
    </script>
  </body>
</html>

2/ Le changement de langue doit se baser sur un évènement Javasc

Dans ce cas, il faut créer une fonction pour ajouter un bot, et une fonction pour le supprimer.

Puis déclencher ces fonctions lorsqu'un changement de langue est demandé par l'utilisateur.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Changer Tolk Bot dynamiquement</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <form>
      <label for="language-selector">Language:</label>
      <select id="language-selector">
        <option value="fr" default>French</option>
        <option value="en">English</option>
      </select>
    </form>

    <script>
    // Functions to add / remove bot iframe
    function addBot() {
      var display="iframe";
      var script=document.createElement("script");
      script.type="text/javascript";
      script.src="<https://script.tolk.ai/iframe-latest.js>";
      document.body.appendChild(script);
    }

    function removeBot() {
      var iframe=document.querySelector("#chatbot-insert");
      iframe.parentNode.removeChild(iframe);
      var script=document.querySelector( 'script[src="<https://script.tolk.ai/iframe-latest.js>"]' );
      script.parentNode.removeChild(script);
      var style=document.querySelector('#tolk-widget')
      style.parentNode.removeChild(style)
    }

    // Bots list
    var FRENCH_BOT_ID="XXXXXXXXX";
    var ENGLISH_BOT_ID="XXXXXXXXX";

    // Bot configuration
    var tcfbot=FRENCH_BOT_ID;
    var TcfWbchtParams= { behaviour: "default" };

    // Add bot on page
    load addBot();

    // Change bot on input change
    document
      .querySelector("#language-selector")
      .addEventListener("change", function (event) {
        var locale=event.target.value;
        switch (locale) {
          case"fr":
            tcfbot=FRENCH_BOT_ID;
            break;
          case"en":
            tcfbot=ENGLISH_BOT_ID;
            break;
        }
      removeBot();
      addBot();
    });
    </script>
  </body>
</html>