Customizing the widget/bubble

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>

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

.LandbotProactive {
left: 10px;
}

.LandbotFrame  {
left: 10px;
}

</style>


How did we do?