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

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 (if you already have a stylesheet you might need to change it to styleSheets[1]):

<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 (if you already have a stylesheet linked to your page you might need to change it to styleSheets[1]):

<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(if you already have a stylesheet you might need to change it to styleSheets[1]):

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

}

Widget Animations
Make widget larger on hover

To make the widget larger on hover we'll add the following to the CSS of our bot:

.LivechatLauncher:hover { transform: scale(1.2);}

Widget bounce on hover

We'll add the following to the CSS of our bot

@keyframes bounce {

0%, 100%, 20%, 50%, 80% {

-webkit-transform: translateY(0);

-ms-transform: translateY(0);

transform: translateY(0)

}

40% {

-webkit-transform: translateY(-30px);

-ms-transform: translateY(-30px);

transform: translateY(-30px)

}

60% {

-webkit-transform: translateY(-15px);

-ms-transform: translateY(-15px);

transform: translateY(-15px)

}

}

.LivechatLauncher {

-webkit-animation-duration: 1s;

animation-duration: 1s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

-webkit-animation-timing-function: ease-in-out;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

-webkit-animation-iteration-count: infinite;

}

.LivechatLauncher:hover {

cursor: pointer;

animation-name: bounce;

-moz-animation-name: bounce;

}

How did we do?

HTML Template for Emails

Detect if a visitor is on Mobile/Tablet or Desktop

Contact