Flotiq Webhook examples
Tags: webhook, headlesscms, webdev, tutorial
Published: 2021-12-13 11:17:52

Webhooks are useful if you want to extend the system functionality or integrate quickly with other apps that fit your business process. You can enable or disable webhooks at any time without any effort.

Now, you can easily define webhooks with Flotiq.

Check out our examples and use them in your projects or treat them as a signpost for your work:

1. [Trigger a Gatsby preview when site content was changed.](https://flotiq.com/docs/panel/webhooks/examples/#1-trigger-a-gatsby-preview-when-site-content-was-changed)
2. [Trigger a Gatsby production build when a `Build production` button was clicked.](https://flotiq.com/docs/panel/webhooks/examples/#2-trigger-a-gatsby-production-build-when-a-build-production-button-was-clicked)
3. [Trigger a Netlify build when a `Build site` button was clicked.](https://flotiq.com/docs/panel/webhooks/examples/#3-trigger-a-netlify-build-when-a-build-site-button-was-clicked)
4. [Send a RocketChat notification when the contact form was submitted.](https://flotiq.com/docs/panel/webhooks/examples/#4-send-a-rocketchat-notification-when-the-contact-form-was-submitted)
5. [Trigger AWS Lambda serverless function when entry is changed.](https://flotiq.com/docs/panel/webhooks/examples/#5-trigger-aws-lambda-serverless-function-when-entry-is-changed)

> Note 
> If you are new in webhooks, read the [Flotiq Webhooks] (https://flotiq.com/docs/panel/webhooks/)introduction first.

## 1. Trigger a Gatsby preview when site content was changed

Prerequisites: We assume, that you have `Product` Content Type Definition in Flotiq.

In the [Gatsby Cloud](https://www.gatsbyjs.com/dashboard) dashboard:
 
Go to your site settings.
In the `General` -> `Webhook` menu find a `Preview` webhook URL: 
![gatsbydashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yi6qa44qi67wktz1qnx.png)

In the [Flotiq](https://editor.flotiq.com/) dashboard:

1. Go to the `Webhooks` page and click `Add new webhook`.
2. Name the webhook (e.g. `Gatsby Preview`) and paste obtained `Preview` URL as a webhook `URL`.
3. As a trigger, choose `Create`, `Update` and `Delete` actions on the `Product` and save the webhook: 
![flotiq dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhoj2eauu714li2vadvb.png)
 

### Check the result

After the `Create`, `Update`, `Delete` action on the `Product`, Gatsby Cloud Preview will be triggered automatically.
![gatsbywebhookpreview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po25dsqjj19o30m86cta.png)
 


## 2. Trigger a Gatsby production build when a Build production button was clicked

Prerequisites: We assume, that you have `Product` Content Type Definition in Flotiq.

In the [Gatsby Cloud](https://www.gatsbyjs.com/dashboard) dashboard:

1. Go to your site settings.
2. In the `General` -> `Webhook` menu find a `Builds` webhook URL: 
![gatsbydashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99yldmjqvdtljrew26kf.png)
 
In the [Flotiq](https://editor.flotiq.com/) dashboard:

1. Go to the `Webhooks` page and click `Add new webhook`.
2. Name the webhook (e.g. `Gatsby Build Production`) and paste obtained `Builds` URL as a webhook `URL`.
3. As a trigger, choose `Custom` action on the `Product` and save the webhook: 
![flotiqdashboardwebhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3nzv1hk1fe6q94eadwu.png)
 
### Check the result

Now, the `Gatsby Build Production` webhook button will be available in the Edit `Product` form.

![flotiqeditproductobject](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbqp44ua9l1ivy71tcl1.png)
 

After clicking the `Gatsby Build Production` button in Flotiq, the Gatsby Production build will be triggered:

![gatsbywebhooktrigger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4alt2vb44fh78byq66fw.png)
 

## 3. Trigger a Netlify build when a Build site button was clicked

Prerequisites: We assume, that you have `Product` Content Type Definition in Flotiq.

In the [Netlify](https://app.netlify.com/) dashboard:

1. Go to your site settings.
2. In the menu `Build & Deploy` -> `Continuous Deployment` find section `Build hooks`.
3. Add a new build hook (the name is up to you).
4. Click `Save`, and copy your custom hook URL (like `https://api.netlify.com/build_hooks/xxxxxx`):


In the [Flotiq](https://editor.flotiq.com/) dashboard:

1. Go to the `Webhooks` page and click `Add new webhook`.
2. Name the webhook (e.g. `Build Site`) and paste obtained URL as a webhook `URL`.
3. As a trigger, choose `Custom` action on the `Product` and save the webhook:
![flotiqnetlifywebhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg4olyewzo5882mitti2.png)
 

### Check the result

Now, the `Build Site` webhook button will be available in the Edit `Product` form:
![netlifywebhookflotiq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsq0c3kmbz72tzh5e5s6.png)
 

After clicking the `Build` Site button in Flotiq, the Netlify build will be triggered:
![netlifydashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pqsc5hupqypein9k6j7.png)
 
> Note
> Choosing actions `Create`, `Update`, `Delete`, the build will be triggered automatically. The button `Build Site` is visible only when you choose a `Custom` trigger.

## 4. Send a RocketChat notification when the contact form was submitted.

Prerequisites: We assume, that you have `Contact Form` Content Type Definition in Flotiq with the `message` attribute.

In the RocketChat dashboard:

1. Go to the `Administration` -> `Integrations`.
2. Click `Add new` integration.
3. Fill the form with the following values: 
![rocketchatwebhookintegration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26y5cwdjdjn6v6itwbme.png)
 
4. Make sure to check `Script enabled` and paste the code that transforms Flotiq Payload to required by RocketChat form (more in the [RocketChat docs](https://docs.rocket.chat/guides/administration/admin-panel/integrations#script-details)):

```
class Script {
  process_incoming_request({ request }) {
    return {
      content: {
        text: `New message: ${request.content.payload.message}`, // assuming your CTD have `message` field
       }
    };
  }
}
```
5. Save webhook and copy your Webhook URL.

In the [Flotiq](https://editor.flotiq.com/) dashboard:

1. Go to the `Webhooks` page and click `Add new` webhook.
2. Name the webhook (e.g. `Chat Notification`) and paste obtained `Webhook URL` as a webhook `URL`.
3. As a trigger, choose `Create` action on the `Contact form` and save the webhook: 
![rockechatwebhookflotiqdashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55ridmrz0z8xz8l2rxpk.png)
 
> Note
> As the next step, we recommend creating the Contact Form with [Flotiq Forms](https://flotiq.com/docs/panel/flotiq-forms-add-forms-to-websites/). It is an easy-to-use form generator, that adds customer input directly to your Content Objects.

### Check the result
After the `Create` action on the `Contact form` (or submitting Contact Form based on [Flotiq Forms](https://flotiq.com/docs/panel/flotiq-forms-add-forms-to-websites/)) the RocketChat notification will be triggered:

![rocketchatnotification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp7gi59391rqdv1lfj5y.png)
 

## 5. Trigger AWS Lambda serverless function when entry is changed

To integrate Flotiq Webhooks and AWS Lambda follow the steps below:

1. Set up AWS Lambda to receive HTTP requests. We prepared a simple [AWS Lambda webhook example](https://github.com/flotiq/aws-lambda-webhook-example) code for you.
2. Copy the `endpoint` URL that represents your service, returned by `serverless deploy` command: 
![awscommand](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fae7l4eensm4n61wmjg0.png)
 
3. In the [Flotiq](https://editor.flotiq.com/) dashboard go to the `Webhooks` page and click `Add new` webhook
4. Name the webhook (e.g. `Notify AWS Lambda`) and paste obtained `endpoint` URL as a webhook `URL`.
5. As a trigger, choose `Create`, `Update` and `Delete` action on the multiple Content Types: 
![flotiqwebhookdashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2n9wvrkl8vjpfh7iryt.png)
 
### Check the result
After any action on the Content Objects, you will be able to see logs in the AWS Lambda CloudWatch. Now you can use the received payload to implement your own business logic.



> Notes
> This is a simple example without authentication. You can add it by yourself or [set up API keys using AWS](https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-setup-api-key-with-console.html). that allows you to track the API Keys usage, throttle the requests or use a quota for your applications.

[Register in Flotiq to create your webhook](https://editor.flotiq.com/register.html)