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>


How did we do?