Table of Contents

Customizing the Proactive Message copy

Anna P Updated by Anna P

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 πŸš€

Note: Keep in mind that the proactive message is only available for the live chat & pop up embedding modesπŸ‘†πŸ»and the changes won't be displayed in the Preview mode in the share section, only once is embedded πŸ€“

For Landbot (Web) πŸš€

Proactive Message Text πŸ’¬

To add a proactive message to your bot or edit it:

1. just go to the Share section > Embed Into your Website

2. Enable the option "Do you want to show a Proactive message".

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

Message

You can add the text in the Proactive message:

And this is how it will look on the website:

Please keep in mind that the Proactive message will be shown only once unless you have your bot set to the "always start a new conversation" mode in the Second Visit Settings.

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 Β the <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?

Contact