Introduction to Webhooks
Webhooks are automated messages triggered by specific events within apps. Think of them as digital couriers, delivering a message (or payload) to a designated address (URL). They act as bridges, connecting different applications and facilitating real-time data sharing.
The Mechanics of Webhooks
At its core, a webhook operates by making an HTTP request to a specified URL. This URL, known as the webhook endpoint, must be public and belongs to the receiving system. When an event occurs in one system, the webhook sends relevant data to the endpoint of another system, ensuring seamless integration.
Why Choose Marker.io's Webhooks?
Marker.io enhances the power of webhooks, making website feedback collection straightforward and efficient. By integrating with Webhooks, you can:
Directly funnel website feedback into your preferred project management tools and issue trackers.
Save significant developer time and resources.
How to use Marker.io with Webhooks
Add a project within app.marker.io and select Webhooks
Choose a name for your project and provide the URL of the endpoint.
Head over to Marker.io > Add project.
Choose a project name
Select the website you want to report feedback from
Select the Webhooks integration.
Paste your newly created webhook endpoint. Click Create Project.
Request and payload
When feedback is submitted, Marker.io dispatches a POST request with a JSON payload to your designated endpoint. This payload contains the feedback details. Here is an example:
{
"issue": {
"title": "Issue Title",
"description": "test 01",
"screenshotUrl": "https://img.marker.io/s/67a1f0f34368c5d73c714994/0?code=eyJhbGciOiJIUzkpXVCJ9.eyJ0YXJnZXRS",
"type": "bug",
"priority": "",
"assignee": null,
"dueDate": "",
"createdAt": "2025-02-04T10:50:27.090Z",
"publicUrl": "https://app.marker.io/i/67a1f0f34368c5d73c714996?advanced=1",
"consoleUrl": "https://app.marker.io/i/67a1f0f34368c5d73c714996?advanced=1&activePane=console",
"network": {
"detailsSuccess": 7,
"detailsFailed": 3,
"summary": "7 successful"
}
},
"reporter": {
"id": "60fc6ceae9a66946f2f9a88d",
"name": "Amber Amberson",
"email": "amber@agencyyard.com"
},
"website": {
"url": "https://clientyard.com/",
"pageTitle": "Marker.io Demo",
"domain": "clientyard.com"
},
"context": {
"contextString": "Captured in Chrome 132.0.0.0, 1336 x 761 viewport, @2.200000047683716x pixel ratio, 110% zoom, OS X 14.6.1, desktop device",
"screenSize": {
"width": 1470,
"height": 956,
"pixelRatio": 2.200000047683716
},
"operatingSystem": {
"family": "OS X",
"version": "14.6.1"
},
"browser": {
"name": "Chrome",
"version": "132.0.0.0",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36"
},
"viewport": {
"width": 1336,
"height": 761
},
"zoom": {
"zoomFactor": 1.1
},
"browserStackLaunchUrl": null
},
"destination": {
"name": "Webhook Test",
"id": "67a1f0d18a42333314edc7a5"
},
"attachments": []
}
Note: Hidden fields within the payload will be assigned a null value.
Testing Your Integration
To ensure your webhook integration is functioning correctly:
Navigate to your project settings.
Select 'Webhook'.
Click on "Send sample issue" to dispatch a test request to your endpoint.
Security Measures
For enhanced security, Marker.io includes a signature with each request, ensuring data integrity and authenticity.
'Content-type': 'application/json',
'X-Hub-Signature': [YOUR SIGNATURE TOKEN],
Not receiving webhooks?
We're using this website internally to test if webhooks are correctly sending https://webhook.site/ . You might want to have a look first to see if the issue comes from Marker.io or your integration.
Cloudflare Bot Flight Mode issue
Some customers have mentioned that when the Bot Flight Mode is enabled, they are not receiving webhooks anymore.
We recommend to disable Bot Flight Mode in your Cloudflare settings to ensure you're receiving our webhooks properly.
With this guide, you can leverage the full potential of Marker.io's Webhooks integration, ensuring a seamless feedback collection and integration process.