Webhook Import

ComponentTypeDescription
imgWebhook Import๐Ÿšฉ triggerimport data and start a workflow via webhook

The Webhook Import component allows you to trigger a workflow in real-time when data is received from another platform.

note

Webhooks open up countless possible integrations, but can be intimidating for non-technical users. Book a โžก 1:1 session with our team if you need assistance with using or setting up a webhook.

What is a webhook?#

Webhooks are one way that one app can communicate with another app. The webhook import component allows another app to send data to Workflow86 and trigger a workflow. What makes webhooks special is that they allow you to send data in real-time, as something occurs. Webhooks must have a data source pointing to an endpoint - the data source is the app sending the data and the endpoint is essentially the delivery address. The endpoint will wait for data to be sent to it, and then reacts when it receives something.

Select a method#

To get started, there are two ways to set up a webhook import component: by sending a sample JSON to an endpoint, and by uploading a sample JSON.

img

The recommended method is by sending a sample JSON, so this will be the focus for the rest of this page.

img

Send a sample to the Sample Endpoint URL#

Once you have selected the send a sample JSOn method, you now need to send a sample JSON to the Sample Endpoint URL.

img

Copy and paste the URL into the app you are send the data from. In the example below, we are using the Typeform webhook feature and pasting it into the endpoint textfield.

img

important

The Sample Endpoint URL is a special endpoint designed to receive and process samples data only. It will not trigger or run workflows, and you need to switch it with the production endpoint URL later on in the process

Once you have set up the endpoint in the app sending the data, have that app send a sample to the endpoint. How to send a sample will differ from app to app, and many apps will even have the ability to send a test payload. If you need help on how to send a sample, contact us and we can help.

In the case of our Typeform example, to submit a sample JSON we will submit a form. Once you have send a sample, click "Next" - the webhook import component will now wait and search for that sample.

img

If a sample is found, you will progress to the next step.

Sample received#

You will see the sample data that has been received from the Sample Endpoint URL. Carefully inspect the data to make sure everything is correct and all the data you need is included in the sample.

img

If everything is fine, click "Next" to proceed.

Set placeholders#

Now that the webhook import component has a sample, it has something it can use to start mapping the incoming data into placeholders that you can use in the rest of the workflow.

You will see that all the possible values that can be turned into placeholders have already been mapped.

img

There are three columns, with the first two columns being the key and value pair from the data received. Here you can tick any data you would like to map, and untick any data you don't need mapped into placeholders. You can also change the name of placeholders in the third column.

img

Once you have set up the mapping of the sample data to placeholders, click "Next" to proceed.

Set the Production Endpoint URL#

So far you have been using the Sample Endpoint URL - this is for setting up only, and doesn't actually work to trigger workflows. You will now need to go back to the app sending the data, and switch the Sample Endpoint URL before, with the Production Endpoint URL seen here:

img

So in our case, we'll need to go back to Typeform and switch the endpoints

img

Once this is done, click next to proceed.

Generating and setting the token#

This is an important step that ensures that your webhook import component is secured. Remember, the webhook import component is like a door into your workflow - you don't want anyone and anything having access to it. To ensure that only the correct apps have access to the workflow, we use a token. Think of a token like a password or a key.

Click generate a token to create a token

img

A dialog will appear with the token. Copy and paste the token or download it - this is the only time you will be able to see the token. Once you close this dialog, it cannot be viewed again.

img

Once you have generated a token, your screen should look like this:

img

warning

Your token is essentially a password into your workflow - if you have lost it, forgotten it, misplaced it, or think someone else might know it, you must delete the token and generate a new token. Think of it like losing the key to your house - regenerating a token is like resetting the locks on all doors and windows.

How to set the token#

important

Correctly setting the token is essential to the security of the webhook import component and ensuring it works properly. If you are unsure of how to set up the token, please contact us and we can help.

Now that you have obtained your token, you will need to return to the app sending the data, and set the token using one of two methods.

Setting the token in the header (โญ recommended)#

The first method is the most secure and recommended method, and involves placing the token as a header in the incoming webhook playload, with "token" as the header key, and your token as the header value i.e. "token: you_token_here". Depending on the app, there will typically be a "add custom header" button that will allow you to configure this property.

For example, here is how it would be set in Webhooks by Zapier

img

Setting the token in the URL#

The second method is to set the token inside of the Production Endpoint URL. This method is only recommended when the first method cannot be done. To use the second method, add "?token=your_token_here" to the end of the Production Endpoint URL. It should look something like this (inserting your actual token instead of "you_token_here"):

https://webhook.workflow86.com/webhook/catch-sample/38570312126-26aa86-4s232122c7-aaf5-512c421321641291133?token=your_token_here

Note that this method is considered less secure because you are disclosing your token in the Endpoint URL itself.

Once you have set up the token, click "Next" to proceed.

Finish#

All steps in the webhook import set up have now been completed! You will see a summary page where you can access the Production Endpoint URL, delete and regenerate the token if needed, as well as the placeholders that will be exported from the incoming data.

img