Table of Contents

How to Detect Visitors Browser

There is certain information that we can obtain from our clients so that we can better understand them. In this case, we will show how to know which browser they are using. For this we will use the following function:

        let browser;
        
        function detectBrowser() {
            if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
                return 'Opera';
            } else if (navigator.userAgent.indexOf("Chrome") != -1) {
                return 'Chrome';
            } else if (navigator.userAgent.indexOf("Safari") != -1) {
                return 'Safari';
            } else if (navigator.userAgent.indexOf("Firefox") != -1) {
                return 'Firefox';
            } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
                return 'IE';
            } else {
                return 'Unknown';
            }
        }

        browser = detectBrowser();

The result of this function is stored in the "browser" variable that we will then pass to your bot.

Embedded on a page.

We will use the method we have to communicate our page with the bot.

When we paste our bot on the web page we must make sure to use our URL. 

    <div id="myLandbot" style="width: 100%; height: 600px"></div>

    <script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-3.0.0.js"></script>

    <script>

        let browser;

        function detectBrowser() {
            if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
                return 'Opera';
            } else if (navigator.userAgent.indexOf("Chrome") != -1) {
                return 'Chrome';
            } else if (navigator.userAgent.indexOf("Safari") != -1) {
                return 'Safari';
            } else if (navigator.userAgent.indexOf("Firefox") != -1) {
                return 'Firefox';
            } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
                return 'IE';
            } else {
                return 'Unknown';
            }
        }

        browser = detectBrowser();

        var myLandbot = new Landbot.Container({
            container: '#myLandbot',
            configUrl: 'https://chats.landbot.io/v3/MAKE_SURE_TO_USE_YOUR_URL/index.json',
            customData: {
                browser: browser,
            },

        });
    </script>

Here we use customData to send the variable to the bot.

Then we print the variable using @browser inside our bot.

Inside the Bot

In the design section, we paste the function that will be executed once the bot loads.

    <script>
        let browser;

        var landbotScope = this;
        this.onLoad(function () {
            if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
                browser = 'Opera';
                landbotScope.setCustomData({ browser: browser })
                return;
            } else if (navigator.userAgent.indexOf("Chrome") != -1) {
                browser = 'Chrome';
                landbotScope.setCustomData({ browser: browser })
                return;
            } else if (navigator.userAgent.indexOf("Safari") != -1) {
                browser = 'Safari';
                landbotScope.setCustomData({ browser: browser })
                return;
            } else if (navigator.userAgent.indexOf("Firefox") != -1) {
                browser = 'Firefox';
                landbotScope.setCustomData({ browser: browser })

                return;
            } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
                browser = 'IE';
                landbotScope.setCustomData({ browser: browser })

                return;
            } else {
                browser = 'Unknown';
                landbotScope.setCustomData({ browser: browser })

                return;
            }
        })

    </script>

How did we do?

How to redirect user to another url in your site with Livechat open to continue conversation

Customize and embed your WhatsApp Widget

Contact