Table of Contents

Dynamic Data (Arrays)

Pau Sanchez Updated by Pau Sanchez

Feature available for Professional and Business Plan accounts

What can I do with the Dynamic Data Block?

Sometimes we need to display a list of items not static that can change with time and be updated; it means that we cannot set up a fix number of buttons or create flows for all the eventualities. The Dynamic Data Block allows you to pull information from an external source in the shape of an Array and display it to your users.

The example below is one of the ways that we can display such data

Final view in Landbot 3:

What I need to use the Dynamic Data block?

Arrays (JSON response) from Webhooks can have a maximum size of 40kb. The smaller the better

What you need is an Array. This is a special variable format that can be found in the Webhook block:

How to set up the Dynamic Data block?

Select Array to iterate

First of all you will need to select from the available variables which one you want to store as Array:

It's an Array of

  1. Strings

  2. Objects
Show data as

You can show the data in two ways: buttons (when is an Array of Strings and an Array of Objects) or Cards (only Array of Objects) or Autocomplete (Array of objects and Array of Strings):

  1. Buttons

Final view in Landbot 3:

  1. Cards

    Final view in Landbot 3:

  1. Autocomplete

Final view in Landbot 3:

Type the key of the (only for "Arrays of Objects"):

In this fields you will need to type the path to the Key of the value you want to reach

  1. Text for the button: This will be the text that the user will see, (required)
  2. Value you want to Save on selection: This will be the value, once the user has selected an option, the variable will save for later use (required)
  3. Emoji (only Buttons): If there is a key with the value of an emoji
  4. Image (url): If there is a url to an image
  5. Link to external url: If there is a link that once the user clicks will open another tab

Save the user selection in the variable:

Save the user selection index in the variable:

You can store in a variable (number type) the index of the array based on the user selection. In case you want to see an example please check this article: Get the array's index of the user selection and extract information from array

How to set up the path to the key I want to display

In the section Type the Key of the you need to fill it with the path of the object to reach the key. It works like in the webhooks section when you save a value, please check the examples below:

[{
            "id": "rec0zJUsagrWDPbIt",
            "fields": {
                "Name": "Verner Panton Light",
                "Picture": [
                    {
                        "id": "attd96874f6c7d4a3",
                        "url": "https://dl.airtable.com/cDFiqPfIS2WBqpG8UOlS_pantonlight3.png",
                        "filename": "pantonlight3.png",
                        "size": 123195,
                        "type": "image/png",
                        "thumbnails": {
                            "small": {
                                "url": "https://dl.airtable.com/RQ2LGSlSPiEJzhhiPKas_small_pantonlight3.png",
                                "width": 49,
                                "height": 36
                            },
                            "large": {
                                "url": "https://dl.airtable.com/hp8DcILsRIKQ1NFLFYVs_large_pantonlight3.png",
                                "width": 256,
                                "height": 190
                            }
                        }
                    }
                ]
            },
            "createdTime": "2014-09-26T01:46:24.000Z"
        }]

Here are different scenarios for the JSON above:

To get to the value "Verner Panton Light" the path will be fields.Name

To get to the value 123195 the path will be fields.Picture.0.size

To get to the "2014-09-26T01:46:24.000Z" the path will be createdTime

How to store multiple-choice user selection as an array

 You can save the options (in a web bot) as an array. But bear in mind that it will store the key that is used as a a text:

So with this set up:

You will have this result:

Examples of Dynamic Data in use:

DEMO LINK FOR THE FOLLOWING CASES

How to display products using Airtable as a database (Cards & Arrays of Objects)

Airtable is really handy when it comes to have a solution similar to Google Spreadsheet and at the same time we want an easy to use API. For this example we are going to use an Airtable Template called "Product Catalog & Orders" to display our products. And what we want is to show the Name and a Picture.

From the Help section we will go to the API Documentation

Once there we will get the API Key we need to use, clicking on the left panel in Authentication and switching on Show API Key

It is important to be aware of the size of the Response of your JSON. Webhook stop working for responses higher than 40kb, please filter as much as possible!

Now, we can set up our Webhook. In this case, as we are going to be interested only in the fields Name and Picture, the Endpoint (url) we will use is:

https://api.airtable.com/v0/app2SCya7mL97tUPK/Furniture/?fields[]=Name&fields[]=Picture

To save the Response, we will save the Array of Objects in the variable "arrayforniture":

Now the Dynamic Data block:

For the key values we want to display:

Please note how we wrote the path of the Name and the Picture url:

We need to check the JSON object so we set up the path:

For name fields.Name:

For Picture url fields.Picture.0.url:

And the result will be as follows:

Final view in Landbot 3:

How to display a list of States using a mock database with myjson.com (Buttons & Arrays of Objects)

One easy way to create a list and save it instead of a database could be with a JSON in a service like myjson.com. In this example we will use a JSON with all the US States.

  • Here is the flow:

  • To set up the Webhook that will GET the JSON with the list of US States from myjson.com we will need to do as follows:

1. Copy the url from myjson.com once the JSON is saved:

2. Paste it in the Webhook url and select GET:

3. Press TEST to check if everything is correct and to be able to select the variable where you are going to store the Array:

4. Select in which variable are you going to Save the response with the list of states, remember that to be able to use it in the Dynamic Data block you will need to use the Array format:

5. Last you will need to select such variable in the Dynamic Data block

Here is the final result:

Final view in Landbot 3:

How to create an Array with Javascript (Code block) and display it with the Dynamic Data block

This could be the fastest (and laziest) way to set up a list of buttons or cards. You just need a middle step to do this hack. The rest is easy:

  • This will be the flow

  • With the Code block, we will set up the variable with the value of an array of objects

Here is the code used:

var theArray = [{"text":"Purple Cow","img":"http://t2.gstatic.com/images?q=tbn:ANd9GcQfO1oSrMgqxOQ-iotn3VqS0iZrhHKMYCmtO_bnKFeuI4oSeMda"},{"text":"Linchpin","img":"http://t3.gstatic.com/images?q=tbn:ANd9GcQDnmRPvn3nUGixmfymqSZo9lG7ikFDSAz26os3z7OU1tRGPl76"},{"text":"The dip","img":"http://t0.gstatic.com/images?q=tbn:ANd9GcTFgeD2uujLgTjHlv_hSvhybir42KzLwddT02XlGmlMaTYuPwrn"}]

Landbot.exec('landbot-custom-data',{ 'myarray':theArray})

  • Now between giving a value to a Landbot variable (myarray) and using it, we need a step in between: a user input. For this example we use a YES/NO Question

  • For the Set up of the Dynamic Data we do as follows:

In the step above, in the "Select Array to iterate" if you haven't created the variable before you will need to do it now. Remember it needs to be format Array!

And to display and save:

  • And here is the final result:

Final view in Landbot 3:

How to display a CSV list as Autocomplete (Autocomplete & Arrays of Objects)

For this example we are going to use a CSV that we will transform into a JSON, upload it to an external service that we will use to create our Autocomplete. The CSV will be a list of Country Capitals, here it is the original CSV.

  1. We will select the whole CSV content
  2. We are going to use the CSV to JSON converter, we just need to paste the CSV and select "CSV to JSON"
  3. Now we just generated a JSON that we will upload to another service where it will be the base for our Autocomplete. Copy the whole JSON generated
  4. Go to the Set Variable block an create a Variable called Capitals that have the Array format and paste the JSON generated

  1. In the Dynamic Data block we do the following set up:

And to select the Keys:

And the final result will be:

Final view in Landbot 3:

for WhatsApp

For a list of all the blocks and current functionalities with WhatsApp bots, please check here

CAN be displayed as a list of choices (the same as the “buttons” block) but CAN NOT be displayed as autocomplete/picture choice.

We offer a Brick Workaround that would help you to retrieve the index and values, depending on the user input. Please check this link

Only is able to display a list of items. It stores the input from the user, it doesn't store the value from the array/json

for Messenger

CAN be displayed as a list of choices (the same as the “buttons” block) but CAN NOT be displayed as autocomplete/picture choice.

And this set up:

It will be displayed like this in Messenger:

FAQs:

Can I use Google Spreadsheet as my database?

Yes, you can, but Google Spreadsheet doesn't offer a REST API and you will need to use third party tools. That is why we recommend for this case of situation Airtable like in the example above

Can I create Arrays with the Set Variable block and use them with the Dynamic Data block?

No, currently this option is not available. But you can do it via Javascript if needed, please check the example above

Can I avoid displaying duplicated items?

No, the Arrays are displayed as they are, so in case you want to display unique values, you must work on the data before is displayed or use more filtered steps

How did we do?

Get the array's index of the user selection and extract information from array

Contact