Table of Contents

How to "send" a user to a specific point in the flow with Javascript and with the API

Pau Sanchez Updated by Pau Sanchez

In some occasions we might want to redirect the user to a specific step in the flow. Maybe triggered with an action (onclick) in the website where the bot is embedded or maybe trigger it with the API because an action has been completed.

Here are three examples of how to do it:

1. With onclick in parent page "Send" a user to a specific point in the flow with Javascript while the bot is open

In Landbot 3

In this case we want that the user to click on a button while the bot is open (livechat, embed or pop up types)

Here is the sample set up inside in the builder:

1. We will use Global Keywords, to set up the flows where we want to redirect the user.

Note: Take note of the order of the options, as will be used in the snippet in the parent page

2. Now in the parent page, we need to set up the event listener to trigger with Javascript, and we will add the trigger that will tell the bot to move:

myLandbot.onLoad(function(){
    
      document.getElementsByClassName("openbot")[0].addEventListener("click", function(event){
        event.preventDefault()
        myLandbot.sendMessage({ type: 'button', message: 'Go to Step 1', payload: '#1' })
    });

As you can see payload #1 refers to the first option in the Global Keywords

Here is an example:

See the Pen "Redirect" user with onclick in container site Landbot 3 by Pau (@landbot_help) on CodePen.

In Landbot 2

In this case we want that the user to click on a button while the bot is open (livechat, embed or pop up types)

Here is the sample set up inside in the builder:

1. We will use Persistent Menu, to set up the flows where we want to redirect the user.

Note: Take note of the order of the options, as will be used in the snippet in the parent page

2. Now in the parent page, we need to set up the event listener to trigger with Javascript, and we will add the trigger that will tell the bot to move:

myLandbot.on('landbot-load', function(){
    
      document.getElementsByClassName("openbot")[0].addEventListener("click", function(event){
        event.preventDefault()
        myLandbot.send('landbot-msg-send', { type: 'button', message: 'Step 1', payload: '#1' }) This will trigger the redirection
    });
})

As you can see payload #1 refers to the first option in the Persistent Menu

Here is an example:

See the Pen "Redirect" user with onclick in container site by Pau (@landbot_help) on CodePen.

2. With onclick in parent page, open bot and "Send" a user to a specific point in the flow with Javascript

In Landbot 3

Here is the sample set up inside in the builder:

1. We will use Global Keywords, to set up the flows where we want to redirect the user.

Note: Take note of the content of the Global Keyword has to match the payload key of the message to be sent, as you can see in the next example.

2. Now in the parent page, we need to set up the event listener to trigger, that will open the bot and move the user to the desired node

myLandbot.onLoad(function(){
    
      document.getElementsByClassName("openbot")[0].addEventListener("click", function(event){
        event.preventDefault()
        myLandbot.open();
        setTimeout(function(){
          myLandbot.sendMessage({ type: 'button', message: 'Go to Step 1', payload: '#1' })
        },500)
      });

Here is an example:

See the Pen Open bot and "Redirect" user with onclick in container site Landbot 3 by Pau (@landbot_help) on CodePen.

In Landbot 2

Here is the sample set up inside in the builder:

1. We will use Persistent Menu, to set up the flows where we want to redirect the user.

Note: Take note of the order of the options, as will be used in the snippet in the parent page

2. Now in the parent page, we need to set up the event listener to trigger, that will open the bot and move the user to the desired node

myLandbotpop.on('landbot-load', function(){
    
      document.getElementsByClassName("openbot")[0].addEventListener("click", function(event){
        event.preventDefault()
        myLandbotpop.open() // This will open the pop up
        myLandbotpop.send('landbot-msg-send', { type: 'button', message: 'Step 1', payload: '#1' }) // This will trigger the redirection 
    });
})

Here is an example:

See the Pen Onclick & "Send" a user to a specific point in the flow by Pau (@landbot_help) on CodePen.

3. While the user is interacting with the bot"Send" a user to a specific point in the flow with the API.

We are going to use this method of our API => Assign bot (https://dev.landbot.io/api/index.html#api-Customers-PutHttpsApiLandbotIoV1CustomersCustomer_idAssign_botBot_id)

In this case via API we will have much more flexibility to trigger

We need:

1. The bot_id, you can find it in the URL of the builder:

2. The customer_id, you can capture it via API or just simply with the @id variable

3. The node reference, you can find it by pressing right click on the desired block, and copy it:

4. And your account API token, from the Avatar > Account section

Here is the curl code:

curl --location --request PUT 'https://api.landbot.io/v1/customers/:customer_id/assign_bot/:bot_id/' \
--header 'Authorization: Token <<YOUR API KEY>>' \
--header 'Content-Type: application/json' \
--data-raw '{"node": "<<node reference>>"}'

NOTE 1: This method works if the user arrive to a block with no output. If this is tried while the flow is working it will fail

NOTE 2: This method won't work if the conversation is assigned to an agent.

How did we do?

How to trigger events and/or pass values from Landbot to the container site

Change Landbot custom CSS dynamically from parent page onload

Contact