A guide to connecting your apps via webhooks with Autocode #tutorial
Tags: node, javascript, api, tutorial
Published: 2022-11-09 17:34:45

---
title: A guide to connecting your apps via webhooks with Autocode #tutorial
published: true
canonical_url: https://autocode.com/autocode/threads/a-guide-to-connecting-your-apps-via-webhooks-with-autocode-tutorial-5a8ed56d/
description: 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.
tags: nodejs, javascript, api, tutorial 
# cover_image: https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/APIs%20and%20Webhooks%20(1).png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-09 17:29 +0000
---
Applications use webhooks to notify external apps when a specific event occurs. For example, webhooks are how [Stripe](https://stripe.com/docs/api/webhook_endpoints) notifies you via email when a new customer has subscribed, how [Webflow](http://developers.webflow.com/#webhook-events) saves new lead information into Airtable when a form is submitted, and how [Shopify](https://shopify.dev/api/admin-rest/2022-04/resources/webhook) 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.

![Illustration of a Stripe webhook](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/APIs%20and%20Webhooks%20(1).png)

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](https://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:

![Endpoint URL autogenerated by Autocode](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_15.png)

## 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.

![Illustration of a Stripe webhook](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/APIs%20and%20Webhooks%20(1).png)

## 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](https://autocode.com/dashboard) and click the `New Web Service` button.

![Autocode dashboard](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_1.png)

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.

![Naming an Autocode project](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_2.png)

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](https://autocode.com/lib)  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.
![API Autocomplete on Autocode’s editor](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_4.png)

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)**. 

![Using API Autocomplete to search for SMS API on Autocode](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_5.png)

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!`.

![Autocode's window for configuring API requests](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_6.png)

Once you have finished configuring your API request, click the blue  **Finished Configuring** button, then the orange **Save** button. 

![Autocode endpoint URL](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_7.png)

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://&lt;username&gt;.autocode.dev/&lt;projectname&gt;@dev/. 

![Autocode endpoint URL](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_15.png)

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](https://tally.so), and signup for an account.
## Configuring a webhook on Tally

![Sign in page for Tally.so](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_8.png)

For the purposes of the demo we will use the following lead generation template: 

[Lead Generation Form Template](https://tally.so/templates/lead-generation-form/l3jQmM)

![Lead Generation Form Template](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_10.png)

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. 

![Selecting Publish on Tally navigation menu](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_9.png)

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. 
![Tally form URL](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_11.png)

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.

![Webhook Integrations on Tally](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_12.png)

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.**

![configuring an endpoint on Autocode](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_13.png)

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.

![Autocode endpoint URL configured as webhook for Tally lead generation form](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_14.png)

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.

![Tools button](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/webhook_15.png)

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`.

![Inspect Requests](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_16.png)
Here we have access to the time the event was received, complete event payload of data from Tally, headers and more. 

![Window to inspect request for events on Autocode](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_17.png)

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 the`Payload` 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.
![Copying request event data to test payload window](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_18.png)

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.

![Using dot notation to extract values from event payload of data](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_19.png)

```javascript
// 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.

![SMS text](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Webhook_20.png)

## 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**

```javascript
// 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**.

![Link a new resource](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Xnapper-2022-11-08-12.16.45.png)

Submit a form with your email and you will receive an email within seconds. 

![Email from Autocode automation](https://janethl.public.files.stdlib.com/_stdlib/provider/autocode/images/2022-11-08/Xnapper-2022-11-08-12.31.51.png)

## Time to start building
Congratulations! You are now equipped with the webhook language and tools to build webhook functionality.