How to launch a Landbot by clicking a button copy

Pau Sanchez Updated by Pau Sanchez

Here 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.

In Landbot 3
<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 / Advanced / Add CSS section:


 .LivechatLauncher{
  display: none
}

In Landbot 2
<html> 
    <body>
        <button onclick="myLandbot.open()">Open bot</button> 
        <script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js">
        </script>
        <script> 
            var myLandbot = new LandbotLivechat({ 
            index: 'your bot url' 
                }); 
        </script> 
    </body>
</html>

Below is an example of how to do it:

See the Pen Landbot Auto Open on load & button to reopen by Pau (@landbot_help) on CodePen.

How did we do?

Contact