Table of Contents

How to launch a Landbot by clicking a button

Ana Updated by Ana

LiveChat or Pop up

Below you can find the code you need to trigger and open your landbot, embedded as a LiveChat or Pop up mode, by clicking a button.

<html>
  <body>
    <div id="wrapper">
      <button class="openbot">Open Bot</button> 
    </div> 
    <script SameSite="None; Secure" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>
    <script>
      var myLandbotpop = new Landbot.Popup({
      configUrl: 'https://chats.landbot.io/v3/H-642181-Q42D49PVMDCXYYL8/index.json'
    });
      var buttonOpen = document.getElementsByClassName("openbot")[0];
      buttonOpen.addEventListener('click', (event) => {
        event.preventDefault();
        myLandbotpop.open()
      });
    </script>
  </body>
</html>

To hide the widget, you must add the code below in the Design > Custom Code > Add CSS section of your bot:

.LivechatLauncher{
  display: none
}

Container

Below you can find the code you need to trigger and open a Container bot, by clicking a button.

<head>
  <title>Landbot Container on Click</title>
</head>
<body>
  <button id="openbot">Open Bot</button>
  <div id="wrapper">
    <div id="myLandbot" style="width: 90%; height: 400px; display: none;"></div>
  </div>
  <script SameSite="None; Secure" type="module" src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.mjs"></script>
  <script type="module">
    let botLoaded = false;
    let myLandbot;
    document.getElementById("openbot").addEventListener("click", () => {
      if (!botLoaded) {
        myLandbot = new Landbot.Container({
          container: '#myLandbot',
          configUrl: 'https://chats.landbot.io/v3/H-642181-Q42D49PVMDCXYYL8/index.json',
        });
        botLoaded = true;
        document.getElementById("myLandbot").style.display = "block";
      }
    });
  </script>
</body>

Live example

Was this article helpful?

Set the flow depending on the url path (for embedded landbots)

Open LiveChat bot as soon as page loads

Contact