Table of Contents

Load script and display bot on click button

Load on-click

Below is the sample code that will load the bot script as soon as the user clicks the button, and it can be used to re-open it.

<!DOCTYPE html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

    <button type="button" onclick="openLandbot()">OPEN BOT</button>

    <script>

        //To check if snippet has already been added to the DOM
        var scriptUploaded = false;
        var myLandbot;
        //Check and ADD main script or open the bot

        function openLandbot() {

            if (scriptUploaded) {

                myLandbot.open()

            }

            else {

                var script = document.createElement("script");
                script.type = "text/javascript";
                script.setAttribute("SameSite", "None; Secure");
                script.onload = triggerLandbot()
                script.src = "https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"; document.head.appendChild(script);

            }
        }

        //Once the main script has been loaded, create new object and open pop up 

        function triggerLandbot() {

            setTimeout(function () {
                var script = document.createElement("script");

//Please change the path to the one on you share section.

                script.innerHTML = `myLandbot = new Landbot.Popup({
configUrl: 'https://chats.landbot.io/v3/XXXXXXXXXXXXXXXXX/index.json',});`;
                document.body.appendChild(script);
                scriptUploaded = true;
                myLandbot.onLoad(function () {
                    myLandbot.open()
                })
            }, 3000)

        }

    </script>

</body>

</html>

Demo

See the Pen Load and Pop up on click button (Landbot) by Luis (@LTlandbot) on CodePen.

Hidden Widget Bubble

If you want to hide the widget bubble please add the following code where the bot is embedded:

Add the following code in the Custom Code / Add CSS section:

.LivechatLauncher { display: none !important}

How did we do?

Customized Behavior in Mobile Browsers

Launch Bot On Exit Intent

Contact