Table of Contents

How to display an HTML Table and a List in Landbot v3 web

Pau Sanchez Updated by Pau Sanchez

Dynamic Data block is great to display an array of options that needs to be selected. But we might need to simply display a table with data coming from an array, probably from a request (Webhook).

Table

Here is an example of how to do it and display an array like this:

[{"item":"table","price":"$2,00"},{"item":"chair","price":"$6,00"}]

And display it in the bot like this (Here is the example: https://chats.landbot.io/v3/H-691079-ZDXS21QWQ8N6WJH5/index.html):

We will be based on this flow

Here is how it can be done:

  1. In the Set Variable, we create a Variable type array, similar to what you are getting from the Webhook:

  1. In the Next step is to create the HTML code that we will store in a Landbot variables, so we can display it later, just by using that variable:

Here is the code:

let myArray = @array;
let table = '<table><tr><th>Item</th><th>Price</th></tr>';
    for (let i = 0; i < myArray.length; i++) {
        let row = `<tr>
            <td>${myArray[i]['item']}</td>
      	    <td>${myArray[i]['price']}</td>
	        </tr>`;
	table = table + row;
    }
    table += '</table>';
this.setCustomData({tablehtml: table});

You will need to adapt the headers and the keys from your array to your needs

  1. As you can see in the last line, we set up to a Landbot variable called "tablehtml" the value of the HTML to display the table.4. Before we show the variable, we need a user input, that is why we use the buttons block (that step cannot be avoided)

List

Here is an example of how to do it and display an array like this:

["table","chair"]

And display it in the bot like this (Here is the example: https://chats.landbot.io/v3/H-691079-ZDXS21QWQ8N6WJH5/index.html):

We will be based on this flow

Here is how it can be done:

  1. In the Set Variable, we create a Variable type array, similar to what you are getting from the Webhook:

  1. In the Next step is to create the HTML code that we will store in a Landbot variables, so we can display it later, just by using that variable:

Here is the code:

let myArray = @array;
let list = '<ul>';
    for (let i = 0; i < myArray.length; i++) {
        let row = `<li>${myArray[i]}</li>`;
				list = list + row;
    }
    list += '</ul>';
this.setCustomData({listhtml: list});

  1. As you can see in the last line, we set up to a Landbot variable called "listhtml" the value of the HTML to display the list.
  2. Before we show the variable, we need a user input, that is why we use the buttons block (that step cannot be avoided)

How did we do?

Different ways to format numbers with JS

Trigger a Global Keyword with JS (web v3)

Contact