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

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?

Modifying Embed Size

How to launch a Landbot by clicking a button

Contact