Introduction

In this video, we'll show you how to use a post request to save the information a user gives you within an experience to an Airtable base. How do we execute a POST request? Well, it involves using Voiceflow's API step. To give you a better understanding of how this works, let's show you how to set up an API step.

Component Walkthrough

First, you'll need to start by dragging an API step onto the canvas - which we've already done here. Once we click into it, we're going to navigate over to our editor and select POST from the instead of GET in the drop down. This now tells our experience that we need to POST or save whatever response we're capturing into a predefined variable that will then map to a specific field in our Airtable base.

Now that we've set that to POST, you're going to need to copy a few things into this API step, such as the API key and the ID of the base. You can find this information by navigating over to your Airtable base, selecting the help tab, and then by clicking API documentation.

Scroll down to find the base ID and copy it. Next, return to Voiceflow and paste it in the request URL field.

One thing to note is that when you copy over the base ID URL, you want to make sure you've included the entire slug - including the name of the tab you want to pull data from.

Next, let's head back to the API documentation for our Airtable. We're going to want to click show API key in the top right corner of the screen. This personal API key is required in order to use the Airtable API and can be generated in your Airtable account settings. If you haven't generated this key yet, be sure to do so or this check box will not appear.

The next thing we need to do is underneath EXAMPLE USING BEARER TOKEN, copy over bearer and the key for the actual base itself.

Once we've done that, we'll head back to Voiceflow and type in authorization under header assignments and then paste what we had copied into the value field. When you have finished filling in the API step with the appropriate information, all you need to do is one extra step. Unlike with a GET request, you're going to need to figure out what field you want to map your answer to.

In this case, we want to be able to map it to the task field in the tab for overview in our base called Airtable tutorials. Since we've already told our API step where the base is we just need to indicate where we'd like to map our variable to. To do this we'll click body and then select raw. And what we're going to paste in here can be found in the API documentation. So let's head back there.

Now we're going to want to select create records underneath overview table in the left hand menu [which is the name of the database] and then copy all of this code here.

This indicates that we want to add a record and look for the field tasks. We are also going to need to replace laundry with our new_task variable after we've pasted it in order to map each new task a user says to our Airtable.

So let's now paste this back into Voiceflow. Once we've pasted that, we can actually delete the second part of the code as it's redundant and then replace "laundry" with our variable new_task - which again is what we're using to collect the user's response.

Okay, great. Now that we have our POST request filled out, we can go ahead and click test request to make sure it's working.

So let's say the user wants to add, "buy more cat food" as a new task.  So we'll write that in the text field and we'll click send request. And fantastic - it says it's succeeded. And as we can see, it's been added to our Airtable database.

Let's now break down this experience on the canvas.

After the assistant welcomes the user to the experience, it asks what tasks they would like to add. This is followed by a choice block, which begins listening to the users response. If we open up the editor, you can see we've created a next_task intent and a number of utterances to account for what the user might say. This includes a new_task slot, which is a piece of information - which in this case is a task - that we've asked the assistant to look for when the user is giving their response.

This slot acts like a variable in the sense that it can match any given task set by the user as long as it's included as a slot value in your interaction model. After the user responds with a task, we then send a POST request to our Airtable database using the API step. And as we mentioned earlier, we've included our new_task slot in the body to map each new task fulfilled in Voiceflow to Airtable.

Once the POST request is complete, the assistant then confirms that the specific task has been saved and then asks if the user would like to add anything else. If the user says, "yes", they will loop back to the beginning of the experience. If they say "no", they will exit the skill. We've also included re-prompts and an error path in the event we don't match the user's response or if the user says something we're not expecting.

Prototyping this Experience

Let's now test this experience to see it in action.

Assistant: Welcome to your personal task manager. What task would you like to add today?
User: Shave Beard
Assistant: I have saved shave beard to your to-do list. Anything else you'd like to add?
User: No
Assistant: Be sure to check out your Airtable database to see your updated list. Goodbye for now.

Wrapping up

So that's how you use Voiceflow and Airtable to set up a post request, which allows you to save information captured in your experience to an Airtable database.

You can now design this functionality to be included in a variety of experiences from to-do lists to inventory tracking, to scheduling a weekly social media calendar for your company. The possibilities are endless.