Categories
Print

Action Block: Airtable

What is Airtable?

Airtable is a cloud-based database like Google Sheets that provides a more easier to visualise and operate platform to the user to kickstart their project using hundreds of inspiring templates.


Airtable action block allows the user to dynamically retrieve the data from it and render them in the chatbot in the form of Buttons, Image Carousel and Carousel.



This action block is not visible to everyone. You will have to raise support request to have access to this block. You can raise a request by sending out email on hello@i-genie.co.uk



When can I use an Airtable action block?

Following are few of the scenarios where the same can be used,

  • * To showcase the product catalogue to the visitor by pulling the data from the Airtable
  • * To showcase images to the visitor
  • * To build a mini directory of the employees working in different department
  • * To highlight the customer testimonials or success stories


In-order to use the Airtable action block, you will first need to have the base / project in Airtable along with valid fields and data


How do I set it up?

Setting up the Airtable action block is a 3-step process that needs to be followed,

  • 1. Authenticate your account
  • 2. Add formula to filter the data
  • 3. Choose how you want to render the data



Authenticate your account:

In-order to fetch the data from Airtable into the chatbot conversation, it is necessary to authenticate Airtable with WotNot by providing the authentication details.


Below are the steps to link your Airtable space with i-genie,

Step 1: Add action block on canvas by clicking on ‘+’

Step 2: Choose Airtable

Step 3: Configure it on the right panel



Click on ‘Airtable’ action block to open the configuration panel on the right side of the screen. Below are the steps that you can perform to configure the action block

  • * Sign-in into your Airtable account
  • * Map the API key of your account
  • * Map the Base key (You will find this key by opening ‘Airtable – Rest API’)
  • * Select the base from where you would like to fetch the data from
  • * Map the table name


Different tabs under one particular base are called tables in Airtable. Columns are called fields



Decide on Formula to filter the data:

While using the Airtable action block, you may not want to fetch all the data from the table but rather just a few details which are required in the conversation flow.


To filter this data, we use the formula field in the right panel of the Airtable action block to define that criteria


The syntax to write the formulas is the same as what you would use in Airtable. You can learn more about Airtable formulas here.


You can also make use of the variables of i-genie is the formula field


let’s say a visitor interacts with a bot of a Real Estate firm and the visitor is looking for a specific type of property. The bot would collect the input from the visitor by asking a question / showing a list of buttons. The input received from the visitor can be stored in a variable and then the user can use this variable to filter out the data and only present that data which the visitor is looking for.


‘Type’ is the field name on Airtable & ‘#propertytype#’ is the variable that contains the input received from the visitor.



Choose how you want to render the data:

There are three ways in which you can render the data fetched from the Airtable on the chat widget,

  • 1. Render as Buttons
  • 2. Render as Carousels
  • 3. Render as a Image Carousel


To further understand how each option works and how we can set up the same, we shall be taking the example of bot of Real Estate firms that share the details about the properties in different cities.


Render via Buttons:

Using this option will render the data fetch from Airtable as ‘Buttons’. These buttons can be further classified into two types,

  • * ‘Branch’ Button
  • * ‘URL’ Button


Render as ‘Branch’ button:

With the use of this option, the conversation will branch out and continue as per the flow defined in the bot builder


How do I configure?

Step 1: Select ‘Show data as’ ‘Button’

Step 2: Select ‘Type of button’ as ‘Branch’

Step 3: Define a question or message that will be shown along with the list of buttons

Step 4: Map the Airtable’s field name from which the name of the button will be fetched

Step 5: Define variable in which the selection from the visitor will be stored



Render as ‘URL’ button:
Using this option, the bot will simply open a URL on the new tab


How do I configure?

Step 1: Select ‘Show data as’ ‘Button’

Step 2: Select ‘Type of Button’ as ‘URL’

Step 3: Define a question or message that will be shown along with the list of buttons

Step 4: Map the Airtable’s field name from which the name of the button will be fetched

Step 5: Map the Airtable’s field name from which the URL that needs to be open on click of the button will be fetched



Render as Carousel:

Using this option, the data fetched from the Airtable will be rendered in the form of a carousel. You will mainly use this to showcase a list of your products/services.


let’s consider that you are a Real Estate company and when the visitor speaks with the bot, the bot should fetch and display the properties matching what the visitor is looking for.


How do I configure?

Step 1: Select ‘Show data as’ ‘Carousels’

Step 2: Map ‘Cover Image’ with Airtable field that contains images

Step 3: Map ‘Title’ with Airtable field as per your preference. This will be the title of the card

Step 4: Map ‘Description’ with Airtable field that contains description. This will provide the brief summary about what is the card is about


It is best to limit the text here to 2-3 lines


Step 5: Define action for the buttons


Defining the action will allow to define the action when the button is clicked. There are two types of buttons you can add:

  • * Branch Button: Branches out conversation to a new flow
  • * URL Button: Opens URL in new tab



Maximum upto 3 buttons can be added


For using URL button, you will need to map URL field on Airtable with it


In-case of URL button, as it opens in the new tab; this will mark the end of the flow & hence there will be no outgoing port from this block on the panel


Step 6: Define variable


By defining the variable, it allows you to store the input received from the visitor and further use in the flow as per the requirement



Render via Image Carousel:

With this option, user can display a set of pictures of a selected item making it easy for them to browse through it.


let’s say a visitor is speaking with a bot on a Real Estate companies website. The visitor has selected a property that he likes and wants to view the floor plans of this property.


How do I configure?
Step 1: Select ‘Show data as’ ‘Image Carousel’

Step 2: Map ‘Image’ field with Airtable field that contains images



Storing other details in variables:

Oftentimes, once you have integrated the Airtable action block with the above steps, you may find the need to store additional values from the Airtable for further processing within the conversation flow.

You can do this using the “Store other values in variables”. By enabling this configuration, you will see a field mapping table where you can map the Airtable fields with a variable name.


Considering the Real Estate example, let’s say once the visitor selects a property that he is interested in inquiring about, we would like to display the sales representatives Name, Phone and Email address so that the visitor can contact him.

Some limitations of this integration:

The API has a rate limit of 5 requests per second per base. If you exceed this rate, your bot will show an error and the visitor will need to wait 30 seconds before subsequent requests will succeed.