Webhooks

Introduction

Webhooks are a powerful tool that allows you to receive real-time data from third-party services and integrate it into your applications. In this tutorial, we'll learn what webhooks are, how to set them up in Xano, and how to use the data received from webhooks in your Xano applications.

What are Webhooks?

A webhook is a way for one application to send data to another application in real-time. When an event occurs in the first application (such as a form submission), it sends a HTTP POST request to a URL (the webhook URL) with the relevant data. The receiving application (in this case, your Xano app) can then process and use this data as needed.

Setting Up a Webhook in Xano

To demonstrate how webhooks work, we'll use a third-party service called Typeform, which allows you to create and share online forms. Here's how to set up a webhook in Xano to receive data from a Typeform submission:

1. Create a new API endpoint in Xano: Go to the API section in Xano and create a new endpoint. Give it a name like "Form Submission" and make sure the method is set to POST.

2. Add the get all input function: In the function stack, find the get all input function under the "Utility Functions" section. This function will store the entire webhook payload (the data sent by Typeform) in a variable.

3. Copy the endpoint URL: Once you've added the get all input function, copy the endpoint URL from Xano.

4. Connect the webhook in Typeform: In Typeform, go to the "Connect" section and select "Webhooks". Paste the Xano endpoint URL you copied earlier and save the webhook.

That's it! Now, whenever someone submits a form in Typeform, the data will be sent to your Xano endpoint as a webhook payload.

Working with Webhook Data in Xano

After setting up the webhook, you can access the data sent by Typeform in Xano's "Request History". Here's how to work with the webhook data:

1. Access the Request History: Click on the "Request History" icon in the top-right corner of the Xano editor to see a list of all requests sent to your webhook endpoint.

2. Inspect the payload: Click on a request to see the webhook payload (the data sent by Typeform). This payload is stored in the variable you defined earlier (payload in our example).

3. Use the sub path feature: Webhook payloads can be complex, with data nested in various levels. Xano's sub path feature allows you to visually navigate the payload and select the specific data you need.

4. Store the data in a database: Once you've identified the data you need, you can store it in a Xano database using the add record function. Use the sub path feature to define the paths to the required data fields.

5. Use get filter for flexibility: Sometimes, the webhook payload might not include certain data fields. In such cases, you can use the get filter function to define a default value for those fields.

In the video tutorial, we walked through setting up a Submissions table in Xano's database and storing the form data (first name, last name, email, and services of interest) from Typeform submissions.

Conclusion

Webhooks are a powerful way to integrate third-party services with your Xano applications. By following the steps outlined in this tutorial, you can set up webhooks in Xano, receive real-time data from external sources, and process that data using Xano's visual interface and function stack.

Whether you're a no-code enthusiast, a citizen developer, a traditional developer, or a small business owner, Xano's webhook capabilities can help you build more robust and integrated applications without writing code.