Knowledge Level: Advanced

Purpose

In this tutorial, we will present multiple results from a spreadsheet to a bot user on Slack, using the Slack 'visuals' feature on The Bot Platform.

We often deal with scenarios where a Spreadsheet search has multiple results. Usually a webhook response will only push one result to the bot user. But in this use case, we have a list of items in a Spreadsheet that are on auction. So we will utilize a webhook trigger from The Bot Platform, and Make.com to summarize a list of auction items, presenting them to a bot in Slack using visuals.

Prerequisite

• A bot
• A Make account
• A spreadsheet with a list of items
• Your favorite beverage (hot chocolate!)

Demo

Here's the bot in action:

Setting up the webhook

For our first step in the Make please follow this guide for process of setting up a webhook trigger in Make -> Setting up webhook and response in a Slack bot.

🚧

Paste webhook url to your bot

After creating the webhook module. Please make sure to copy and paste the url into your bot as a 'Webhook' message part.

Setting up Google Sheet module

In this use case, we are sending the results from a Goggle Sheet, to the bot user. Hence, setup a new module after the webhook trigger and look for Google Sheets:

Select your desired spreadsheet and setup the search filter. The search filter will allow you to pull the desired items as a list from your Spreadsheet.

Setting up Array aggregator and JSON modules

To be able to collate multiple spreadsheet results as a response to a bot user, we will have to utilize a Make called 'Array Aggregator'.

The Array Aggregator will allow us to summarize our search results and pass that into a webhook response as one message. The complete scenario will look as below:

After your Google Sheet search results, setup an Array aggregator module:

As the output is going to have multiple results, we will need some sort of formatting tool to store the various pieces of information, summarize them in human-readable format and store them in various variables. Hence we will utilize JSON as our framework for structuring our incoming information. For more information about JSON, please visit this link https://www.json.org/json-en.html.

Setup a JSON module in Make( which will feed information from the array aggregator. To do so, add another module and look for 'Create JSON'.

We now need to add a structure to our JSON module to format the information in a visual as we have to present multiple results through the webhook response. Click on 'Add' in the JSON module, give it a suitable name and click the 'Generator' button. In the sample data section insert the code below:

{
  "message":{
    "raw":{
      "attachment":{
        "type":"template",
        "payload":{
          "elements":[
            {
              "title":"A ticket to the theatre",
              "image_url":"https://petersfancybrownhats.com/company_image.png",
              "buttons":[
                {
                  "type":"postback",
                  "title":"View this lot",
                  "payload":"@BP:MESSAGE:83510"
                }, 		
                {
                  "type":"postback",
                  "title":"Place a bid",
                  "payload":"@BP:MESSAGE:83510"
                }
              ],
              "subtitle":"Did you want to bid?"
            },
            {
              "title":"A £100 voucher",
              "image_url":"https://petersfancybrownhats.com/company_image.png",
              "buttons":[
                {
                  "type":"postback",
                  "title":"View this lot",
                  "payload":"@BP:MESSAGE:83510"
                },
                {
                  "type":"postback",
                  "title":"Place a Bid",
                  "payload":"@BP:MESSAGE:83510"
                }
              ],
              "subtitle":"Did you want to bid?"
            }
          ],
          "template_type":"generic"
        }
      }
    }
  },
  "recipient":{
    "id":"{{1.fbuser.fbid}}"
  }
}

We are using a visual with buttons in this case. Once you have saved the data structure, your module will look as follows:

Press 'OK' to close the module for now, we will came back to this in a bit.

Save your scenario and go back to the array aggregator module. Under the 'Target structure type' dropdown, look for select the first JSON module. Here we will configure the message parts that need to be summarised from our Google Sheet result.

In the 'buttons' section, configure the information you would like to show to the bot user.

In the 'payload' section input the message id from The Bot Platform where the user should be directed after clicking on the button.

After configuring the 'Array Aggregator' we need to configure our JSON module. In the JSON module, use the array output from the previous module and the recipient ID.

Add webhook response

The last step is to add a webhook response module.

In the body, use the output from the JSON module and that should complete your scenario.

If everything was setup correctly, the bot user should see a visual menu with the desired information we setup via our Make modules.