Applications use webhooks to notify external apps when a specific event occurs. For example, webhooks are how Stripe notifies you via email when a new customer has subscribed, how Webflow saves new lead information into Airtable when a form is submitted, and how Shopify alerts you via Slack when a new purchase has been made.
Knowing how to configure webhook integrations can help you save time and increase efficiency in your workplace.
In this guide we will cover the fundamentals of building endpoints on Autocode to configure webhooks.
To reinforce our learning, we will build an endpoint and configure a webhook so that when a form is submitted on Tally.so a custom SMS message and email is automatically sent.
What we’ll learn:
- What is a webhook?
- What is an endpoint?
- Real world webhook example
- Creating an endpoint with SMS and Email functionality on Autocode
- API autocomplete
- API requests
- Example: Configuring our endpoint as a webhook on Tally.so
- Customizing SMS and email messages using event data on Autocode
- Inspecting Requests
- event payloads
- saving a payload
- consuming event payload data
What is a Webhook?
Webhooks deliver instant event driven messages from one application to another. The key definition here is “event driven” messages.
When an event happens in an application, such as a purchase happening in Stripe, a payload of data is sent to a webhook URL. This webhook will act like a “listener”, meaning it will receive the payload of data from that event. It can also handle the event - meaning it can execute code to launch requests to multiple APIs.
In order for us to configure a webhook, the application must support webhooks. Many of the applications we use at work, such as Github, Salesforce, Hubspot, and Slack, have the ability to extend their applications via webhooks, but some don't.
What is an endpoint?
An endpoint is a file with code hosted on Autocode.com. Once deployed, this code is executable via an HTTP request to the automatically generated endpoint URL. Your endpoint URL consists of your Autocode username followed by the project name and development environment. For example:
Real world webhook example
Webhooks remove information lag and offer a better customer experience. For example, let's say you're using Stripe and you want to reach out to a customer as soon as they subscribe to your service.
By setting a webhook on Stripe to push updates to your customer success team, you can ensure a quick response from your team to a new subscriber.
Key Terms
- Webhook - a way of sending data from one application another. You configure an endpoint URL as a webhook to tell an application where to send data.
- Endpoint - a file hosted on Autocode that runs code whenever an application sends data to it via webhook configuration
- Payload - the data which is sent from one application to another via a webhook
- API - Application Programming Interface's are more complex defined instructions for how one application can communicate with another using code. You can try out the APIs that Autocode natively supports by typing await lib in the Autocode editor.
We now have a high level understanding of how webhooks work. However, there is no better way to learn than by doing, so let’s jump into building our endpoint on Autocode and configuring our webhook on Tally. Tally lets us build forms similar to Typeform and Google Forms, and it conveniently supports sending data to a webhook when a form is submitted!
Creating an endpoint with SMS functionality on Autocode
Log in to your Autocode dashboard and click the New Web Service button.
Choose which account you’d like this project to live in, give it a name, and then click Create project. The name you assign the project will form part of your endpoint’s URL.
You’ll be redirected to Autocode’s code editor. Delete everything below line 3. On line 3 we are including our lib Node.js package. This is what allows you to connect to any of the APIs in Autocode’s Standard Library with one line of code.
Let’s begin by adding SMS functionality to our endpoint. You can search for available APIs by typing await lib. A list of available APIs will appear.
A list of all available API integrations will pop up. Select utils API option and search for the method that allows us to Send an SMS message (US and CA only).
Autocode will then pop up a window to assist in preparing the API request to this SMS API.
You’ll be asked to input two parameters.
- The first parameter is a phone number to send a message to. Enter your phone number here!
- The second parameter is the message you want to send whenever a Tally form is submitted. For now, we’ll keep things simple and just enter
A form was submitted!.
Once you have finished configuring your API request, click the blue Finished Configuring button, then the orange Save button.
Copy the endpoint URL at the bottom of the editor down somewhere safe. You’ll need it later in this tutorial!
It is composed with your username, project name and development environment you selected:
https://<username>.autocode.dev/<projectname>@dev/.
Copy the endpoint URL at the bottom of the editor down somewhere safe. You’ll need it later in this tutorial!
Now we’ve got our endpoint URL, let’s try sending data to it using Tally. Tally is a simple way to create forms and surveys. We’ll build and publish a sample form on Tally, then try sending data to Autocode using a webhook.
Head over to Tally, and signup for an account.
Configuring a webhook on Tally
For the purposes of the demo we will use the following lead generation template:
This is a simple form that intakes a couple inputs. Select Use this template and then Publish at the top menu-bar. Once we complete this example, you can return and modify it to your liking.
Tally will generate a unique link to your form once you publish. Copy this link and open the form on a separate tab and then select the integrations tab.
As you can seem Tally offers native integrations that make it easy to connect to other platforms and tools. However, it doesn’t natively support Twilio or Gmail. Luckily, we can send form submissions to our Autocode endpoint to get around this limitation.
Select the Webhooks option and set your webhook by registering the endpoint’s URL that you created on Autcode. Make sure to not leave any spaces before or after the endpoint URL and select Connect.
Once you set your webhook endpoint, you will be routed back to the dashboard for your Lead Generation Form. You should make sure the webhook is turned on by toggling the enable option.
Test your webhook by submitting a form. You should receive a message to the number you set when configuring your parameters in Autocode.
Customizing SMS messages using event data
So far, we've been able to deploy an endpoint, configure a webhook URL, and trigger a notification. Next, let’s learn how to extract data from the event payload so that each text is customized with the sender’s name, email address and job title.
Return to the Autocode editor and click the Tools button in the bottom right corner of the editor.
A window will pop up giving you access to four different tabs.
The Logs tab will display any error messages and requests made to your endpoint.
Inspecting Requests
Through here we can inspect individual HTTP(S) requests and events sent to Autocode. We are also able to copy the event payloads directly into the Autocode IDE to debug and iterate on our code.
Hover above the latest request and select Inspect Request.
Here we have access to the time the event was received, complete event payload of data from Tally, headers and more.
You can copy this request payload to your test payload by clicking the blue Copy Request Payload to Test Payload button. This will cause your payload’s data to automatically populate onto thePayload tab in the Autocode IDE. This allows you to simulate an event by pressing the green Run button at the bottom right of the editor, making iterating on code for your endpoint much faster.
Now that we have actual event data to use as we iterate on our code, let’s get back to editing the SMS message we’re sending everytime a Tally form is submitted.
We can use dot notation and template literals to extract the values from the event payload. We’ll format our message to send the first name, last name, email, and role for every person who submits the form via SMS.
// authenticates you with the API standard library
// type `await lib.` to display API autocomplete
const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});
await lib.utils.sms['@2.0.2']({
to: `10000000000`, //your number here
body: `A form was submitted here is the info:
name: ${context.params.data.fields[0].value} ${context.params.data.fields[1].value}!
email: ${context.params.data.fields[2].value}
role: ${context.params.data.fields[3].value}`,
});
return "message sent"
Now we can simulate an event by pressing the green run button instead of going back to Tally, filling out and submitting the form to trigger an event.
Adding email notification
While we’re here, let’s add logic to send an email notification to our endpoint. Let’s send a customized email to the person who submits the form with a simple confirmation message that we have received their request.
Use API autocomplete to search for the Gmail API by typing await lib. and select the method to compose and send a message.
Fill out the parameters accordingly click ** Finish configuring**
// authenticates you with the API standard library
// type `await lib.` to display API autocomplete
const lib = require('lib')({token: process.env.STDLIB_SECRET_TOKEN});
await lib.utils.sms['@2.0.2']({
to: `15100000000`, //your number here
body: `A form was submitted here is the info:
name: ${context.params.data.fields[0].value} ${context.params.data.fields[1].value}!
email: ${context.params.data.fields[2].value}
role: ${context.params.data.fields[3].value}`,
});
await lib.gmail.messages['@0.2.8'].create({
to: `${context.params.data.fields[2].value}`,
subject: `Hey ${context.params.data.fields[0].value} - we received your request!`,
text: `Hey ${context.params.data.fields[0].value},\n\nThank you for submitting a request. We will get back to you shortly!\n\n-Janeth \nDeveloper Advocate`
});
If this is the first time making a request to the Gmail API, click the red required button to the bottom left of the editor and follow the instructions to link a New Resource.
Submit a form with your email and you will receive an email within seconds.
Time to start building
Congratulations! You are now equipped with the webhook language and tools to build webhook functionality.
Top comments (0)