We've introduced an add-on feature for our company users i.e., Webhooks. Now company users can revolutionize how they connect and integrate their data.
A) Permission:
We have introduced a new permission for webhooks with the name of 'Manage Webhooks'. This permission allows users to create, edit, and delete the webhook. Company owners can activate this permission for specific roles.
B) Creation of Webhook:
1. Go to settings from the navigation panel and select "Webhook" from the menu.
2. Click on "Add Webhook” and fill out all the required details:
→ The user must input the Webhook name.
→ URL: The endpoint where the data should be pushed.
→ Method: Below are available HTTP methods:
GET: This method is used to retrieve data on a server. POST: This method is used to create new resources.
PUT: This method is used to replace an existing resource with an updated version. PATCH: This method is used to update an existing resource.
DELETE: This method is used to remove data from a database.
→ Trigger event: Choose the trigger event as your requirement.
→ OAuth - Users need to select OAuth from the dropdown menu, which includes all the OAuth credentials created. This selection is optional; if the user prefers not to create an OAuth, they have the choice to skip this step.
(Note: For selecting OAuth while creating a webhook, you need to create an OAuth first.)
→ Request Headers - Key and Values
→Raw Data: In this, we have two cases:
1. If "Raw data" is enabled, the user will receive all the data related to that event.
2. If the "Raw data" toggle is disabled, the user will be able to select the parameters. The user has to specify the item and its ID, which helps in pushing the necessary data or data that the user wants to send.
→ The status of the webhook toggle will be off by default, but the user can turn on the toggle if desired. The user will be able to set the status accordingly.
Test: This is an optional step, by clicking this users will be able to test the webhook to verify whether the filled webhook data is accurate or not.
→ Click on "Save," and you are good to go!
C) Creation of OAuth
If no OAuth credentials have been created previously, there will be two call-to-action (CTA) buttons for creating OAuth. One will be positioned in the middle of the page, and the other will be located at the top right of the page.
1. Click on “Add OAuth”
2. Enter the required details including:
a. OAuth name
b. OAuth URL
c. Method
d. Add query parameters: client_id:, client_secret:, grant_type: authorization_code, code: {{generated_code}}
3. Once details are filled in, click “Save” and your OAuth will be saved.
D) Webhook Listing
1. On the listing, you can view all the necessary details of the webhook which include:
i. Webhook name
ii. Trigger event,
iii. Webhook URL
iv. Methods
v. Last sent time i.e., when the event was last triggered
vi. Last sent status i.e., the status of the last triggered event
vii. The status of the webhook whether it’s active or inactive.
2. You can also perform the following actions:
i. Edit the webhook settings.
ii. Duplicate/copy the webhook.
iii. Delete the webhook.
iv. View the history of the webhook to see how many events have been triggered.
E) How the events will be triggered
1. When a webhook with the method "POST" and the event "new contact" is created:
2. As a user:
→ I create a new contact on the contact page and save the information.
→ Upon saving the contact, the webhook associated with the method "POST" and the event "new contact" is triggered.
→ All data related to the new contact, including the saved information, is then pushed to the specified endpoint.
3. Users will be able to view the triggered events on the webhook listing page.
4. When we click on the "history" option, we will be redirected to the webhook history page. Here, we will be able to see the webhook history, including how many times the event has been triggered and how many times the event was successful or failed.
5. Triggered event: This will remain the same for a particular webhook.
6. Webhook URL: This will also remain the same in a particular webhook history.
7. Payload: The payload will include all the data sent during that triggered event.
8. Request header: Details of the request header associated with the event.
9. Status: The status of a particular event when it was triggered.
10. Actions: Users can resync if the status failed or if they want to trigger the same event again.