To set up a webhook, follow these simple steps:

Step 1: Navigate to CommerceHub Settings: Go to the CommerceHub

A screenshot of a computer

Description automatically generated 


Step 2: Choose New Webhook, there is another button next to New Webhook i.e. Clone Webhook that allows users to clone an existing webhook. This is useful when you need to trigger a similar webhook but want to send it to a different destination URL.
 

 

Step 3: Name Webhook: Enter the Webhook Name

A screenshot of a computer

Description automatically generated



Step 4: . Entity Type: Choose the Entity you want to trigger the webhook, such as “Order” or “Product”

A screenshot of a computer

Description automatically generated 


Step 5: Select Event Type: Choose the Event you want to trigger the webhook, such as “OrderCreated” or “ProductCreated” as per your requirements.

A screenshot of a computer

Description automatically generated


Step 6: Update Target Type based on the endpoint requirements:

REST API: Sends data to a REST API endpoint. Supported HTTP methods include GET, POST, PUT, PATCH, DELETE, and more.
Azure Queue: Pushes messages to an Azure Queue.



Step 7: Select the Method Type based on the endpoint to which the payload will be posted


A screenshot of a computer

Description automatically generated

 


Step 8: Select the Auth Type based on the authentication supported by Endpoint defined and accordingly enter the credentials

 
A screenshot of a computer

Description automatically generated 


Step 9: Update the Custom Header if required by the destination by endpoint

 
A screenshot of a computer

Description automatically generated


 

Step 10 Select Channel: Pick the channel for which this webhook will be triggered, such as Store or Web.


A screenshot of a computer

Description automatically generated


 

Step 11: Choose Protocol and update URL: Select the protocol and update the destination url.


A screenshot of a computer

Description automatically generated



Step 12: Define the Message Format and Template: Choose between JSON or XML, and in case of Json set up the message template using DotLiquid placeholders to include dynamic data. For all list of variables please check the sheet Webhook Variables List.xlsx

Below is a better explanation how to create the webhook template:

  • Structure: Start with the structure you need, such as a JSON object with fields like id, total_price, phone, email, etc., and nested objects like customer.
  • Use Placeholders: Add placeholders using {{ }} to represent dynamic data. For example:

{
 "id": "{{Id}}",

"total_price": {{GrandTotal}},

"phone": "{{UserMobileNo}}",

"email": "{{UserEmail}}",

"currency": "{{CurrencyCode}}",

"customer": {

"id": "{{UserId}}",

"first_name": "{{FirstName}}",

"last_name": "{{LastName}}"}
 }

  • Add Logic (Optional): Use basic DotLiquid logic like if statements to include fields conditionally:

{% if GrandTotal > 0 %}

   "total_price": {{GrandTotal}},

{% endif %}

  • Test and Validate: Ensure the output is valid JSON and placeholders are replaced with actual data.

 

 Key Points: 

  • Correct Naming: Make sure placeholders match available data fields from the List of Variables in the sheet.
  • Valid JSON: Maintain proper structure and avoid quotes for numeric fields.
  • Logic Control: Use if statements for conditional fields.

 

Step 13: Save and Test: Once all fields are set, Submit the webhook configuration and trigger the event for example place a test order and see if the webhook was triggered against the Event.