Table of Contents

Customizing the bubble/widget (Livechat & Popup)

Pau Sanchez Updated by Pau Sanchez

The little chat bubble (aka widget or launcher) that is displayed in the bottom corner sometimes needs some changes so it can fit better into the design of our site. Here are some changes we can do to the the widget (edit the launcher Options) 🔨

This modifications can be applied only when you use the Live chat or Pop up Embeds

Overview

By default, Landbot offers us the code you need to embed in your site:

For all the below customisations we will need to edit slightly the code, especially this bit:

Just need to copy the code offered, select pointer after the coma that is after your landbot URL ->

So there is one more line, where it says //REPLACE THIS LINE FOR CODE//, where you will paste the code:

<script>
  var myLandbotLivechat = new LandbotLivechat({
    index: 'https://landbot.io/u/{your landbot id url}/index.html',
     //REPLACE THIS LINE FOR CODE//
  });
</script>

In Landbot 3

Change the image and color in the bubble
  1. Go to Design
  2. Select Icons & Logo
  3. Scroll down and switch on "Customize the bubble launcher icon"
  4. Here you will find two options:

    BUBBLE + ICON
    ICON (only)

  1. Once the type is selected press the bin icon to delete the current icon

  1. Now you will be able to upload the icon that you want and test how it looks:
  2. You also can change the color of the bubble
  3. As soon as is changes are saved, and bot is saved, you will see the changes in your embedded Landbot as you refresh your page

Change the position of the Bubble to the left bottom corner

The code:

<script>
var siteScope = window;
  siteScope.document.styleSheets[0].insertRule('.LandbotLivechat { left: 0px !important}'); //You can add this css rule in your site
</script>

And add this other snippet in the Add CSS section:

Here is the code:

.Proactive__card-content{
margin-bottom: 5px;  

}
.LivechatLauncher{
left:0px
}

.LivechatProactive{
left:0px; !important;  
transform-origin: left bottom;
}

.Proactive__close__button {
    left: 10px !important;
}

Change the width of the Bubble

Add the following snippet in the JS section

Add the following code in the Add JS section:

<script>
	var siteScope = window;
  siteScope.document.styleSheets[0].insertRule('.LandbotLivechat { min-width: 200px !important}'); //You can add this css rule in your site
  
  var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    landbotScope.document.styleSheets[0].insertRule('.LivechatLauncher { width: 200px !important}'); //You can add this css rule in the Add CSS Section
  })
</script>

Hide the Bubble

Hide the Widget, useful if you are triggering Landbot with a button

You can do it in 2 different ways:

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

.LivechatLauncher { display: none !important}

2. And add this style in the page where the bot is embedded:

if is Livechat type of embed:

<style>
.LandbotLivechat{display: none}
.LandbotLivechat.is-open{display: block}
</style>

if is Pop Up type of embed:

<style>
.LandbotPopup{display: none}
.LandbotPopup.is-open{display: block}
</style>

2. or add the following in the Custom Code / Add JS section

<script>
	var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    landbotScope.document.styleSheets[0].insertRule('.LivechatLauncher { display: none !important}'); //You can add this css rule in the Add CSS Section
  })
</script>

Hide the Bubble in mobile only

In the example below we hide the Widget, useful if you are triggering Landbot with a button

<script>
	var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    landbotScope.document.styleSheets[0].insertRule('@media only screen and (max-device-width: 767.9px) {.LivechatLauncher{display:none}}'); //You can add this css rule in the Add CSS Section
  })
</script>

Add a Tooltip to the Widget (on hover)

Add the following code in the Add JS section:

<script>
  var siteScope = window;
  siteScope.document.styleSheets[0].insertRule('.LandbotLivechat { min-width: 300px !important}'); 
  
var landbotScope = this;
  this.onLoad(function() { 
    landbotScope.document.styleSheets[0].insertRule(`.LivechatLauncher:before { 
			content: "Chat with Landbot"; 
			position: absolute; 
			opacity: 0; 
			padding: 10px; 
			color: #333; 
			border-radius: 50px; 
		}`);   
    landbotScope.document.styleSheets[0].insertRule(`.LivechatLauncher:hover:before { 
        opacity: 1; 
        background: white; 
        border: 1px solid red; 
        margin-left: -175px; 
     }`);
  })
</script>

Add text to the Bubble

Add the following code in the Add JS section:

<script>
var siteScope = window;
  siteScope.document.styleSheets[0].insertRule('.LandbotLivechat { min-width: 200px !important}'); //You can add this css rule in your site
  
  var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    
    landbotScope.document.styleSheets[0].insertRule(`.LivechatLauncher { width: 200px !important}`); //You can add this css rule in the Add CSS Section
    landbotScope.document.styleSheets[0].insertRule(`.launcher__bubble .is-launcher__avatar img {
  																											display: inline;
}`); //You can add this css rule in the Add CSS Section
    landbotScope.document.styleSheets[0].insertRule(`.launcher__bubble .is-launcher__avatar:before {
  																											content: 'Chat with Landbot';
color: #000;
font-size: 0.7em;
  																											display: inline; 
  																											margin-right: 10px; 
  																											position: relative; 
  																											top: -12px;
}`); //You can add this css rule in the Add CSS Section
 
  })
</script>

Change the size of the Icon (without bubble)

In the example below we make the icon bigger

Add the following code in the Add CSS section:

.launcher__bubble .launcher__avatar , .launcher__bubble .launcher__avatar img {
    height: 90% !important;
    width: 85% !important;
}

.LivechatLauncher {
    padding: 0px !important;
}

Before (default size):

After (with CSS):

Change the background color of the Proactive messages

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { // This Css rule can only applied once Landbot script is loaded
    landbotScope.document.styleSheets[0].insertRule('.LivechatProactive .Message[data-type=text] .MessageBubble { background-color: red !important}');
  })
</script>

In this example we just simply change the color to "red", you can change it for any other color that you need:

Justify the proactive message to the right

Add the following code in the CSS section:

.Proactive__card-content{
margin-bottom: 5px;  
direction: rtl;
}

.Proactive__messages article {
direction: ltr
}

Hide the proactive message in mobile

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    if( window.innerWidth < 768 ){
      landbotScope.document.styleSheets[0].insertRule('.LivechatProactive { visibility: hidden !important}'); 
    }
    
  })
</script>

Hide the proactive in mobile and minimize size in desktop

Add the following code in the Add JS section:

<script>
var landbotScope = this;
  this.onLoad(function() { 
    let checkMobile = (/Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(navigator.userAgent)) ? 
           landbotScope.document.styleSheets[0].insertRule('.LivechatProactive { display: none !important}'):
           landbotScope.document.styleSheets[0].insertRule('.LivechatProactive{position: fixed;bottom: 90px;right: 10px;display: block;height: 100px;}')
   landbotScope.document.styleSheets[0].insertRule('.Proactive__card-content{margin-bottom: 5px;  direction: rtl;}')
    landbotScope.document.styleSheets[0].insertRule('.Proactive__messages article {direction: ltr}') })
  
</script>

Hide the proactive message after 15 seconds

Add the following code in the Add JS section:

<script>
var siteScope = window;
var landbotScope = this;
  this.onLoad(function() {
    var es= siteScope.document.getElementsByTagName("script")[0]
    var ns = siteScope.document.createElement("script");
    ns.text=`setTimeout(function(){myLandbot.hideProactive()},15000)`;
    es.parentNode.insertBefore(ns,es)
})
</script>

In Landbot 2

Change the image displayed in the Widget

For this case, we need the URL of the image we want to display in the Widget:

In this example we will use the following url: https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg

Then in the //REPLACE THIS LINE FOR CODE// we will be replaced for this code:

launcherOptions: { 
image: "https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg" 
}

We just edited the image line with a new url

So the final code will look like this:

<script>
  var myLandbotLivechat = new LandbotLivechat({
    index: 'https://landbot.io/u/{your landbot id url}/index.html',
     launcherOptions: { 
     image: "https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg" 
  }
  });
</script>

Change the color of the Widget

Color can be change easily like the image, you can use Hex Color Codes (to select the color use the google utility). For this example we want to use a blue (#0261f9), then we will change only the accent line. So our final code will look like this:

<script>
  var myLandbotLivechat = new LandbotLivechat({
    index: 'https://landbot.io/u/{your landbot id url}/index.html',
     accent: '#0261f9',
  });
</script>

Change the position of the Widget

The position of the Widget is not controlled by the Landbot embed script, but by the style of the site (container). If you change the position of the widget it doesn't mean that all the bot will move, to do so, please apply the changes to all the components (Widget, Proactive and Livechat). In the example below there is how to apply such changes to move the components to the left side of the screen

<style>

    .LandbotLivechat {
        left: 105px;
    }

    .LandbotPopup {
        left: 105px;
    }

    .LandbotProactive {
        left: 10px;
    }

    .LandbotFrame  {
        left: 10px;
    }

</style>

Change the Width of the Widget

In the example below we make the widget 150px wide

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>        
<script>            
   var customWidth = 'width: 150px;';            
   var customWidthRule = '.LandbotLauncherContent__bubble {' + customWidth + '}';                
   var myLandbot = new LandbotLivechat({                
      index: 'https://landbot.io/u/XXXXXXXXXXX/index.html',                
      launcherOptions: {                    
         style: customWidthRule                
      }            
   });        
</script>        
<style>                
   .LandbotLauncher { width: 170px; }        
</style>

Hide the Widget

In the example below we hide the Widget, useful if you are triggering Landbot with a button

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>        
<script>            
      var myLandbot = new LandbotPopup({                
      index: 'https://landbot.io/u/XXXXXXXXXXX/index.html',                
      launcherOptions: {                    
         enable: false                
      }            
   });        
</script>   

Widget only display custom picture

In the example below we only display a custom picture, while the widget is transparent

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>        
<script>            
      var shadow = 'box-shadow: none;' 
      var customStyle = '.LandbotLauncherContent__bubble {' + shadow + '}'; 
      var myLandbot = new LandbotLivechat({ 
        index: 'https://landbot.io/u/XXXXXXXXXXX/index.html', 
        accent: 'transparent', 
        launcherOptions: { 
            style: customStyle, 
image:"https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg" } });        
</script>   

Add a Tooltip to the Widget (on hover)

<style> 
    .LandbotLauncher:before { 
        content: "Chat with Landbot"; 
        position: absolute; 
        opacity: 0; 
        padding: 10px; 
        color: #333; 
        border-radius: 50px; 
    } 
    .LandbotLauncher:hover:before { 
        opacity: 1; 
        background: white; 
        border: 1px solid red; 
        margin-top: 20px; 
        margin-left: -130px; 
    } 
</style>
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>        
<script>            
        var myLandbot = new LandbotLivechat({ 
        index: 'https://landbot.io/u/XXXXXXXXXXX/index.html', 
        });        
</script>   

How did we do?

Contact