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": "Sample issue",
"description": "Sample description",
"screenshotUrl": "https://s3-eu-west-1.amazonaws.com/marker.emails/test-screenshot.png",
"type": "bug",
"priority": "medium",
"assignee": {
"id": "5c90ba2f41d340032590bc37",
"name": "Denis Hacquin",
"email": "denis@marker.io",
"role": "admin"
},
"dueDate": "2020-02-29T16:29:49.055Z",
"createdAt": "2020-02-24T16:29:49.143Z",
"publicUrl": "https://marker.io/i/1234",
"consoleUrl": "https://marker.io/i/1234?console=1"
},
"reporter": {
"id": "5c90ba2f41d340032590bc37",
"name": "Denis Hacquin",
"email": "denis@marker.io",
"role": "admin"
},
"website": {
"url": "https://marker.io/digital-agency",
"pageTitle": "Digital agency - Marker.io Bug Reporting Tool",
"domain": "marker.io"
},
"context": {
"contextString": "Captured in Chrome 79.0.3945.130, 1920 x 1080 viewport, @1x pixel ratio, 100% zoom, OS X 10.14.6",
"screenSize": {
"width": 1920,
"height": 1080,
"pixelRatio": 1
},
"operatingSystem": {
"family": "OS X",
"version": "10.14.6"
},
"browser": {
"name": "Chrome",
"version": "79.0.3945.130",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
},
"viewport": {
"width": 1920,
"height": 1080
},
"zoom": {
"zoomFactor": 1
},
"browserStackLaunchUrl": null
},
"customData": {
"product": "Banana",
"available": true,
"price": 1.23,
"stock": 131,
"brands": [
"The Organic Corp",
"ACME Fruits Inc"
]
},
"project": {
"name": "Client Project 1",
"id": "5e53f599c7d9b8ebd4da77d6"
}
}
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],
With this guide, you can leverage the full potential of Marker.io's Webhooks integration, ensuring a seamless feedback collection and integration process.