Table of Contents

Widget/Bubble Customizations with Javascript and CSS

Abby Updated by Abby

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

These 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>

Change the image and color in the bubble
  1. Go to Design
  2. Select Header & Launcher
  3. Scroll down and switch on "Customize the bubble launcher icon"
  4. Here you will find two options:
    BUBBLE + ICON
    ICON (only)
  5. Once the type is selected press the bin icon to delete the current icon
  6. Now you will be able to upload the icon that you want and test how it looks:
  7. You also can change the color of the bubble
  8. As soon as is changes are saved, and the bot is saved, you will see the changes in your embedded Landbot as soon as you refresh your page
Change the position of the Bubble to the left bottom corner

Add this code to your website, directly below where the bot is embedded:

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

And this other snippet goes in the Add CSS section of the bot:

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):

Raise the Launcher by 14px:

.LivechatLauncher{

bottom: 14px!important;

}

How did we do?

How to hide elements in the Bot design

Contact