๐Ÿ”Œ Manually creating a webhook

While some apps make it super easy to set up a webhook with just a few clicks, and other apps will require you to manually create webhooks by making a HTTP request. In this article, we will go through an example of how to create a webhook manually via a HTTP request.

note

How to set up a webhook via a HTTP request will differ from app to app. This example will be based on creating webhooks using the Webflow API, and creating webhooks in the specific app you are using may be different. However, the underlying concepts and tools will remain the same - you will be using a tool like Postman to construct and send the HTTP request, which will then create the webhook you need.

Read the documentation#

If an app allows you to create webhooks, it will have detailed documentation and instructions. Inside of this documentation, you will find all you need to know about how to properly set up the request to create the webhook, what information you need (for example API tokens), the format the request has to be in, and so on.

In this article, we'll be setting up a Webflow webhook, so we'll need the documentation here.

Create a Postman account#

You'll need some way to make HTTP requests in order to create webhooks. We recommend Postman because its free and pretty easy to use. You can sign up for an account here

Once you have created your Postman account, click "Create New":

img

Create a new collection:

img

And then on the sidebar, click "Add a request":

img

And you should now see something like this:

img

And now we are ready to start building the HTTP request that will create your webhook.

Create the sample webhook#

Set the method and request URL#

Set the method as POST and then insert the request URL into the textfield. In our case, it will be something like this:

https://api.webflow.com/sites/your_site_id/webhooks

img

Set the headers#

Now we need to set up the headers, which in our case will look like this with the Bearer Token substituted into the your_token_here"

img

Set the body#

And then the body. In this case, we select "raw" as the body type, specify the value for "triggerType" (collection_item_created) and and specify the value for "url" which will be the Sample Endpoint URL obtained from the webhook import inside of Workflow86:

{"triggerType":"collection_item_created", "url":"w86_webbhook_endpoint"}

Send the request#

We should now be ready to click "Send". Once you click send, you should get a response back that looks like this:

img

If you got a response back like that, then nice ๐Ÿ‘ you have successfully created that webhook.

Send a sample to Workflow86#

You will now need to trigger that webhook to send a sample to the webhook import inside of Workflow86. Once that sample has been received, you can continue to set up the webhook import as you normally would.

Set up the production webhook#

If you have created a webhook using the above method, you have created a webhook pointing towards the Sample Endpoint URL. We will now need to create another webhook, pointing to the Production Endpoint URL. You simply need to repeat everything you did above, but instead of the Sample Endpoint URL, insert the Production Endpoint URL. In our case, that will be in the body here:

{"triggerType":"collection_item_created", "url":"w86_webbhook_endpoint"}

img

Send the request#

Just as before, you should now be ready to click "Send". Once you click send, you should get a response back that looks like this:

img

If you got a response back like that, then your webhook should now be live and production ready ๐ŸŽ‰.

Remove the sample webhook#

Now that the sample webhook we set up earlier has done its job and the production webhook has been created, we can now remove the sample webhook.

To do this, we'll need the site ID and the webhook ID which can be found in the response we received when the webhook was created:

img

Create a new request in Postman, set it to DELETE and insert the following into the Request URL (with your site ID and webhook ID substituted in)

https://api.webflow.com/sites/site_id/webhooks/webhook_id

img

Set the following in the headers, with your token:

img

Send the request#

And then click send. If everything goes according to plan, you should get the following as the response:

img

If so, nice ๐Ÿ‘ You have now deleted the sample webhook you created earlier.