Hubspot (Static Webhooks)#

Note: This guide is for Zapier's legacy web builder. For new integrations, use our Visual Builder Quick Start guide to learn how to build Zapier integrations.

This example will walk you through creating a developer app that uses a static webhook to receive data from a web app. To make the example real, we'll be implementing the actual Hubspot API.

Quick Preparation Checklist#

Create an App#

To get started, go to the Developer Platform and click the "Create App" button. You'll be asked to give a title and a brief description.

Create App screen

After you submit, you should find yourself with a fresh App like this:

Screenshot of empty dev app

Setting up authentication#

Normally, the first step in building an app is to define how Zapier will authenticate with your app. For static webhooks, however, the data exchange is one-way, your app making requests to Zapier. As a result, credentials are not needed from the users.

For this example, we will skip this step. If we later wanted to add actions or triggeres that were not static webhooks, we would need to come back and complete this section.

Setting up a trigger#

The trigger we are going to add for Hubspot will use webhooks to listen for new contacts. From your App, click the "Add your first test trigger" button.

Create trigger button

The first form you see allows you to define some of the user-facing details of the trigger.

Step 1 of adding a trigger

Click next to proceed to Step 2, Trigger Fields. Trigger fields add extra information for the trigger which you can use in the URL or in Scripting. We're actually going to skip over this step because our trigger does not require any additional info. Hit next to get to Step 3, where we define how our trigger will receive data from Hubspot.

With a static webhook, the user gives your app a URL that you can send notifications to. Zapier automatically generates the URL for the user. All you need to do is write clear instructions on where to use this URL inside of your app.

It is very important to replaced the default "Log into your app..." directions with ones specific to your app. Guiding the user to exactly the right place makes the setup process much easier for the user. Here is what we will say for Hubspot:

Step 3 of trigger editor

Click save to proceed to Step 4. In this step, we will copy and paste an example of what Hubspot sends in a webhook. This is critical for static webhook triggers. If you do not do this step, Zapier won't know what fields to show users when they are trying to make Zaps.

The data can be found by copying and pasting out of examples in documentation, or by using a app like RequestBin to catch a hook.

Step 4 sample data

When you click "Parse" you will be presented with a slew of form fields, one for each JSON key in the sample. These forms allow you to override the default name Zapier will give each key. For instance, Zapier will automatically turn the key "is-contact" into "Is Contact", but you might want to rename it to "Is a Contact". For now, we will skip this step and click "Save".

At this point, we have defined our first trigger and are ready to test it out!

Testing what we have built#

Now that we have built out the basics of our app, it is time to try it out and see if it works. Go to your dashboard and click the create a zap button. On Step 1 of the Zap Editor, you should now have our Hubspot Example app. The app should have a single trigger, New Contact.

Your Dev App on Step 1 of Zap Editor

After you select the trigger and any action (the Email Send Outbound Email is a good one to test with), Step 2 will show you the directions on how to use the static webhook URL.

Step 2 of Zap Editor

Continue down to Step 5 and click the "Insert Fields" button. You will get a dropdown list that has a bunch of fields. Note that the field names match up with what we put in our sample result.

Step 5 of Zap Editor

Now is also a good time to point out the value in renaming the fields when we pasted in the sample while building our trigger. Zapier turned the nested key {properties: {firstname: {value: ""}}} into "Properties Firstname Value". We can go back and edit our trigger to rename that field to just be "Contact First Name".

If you like, you can continue to fill out the Zap. On Step 6, when you click the test button, you will likely get a popup that says Zapier could not find any samples. All you need to do make Hubspot send a webhook by enrolling a contact into the workflow you setup. We'll catch the webhook and display it as a sample result. Once you get that, you can be sure your trigger is configured properly.

Congratulations! You have a working Hubspot application that uses static webhooks to receive data.

Be sure to check out our other examples for more details on doing other interesting things with Zapier's developer platform!

↑ Was this documentation useful? Yes No