How to use Webhook

Introduction

Webhooks are a powerful tool for extending the functionality of Observely boards. They work by enabling external services to send HTTP POST requests to a unique URL associated with each webhook you create within Observely. The POST requests encapsulate JSON data, which Observely can process to take actions based on the content received. This feature provides the ability to respond in real-time to events taking place outside the Observely application, enriching the versatility of your workflows and operations.

How to send data to Webhook

When you create a new webhook in our application, you will be provided with a unique URL. This URL is designed to accept HTTP POST requests. The data you send to this URL must be in JSON format.

Below are examples of how you can send data to a webhook using JavaScript and cURL.

JavaScript Example

const webhook_url = "https://api.observely.app/webhook/r/uuid/token";
const data = {
  name: "John Doe",
  contact: "johndoe@observely.app",
  message: "Hello, world!"
};

fetch(webhook_url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch((error) => {
    console.error('Error:', error);
  });

cURL Example

curl -X POST https://api.observely.app/webhook/r/uuid/token \
  -H "Content-Type: application/json" \
  -d '{
    "name": "John Doe",
    "contact": "johndoe@observely.app",
    "message": "Hello, world!"
  }'

How to display data

In our application, we use HandlebarsJS to format and display the data received from webhooks. HandlebarsJS allows you to insert data from JSON objects into HTML templates. You can also use custom CSS to style how your data is displayed. You can change the color, font, size, layout, and more to make the data presentation fit your needs. Here is an example of a HandlebarsJS template with CSS that displays the data from the examples above:

<div class="text-gray-700 text-base">
  <p>Name: {{name}}</p>
  <p>Contact: {{contact}}</p>
  <p>Message: {{message}}</p>
</div>