Dynamic Data

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 2 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 https //www w3schools com/js/js arrays asp 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 strings 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) buttons final view in landbot 2 final view in landbot 3 cards final view in landbot 2 final view in landbot 3 autocomplete final view in landbot 2 final view in landbot 3 in this https //help landbot io/article/4phtj1sf1o dynamic data css csdes you can consult the css classes for the autocomplete option 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 text for the button this will be the text that the user will see, (required) 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) emoji (only buttons) if there is a key with the value of an emoji image (url) if there is a url to an image 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 https //help landbot io/article/ho0wznmpmn get the array 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 https //landbot io/u/h 201511 6y8kjplqz9mp9ssu/index html 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 2 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 2 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 2 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, https //raw\ githubusercontent com/icyrockcom/country capitals/master/data/country list csv we will select the whole csv content we are going to use the http //www convertcsv com/csv to json htm , we just need to paste the csv and select "csv to json" 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 go to the set variable block an create a variable called capitals that have the array format and paste the json generated 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 2 final view in landbot 3 for whatsapp for a list of all the blocks and current functionalities with whatsapp bots, please check https //help landbot io/article/3hfm48i31y 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 https //help landbot io/article/h8kxcybafx get index array selection whatsapp 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 https //help landbot io/article/qv32dpil6w integrations dynamic data arrays#how to create an array with javascript code block and display it with the dynamic data block demo link 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