To set up a webhook, follow these simple steps:
Step 1: Navigate to CommerceHub Settings: Go to the CommerceHub
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
Step 4: . Entity Type: Choose the Entity you want to trigger the webhook, such as “Order” or “Product”
Step 5: Select Event Type: Choose the Event you want to trigger the webhook, such as “OrderCreated” or “ProductCreated” as per your requirements.
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
Step 8: Select the Auth Type based on the authentication supported by Endpoint defined and accordingly enter the credentials
Step 9: Update the Custom Header if required by the destination by endpoint
Step 10 Select Channel: Pick the channel for which this webhook will be triggered, such as Store or Web.
Step 11: Choose Protocol and update URL: Select the protocol and update the destination url.
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.