OLD BUILDER - Customise Design Widget bubble (Livechat / Pop up Embed)

This article corresponds to the V2 (Classic) of the app. You can check the equivalent for the new version V3 (Bricks) here

The little bubble (aka widget or launcher) that is displayed, in the bottom corner sometimes we need to change it to fit to the desing of our site. Here are some changes we can do to the the widget (edit the launcherOptions):

Before edit:

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

For all the below customizations 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 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?


Powered by HelpDocs

Powered by HelpDocs