Webhook Examples

Webflow has rich support for webhooks, including responding to site and page changes, form submissions, and updates to CMS data. Webhooks can be easily created in your site settings or managed via the REST API.

For a full guide to working with webhooks and Webflow, read our developer documentation.

In general, the flow will be:

• Add your webhook and make note of the secret value created for your webhook.
• Write code in the language of your choice to handle the call from Webflow.
• Ensure the request is legitimate by checking the authorization of the request.

The sample include in this repository demonstrates a work flow based on a form submission. Imagine your Webflow site has a contact form that asks for the visitor's name, email, and comments. We can create a workflow that will look for certain keywords in the form submission and route the request accordingly.

This is done by a simple text check, for example:

if(formDetails.comments.toLowerCase().indexOf('cat') >= 0) {

But in a production environment, your workflow and how it executes could be much more complex.

Running the Script

To run this demo, you will need to:

• Have a Webflow site you can use for testing purposes.
• Add a form to it. The form should include two text fields named Name and Email. It should have a textarea field named Comments.
• Create your webhook in your site settings and copy the token. In order to do this, you'll need the URL for what your webhook is running.
• Create an environment variable with that token named WEBHOOK_TOKEN
• Run npm i to install dependencies for the script and then node formpost.js. This will run the code as a simple HTTP server responding at port 3000.

How to Test with ngrok

If you want to run this code locally and expose it with a tool like ngrok, you have a bit of a chicken and egg problem. You can't add your webhook until you know the URL. You don't get an auth key until you make the webhook. So what do you do?

I suggest just leaving the auth key blank in your environment, running the code and ngrok to get the URL. Copy that URL and create your webhook. When given the key, create the environment variable (or use a .env file) and run formpost.js again.