action.skip
Docs / Dashboard / Webhooks / Async examples

Webhook examples

As we said, webhooks can help with many scenarios. 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.
  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.
  4. Send a RocketChat notification when the contact form was submitted.
  5. Trigger AWS Lambda serverless function when entry is changed.

Note

If you are new in webhooks, read the Flotiq 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 dashboard:

  1. Go to your site settings.
  2. In the General -> Webhook menu find a Preview webhook URL:

In the Flotiq 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:

Check the result

After the Create, Update, Delete action on the Product, Gatsby Cloud Preview will be triggered automatically.

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

Prerequisites: We assume, that you have Blog Post Content Type Definition in Flotiq.

In the Gatsby Cloud dashboard:

  1. Go to your site settings.
  2. In the General -> Webhook menu find a Builds webhook URL:

In the Flotiq 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 Blog Post and save the webhook:

Check the result

Now, the Gatsby Build Production webhook button will be available in the Edit Blog Post form.

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

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

Prerequisites: We assume, that you have Blog Post Content Type Definition in Flotiq.

In the Netlify 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 dashboard:

  1. Go to the Webhooks page and click Add new webhook.
  2. Name the webhook (e.g. Netlify Build) and paste obtained URL as a webhook URL.
  3. As a trigger, choose Custom action on the Blog Post and save the webhook:

Check the result

Now, the Netlify Build webhook button will be available in the Edit Blog Post form:

After clicking the Netlify Build button in Flotiq, the Netlify build will be triggered:

Note

Choosing actions Create, Update, Delete, the build will be triggered automatically. The button Netlify Build 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:

  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):

    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 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:

Note

As the next step, we recommend creating the Contact Form with Flotiq Forms. 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) the RocketChat notification will be triggered:

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 code for you.
  2. Copy the endpoint URL that represents your service, returned by serverless deploy command:
  3. In the Flotiq 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:

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. that allows you to track the API Keys usage, throttle the requests or use a quota for your applications.

Register to create your first webhook