Customized Behavior in Mobile Browsers

Pau Sanchez Updated by Pau Sanchez

Load different bot for mobile browsers

In some cases due to UE or content we may want to load a different bot if the user is on a mobile device

In order to do this we will need to add a script to our webpage, where the bot is embedded and change the url dynamically

Here's the script we will add above the Landbot embed script

    <script>
    let config;
    const deviceType = () => {
    const ua = navigator.userAgent;
    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) { 
    console.log("tablet");
    config = 'https://storage.googleapis.com/chats.landbot.io/v3/H-1050357-O3B9L8WXCQC1H5SS/index.json'; 
      return config;
    } 
    else if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
    console.log("mobile"); 
    config = 'https://storage.googleapis.com/chats.landbot.io/v3/H-1050357-O3B9L8WXCQC1H5SS/index.json'; 
      return config;
    } 
    else { 
    console.log("desktop");
    config = 'https://storage.googleapis.com/chats.landbot.io/v3/H-1072287-Z7WUW78TT9POJWF0/index.json'; 
    return config;
    }
    }
    ;
     console.log(deviceType());
  </script>

In the first part we will add the config url we want to use for tablets (this can be the same as mobile)

You'll find the configUrl in your embed script:

Next we'll add the configUrl for mobile:

Finally, we'll add the configUrl for desktop:

The last part is to add the embed script below this script:

  <script SameSite="None; Secure" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>
  <script>
    var myLandbot = new Landbot.Livechat({
      configUrl: config,
    });
  </script>

In the embed script we need to remove the configUrl and replace it with the variable config that we previously set

Prevent script from loading in mobile browsers

Due to design or speed, we might want to avoid Landbot being displayed and loaded in Mobile devices, here is a sample code to do that:

<script>
        document.addEventListener('DOMContentLoaded', function() {
            let checkMobile = (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(navigator.userAgent)) ? true : addLandbot();        });        function addLandbot(){
            var scriptstatic = document.createElement("script");
                scriptstatic.src = "https://static.landbot.io/landbot-3/landbot-3.0.0.js";
                  scriptstatic.onload = function() {
                  var script = document.createElement("script");
                  script.type = "text/javascript";
                  var code = document.createTextNode(`
                  var myLandbot = new Landbot.Livechat({
                    configUrl: 'https://chats.landbot.io/v3/H-1234-XXXXXX/index.json',
                    });
                    `);
                    script.appendChild(code)
                document.body.appendChild(script)
                }
            document.body.appendChild(scriptstatic)
        }    </script>

Just change the url of the "configUrl" for the one assigned to your bot:

configUrl: 'https://chats.landbot.io/v3/H-1234-XXXXXX/index.json',

Change only this part H-1234-XXXXX , you will find your in the Share Section:

How did we do?

Detect if bot was opened

Load script and display bot on click button

Contact