"Smart" Proactive (v3)

If we want to welcome a visitor using the proactive message on it's second visit and offer a different experience (different flow) than the first visit, we can create a "smart" proactive message.

How to experience a "Smart" Proactive Message:
  1. Click on Proactive Message, on the bottom right of this page:

  1. Follow the bot, adding your name, until it reaches a message that says Hi "name".

  1. Copy url from browser, close tab

  1. Open new tab in same browser and paste url

  1. Check how Proactive Message now has the name

  1. Click on Proactive Message and check how, the welcome message has name too

  1. Continue, and check how the flow is different than the first time

Note: This works functionality, as long as the visitor uses the same browser and doesn't clear browser storage. Also it will create a new chat/conversation so the user in the second visit will be a new one and the data won't be related with the first visit.
How to build a "Smart" Proactive Message:
  1. Set up the following flow in the builder:

  1. The Conditional block set up:

  1. First visit will be from the TRUE arrow exiting the Conditional block, here we will ask for the name:

  1. At the "end" of the first visit flow will be as below:

With the following code in the text area:

Landbot.send('proactiveName','¿·@name·?')

  1. For the first message exiting the FALSE condition from the conditional logic flow, will be:

  1. In the Design / Advanced / Add JS section:

<script>
function proactiveName(name){
localStorage.setItem('proactivename', name)
}
</script>

  1. Now we need to set up the Hidden Fields (Power-ups / Global Configs) to get the variable name in the Welcome Message:

  1. And we set up the Welcome Message like this:

  1. Now, in the Settings / General section we set up the Second Visit to : Always start a new conversation

  1. Finally we will embed the code below in our page (container):
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script> 
<script>
var name;
var myLandbotLivechat;
var myLandbot;

window.onload = function (){
name = localStorage.getItem('proactivename')
myLandbotLivechat = new LandbotLivechat({
container: '#proactiveNameChat',
index: `https://landbot.io/u/H-123750-FSC8FXAV8ODS7TKZ/index.html?name=${name}` //A => EDIT THE ID OF FOR THE ONE OF YOUR BOT
});

myLandbot = new LandbotAP('proactiveNameChat');
myLandbotLivechat.on('proactiveName', (name) => {
localStorage.setItem('proactivename', name)
})
// Show a proactive message on landbot load
myLandbotLivechat.on('landbot-load', () => {
if (name === "null"){
myLandbotLivechat.sendProactive('How can I help you?'); //B => EDIT THE TEXT FOR THE FIRST PROACTIVE MESSAGE
} else {
myLandbotLivechat.sendProactive(`How can I help you today ${name}?`); //C => EDIT THE THE TEXT FOR THE SECOND PROACTIV MESSAGE
}
})
}
// ualee_073 //
</script>
  • A=> Please change the ID (H-123750-FSC8FXAV8ODS7TKZ ) for the one of your bot, you will find it in the url of the share bot

  • B => Edit the text (How can I help you?), only between the ' '
  • C=> Edit the text (How can I help you today ), only between the ' and the $ sign

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.


How did we do?