Table of Contents

Javascript in Landbot v2

Pau Sanchez Updated by Pau Sanchez

This is a legacy document. In case you are using Landbot v3, please check this article
Landbot variable => Javascript variable

Let's say you want to print on console a name that you asked in the bot, and also store it in a global scope variable for later use:

  1. We ask for the name:

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

Warning: the URL must be an HTTPS:// otherwise you will get an error that will not allow you to save changes.

Here we create a variable for the global scope (of the bot) called "globalVariable";

Then we create a function ("assignValue()") that will store data in the globalVariable;

And finally a function ("printGlobalVariable()") that will be used to print on console, when we call it in the flow, the value of the "globalVariable".

  1. First Code block:

Here we recall the assignValue function and add it as a parameter to a Landbot variable.

If you are working with STRINGS, it's important to notice that to use a Landbot variable should be called like this: "@{NAME OF THE VARIABLE}".

In case it's not a string you will called them like this: @NAME OF THE VARIABLE

  1. We trigger in the next code block the function

  1. The final flow:

Javascript variable => Landbot variable (Code > User Input > Variable Available) In Landbot 3

It is very important to understand that this step (Javascript to Landbot) it ALWAYS needs an input of the visitor, before the Javascript value is available in the Landbot variable.

STEPS:

1 Javascript variable value => 2 Landbot custom-data SDK => 3 USER INPUT (button, text...) => 4 Landbot variable Javascript value assigned & available to use

  1. We use the code block to set the value of a variable (in this example the Landbot variable is called "@var") :

this.setCustomData({ var: 3000 });

  1. We need to add an input for the user, to pass the complete the process before the value is available in Landbot scope

  1. And finally we set up a block, where we will display the new Landbot value

As an alternative to this approach you can do this: Use Google Cloud Functions to set directly new values to Landbot variables

Javascript variable => Landbot variable (Code > User Input > Variable Available) In Landbot 2

It is very important to understand that this step (Javascript to Landbot) it ALWAYS needs an input of the visitor, before the Javascript value is available in the Landbot variable.

STEPS:

1 Javascript variable value => 2 Landbot custom-data SDK => 3 USER INPUT (button, text...) => 4 Landbot variable Javascript value assigned & available to use

In this case we want to send a variable created in our global scope to be a Landbot Variable.

  1. We create a global variable in the Design / Advanced / Add Js section

  1. In the desired Code, where we want to trigger the transfer of the variables we add the following code,
Landbot.exec('landbot-custom-data',{lndbtvariable:globalVariable})

Being "landbot_variable" a new Landbot variable created already in the bot

  1. We need to add an input for the user, to pass the complete the process before the value is available in Landbot scope

  1. And finally we set up a block, where we will display the new Landbot value

As an alternative to this approach you can do this: Use Google Cloud Functions to set directly new values to Landbot variables

Javascript variable from parent site to Landbot on loading

In some cases, we might have a value in our parent site that we want to be available when the bot loads, to do that we are going to use our Hidden Fields functionality and customize our embed code:

  1. In the Bot builder, we will select Chatbot Settings:

  1. Select "Hidden Fields"

  1. Here we are going to set up the name of the variable (and the name of the param) we are going to store the value in Landbot. In this example we will get the variable "language"

  1. Now in the parent site we will adapt the embed code to add the value of the variable in the parent site as a param in the index url:
var languagevariable = "Spanish"
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<script>
  var myLandbot = new LandbotLivechat({
    index: 'https://landbot.io/u/YOURBOTID/index.html?language='+languagevariable,
  });
</script>

With the above example we will pass the value "Spanish" to Landbot, that in the parent site is in the "languagevariable" variable

You can pass as many variables as you need

How did we do?

Contact