<div id="wrapper">
    <button class="openbot">Open Bot</button> 
  </div>
  
<script type ="text/javascript" src="https://static.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>
/*
To hide the Widget add the following:

.LivechatLauncher{
  display: none
}

Inside the Design / Custom Code / Add CSS section of the bot

*/


.openbot{
  color: #ffffff!important;
  border-width: 0px!important;
  border-radius: 0px;
  letter-spacing: 2px;
  font-size: 14px;
  font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
  font-weight: 600!important;
  text-transform: uppercase!important;
  background-color: #00bfb3;
  padding-top: 12px!important;
  padding-right: 28px!important;
  padding-bottom: 12px!important;
  padding-left: 28px!important;
}

#wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.