Table of Contents

Customizing the Proactive Message

Sofia Teran Updated by Sofia Teran

With the Proactive message functionality, you will be able to capture the attention of the users and get them to click on the widget easily. Here we will show how to design each part of this functionality ๐Ÿš€

Keep in mind that this will apply only to the live chat & pop up embedding mode ๐Ÿ‘†๐Ÿปand the changes won't be displayed in the Preview mode in the share section, only once is embedded ๐Ÿค“

In Landbot v3 ๐Ÿš€

Change Proactive Message Text ๐Ÿ’ฌ

Just go to the Share section > Embed Into your Website

  • If you want to show a proactive message:

In the text area below Message add the text you want to display:

Note: The code that you will copy in ย <body> section of your website will remain the same even if you change the Message

Change Proactive Delay โฑ

Go to the Share > Embed Into your Website

  • If you want to show a proactive message:

In the text area below How many seconds have to pass since the Livechat has been loaded until the welcome message is sent add as many seconds as you want to delay between the site is fully loaded and the proactive message is displayed:

Note: The code that you will copy in ย <body> section of your website will remain the same even if you change the Proactive delay

Change Proactive Avatar ๐Ÿค–

You can find it in the Design section > Logo & Avatar > Logo Image:

Note: By default, Landbot will use the Landbot Avatar that is in setting up even if you delete it.

Customize de Bubble + icon/Icon ๐Ÿ–

To customize the Bubble color and the Icon that will appear on your page go to Design > Icons & Logo > Customize the bubble launcher icon

Note: You can find further information about Customizing the bubble/widget by clicking on this Article ๐Ÿ”—

In Landbot v2 ๐Ÿš€

Change Proactive Title Text โœ๐Ÿป

If there's no header set up for the bot in the Design > Logo & Avatar section, the text displayed will be "Landbot" which is set by default:

If you want to customize the title of the proactive message, just go to the Design > Logo & Avatar section and edit the Header logo text:

Change Proactive Message Text ๐Ÿ’ฌ

Just go to the Share section > Embed Into your Website

  • If you want to show a proactive message:

1. In the text area below Message Text, add the text you want to display:

2. Change the code that you pasted in the container site, with the new one:

The changes won't be displayed in the Preview mode in the share section, only once is embedded ๐Ÿค“

Change Proactive Delay โฑ

Go to the Share > Embed Into your Website

  • If you want to show a proactive message:
  1. In the text area below Message delay add as many seconds as you want to delay between the site is fully loaded and the proactive message is displayed:
  1. Change the code that you pasted in the container site, with the new one:

Change Proactive Avatar ๐Ÿค–

Note: By default, Landbot will use the Avatar that is in setting up in the Design section > Logo & Avatar > Header logo section, even if you delete it.

  • To use another avatar add a new one from your computer, by selecting Upload Image:
Tip: For better results please use squared pictures ๐Ÿค“

Hide Proactive Avatar ๐Ÿ™ˆ

If you want to display only the Title and the Text and hide the Avatar add the following code, right below the other code pasted in the container site:

<script> 
// Hide Avatar in Proactive Message
myLandbot.on('landbot-load', () => {
window.document.getElementsByClassName("LandbotProactive__frame__content")[0].contentDocument.body.childNodes[0].childNodes[0].childNodes[3].childNodes[1].childNodes[0].childNodes[0].childNodes[0].style.display = "none" });
</script>

Custom Proactive Avatar (different than Header Picture) ๐Ÿ–ผ

If you want to display a different picture than the one used in the header by default, add this code. Please just change the URL (in the example code is https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg) for the URL of your picture. Bear in mind that it has to be squared, and as light as possible.

<script> 
// Custom Avatar in Proactive Message (Different than Header Pic)
//TODO=> CHANGE URL FOR CUSTOM URL PICTURE//
var urlCustomAvatar = "https://upload.wikimedia.org/wikipedia/commons/6/6e/Mona_Lisa_bw_square.jpeg";

//DO NOT EDIT BELOW THIS LINE//
var holderUrl = `url(${urlCustomAvatar})`
myLandbot.on('landbot-load', () => { window.document.getElementsByClassName("LandbotProactive__frame__content")[0].contentDocument.body.childNodes[0].childNodes[0].childNodes[3].childNodes[1].childNodes[0].childNodes[0].childNodes[0].style.backgroundImage = holderUrl});
</script>

Hide Title Proactive Message ๐Ÿงพ

To hide the title of the proactive, just add the following code:

<script> 
// Hide Title Proactive
myLandbot.on('landbot-load', () => {
var frameBody = window.document.getElementsByClassName("LandbotProactive__frame__content")[0].contentDocument.body;
frameBody.querySelector(".hu-message-author").style.display = "none" });
</script>

How did we do?

Customizing the bubble/widget (Livechat & Popup)

Open LiveChat bot as soon as page loads (3 ways)

Contact