OLD BUILDER - Edit & Design the Proactive Message (Livechat Embed)

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

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

Change Proactive Title Text:

If there is no header set up for the bot, by default the proactive will display "landbot"

To customise the title of the proactive message, just go to the Design / Logo & Avatar section and edit the Header logo text

Change Proactive Message Text

Go to the Share / Embed Into your Website / 2. Do you want to show a proactive message?

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

And change the code that you pasted in the container site, with the new one:

Change Proactive Delay

Go to the Share / Embed Into your Website / 2. Do you want to show a proactive message?

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

And change the code that you pasted in the container site, with the new one:

Change Proactive Avatar

By default Landbot will use the Avatar that is in set up in the Design / 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

For better results please use square 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
myLandbotLivechat.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"
// ualee_025 //
});
</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})`
myLandbotLivechat.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

// ualee_076 // });
</script>

Hide Title Proactive Message

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

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


How did we do?


Powered by HelpDocs

Powered by HelpDocs