Conditional Welcome (Non-embedded bots)

Abby Updated by Abby

There are several instances where we may need a dynamic bot with different flow options.

In this example, we'll create two different flows for our user, depending on an external parameter, in this case, a parameter in the URL that determines whether they're a new user, or a returning user.

For this workaround, we'll add a Javascript function to the bot which directs the user to the flow we specify using Global Keywords

The four main elements we will use are: CSS, Javascript, Global keywords, and the url parameters

Builder

Here's what the builder looks like:

Starting with the welcome message, it's important to select the same button as in the example, that way we don't need to modify the CSS

The Global keywords will need to match the params from the url as well as from the Javascript

If your url is this for example: https://landbot.pro/v3/H-XXXXXX/index.html?param=test then the Global Keyword would be test, we would also change this in the JS (more on that later)

As soon as the bot loads, the user will be directed through one of the Global Keyword paths, depending on the parameter in the url

CSS

We'll now add the following CSS to our bot in the Design/Custom code/CSS section

[data-block="welcome_0"] .MessageBubble{
display:none!important
}
[data-block="welcome_0"] .input-buttons{
display:none!important
}
[data-block="welcome_0"] .Avatar{
display:none!important
}

It should look like this:

Javascript

For the final part, we'll add the following Javascript in the Design/Custom code/Add JS section

Here you'll change flow_1 and flow_2 to the names of your parameters

<script>
if (window.location.search != null){
  
  if(window.location.search.includes("flow_1")) {
    
    console.log("FLOW 1 option")
    
   this.core.sendMessage({type: 'hidden',payload: "flow_1" })
  } else {
   	if(window.location.search.includes("flow_2")) {
     console.log("FLOW 2 option")
    this.core.sendMessage({type: 'hidden',payload: "flow_2" })
  } else {
 
console.log("default option")
   this.core.sendMessage({type: 'hidden',payload: "default" })
  }
  }
}
  else{
  	console.log("default option")
   this.core.sendMessage({type: 'hidden',payload: "default" })
  }
</script>

How did we do?

How to Detect Visitors Browser

Conditional Welcome: Direct the Flow of Your Bot Based on External Parameters

Contact