Konvertieren Sie Marker.io-visualisierte Fehlerberichte in Zendesk-Support-Tickets mit technischem Kontext
Dies ist ein Ticket Management, Multimodal AI-Bereich Automatisierungsworkflow mit 7 Nodes. Hauptsächlich werden Code, Webhook, HttpRequest und andere Nodes verwendet. Konvertieren Sie visuelle Fehlerberichte von Marker.io in Zendesk-Supporttickets mit technischem Kontext
- •HTTP Webhook-Endpunkt (wird von n8n automatisch generiert)
- •Möglicherweise sind Ziel-API-Anmeldedaten erforderlich
Verwendete Nodes (7)
Kategorie
{
"meta": {
"instanceId": "b8d4a47d3554c1f7fcd3ee16a413d67d707f3769dee6d5380a7d25c6b616c836"
},
"nodes": [
{
"id": "912f522b-6e2f-4c8d-9271-173a6b0ed780",
"name": "Webhook",
"type": "n8n-nodes-base.webhook",
"position": [
300,
-120
],
"webhookId": "a1bfef52-25c9-4a7d-916f-87c0ca195305",
"parameters": {
"path": "a1bfef52-25c9-4a7d-916f-87c0ca195305",
"options": {},
"httpMethod": "POST"
},
"typeVersion": 2
},
{
"id": "9decf387-197b-4da6-9fd4-c01b19d031d3",
"name": "Marker.io-Daten formatieren",
"type": "n8n-nodes-base.code",
"position": [
520,
-120
],
"parameters": {
"jsCode": "// Extract data from Marker.io webhook\nconst data = $input.first().json.body.data;\n\n// Format the conversation message\nconst issueTitle = data.title;\nconst issueDescription = data.description;\nconst markerId = data.markerId;\nconst priority = data.priority;\nconst issueType = data.issueType.name;\nconst publicUrl = data.publicUrl;\nconst privateUrl = data.privateUrl;\nconst dueDate = data.dueDate;\nconst browser = `${data.browser.name} ${data.browser.version}`;\nconst os = `${data.operatingSystem.family} ${data.operatingSystem.version}`;\nconst website = data.website.url;\nconst contextString = data.contextString;\n\n// Create formatted message body with Marker.io ticket link\nconst messageBody = `${issueTitle}\n${issueDescription}`;\n\n// Create formatted message body with Marker.io ticket link\nconst noteBody = `🐛 **New Issue Reported via Marker.io**\n\n**Issue:** ${issueTitle}\n**ID:** ${markerId}\n**Type:** ${issueType}\n**Priority:** ${priority}\n**Due Date:** ${dueDate ? new Date(dueDate).toLocaleDateString() : 'Not set'}\n\n**Description:**\n${issueDescription}\n\n**Technical Details:**\n• Browser: ${browser}\n• OS: ${os}\n• Website: ${website}\n• Context: ${contextString}\n\n**Marker.io Links:**\n• 🔗 [View Issue](${publicUrl})\n\n**Custom Data:**\n${Object.entries(data.customData || {}).map(([key, value]) => `• ${key}: ${value}`).join('\\n')}`;\n\nreturn [{\n json: {\n reporterEmail: data.reporter.email,\n reporterName: data.reporter.name,\n messageTitle: data.title,\n messageBody: messageBody,\n nodeBody: noteBody,\n issueId: data.id,\n markerId: markerId,\n priority: priority,\n issueType: issueType,\n publicUrl: publicUrl,\n privateUrl: privateUrl,\n projectId: data.project.id,\n reporterRole: data.reporter.role,\n }\n}];"
},
"typeVersion": 2
},
{
"id": "2dba9246-37f2-4c47-a09e-9d2cacbf28ae",
"name": "Benutzer erstellen/aktualisieren",
"type": "n8n-nodes-base.httpRequest",
"position": [
740,
-120
],
"parameters": {
"url": "https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/users/create_or_update.json",
"method": "POST",
"options": {},
"sendBody": true,
"authentication": "predefinedCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "user",
"value": "={{ { \"name\": $json.reporterName, \"email\": $json.reporterEmail, \"role\": $json.reporterRole } }}"
}
]
},
"nodeCredentialType": "zendeskApi"
},
"typeVersion": 4.2,
"continueOnFail": true
},
{
"id": "857bb007-3ada-4a0e-bd8b-7e30c2b228c8",
"name": "Ticket erstellen",
"type": "n8n-nodes-base.httpRequest",
"position": [
960,
-120
],
"parameters": {
"url": "https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/tickets.json",
"method": "POST",
"options": {},
"sendBody": true,
"authentication": "predefinedCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "ticket",
"value": "={{ {\n \"subject\": $('Format Marker.io Data').item.json.messageTitle,\n \"comment\": {\n \"body\": $('Format Marker.io Data').item.json.messageBody\n },\n \"requester\": {\n \"email\": $('Format Marker.io Data').item.json.reporterEmail,\n \"name\": $('Format Marker.io Data').item.json.reporterName\n },\n \"priority\": $('Format Marker.io Data').item.json.priority,\n \"tags\": [\"marker-io\", $('Format Marker.io Data').item.json.issueType],\n \"custom_fields\": [\n {\n \"id\": 123456,\n \"value\": $('Format Marker.io Data').item.json.markerId\n }\n ]\n} }}"
}
]
},
"nodeCredentialType": "zendeskApi"
},
"typeVersion": 4.2
},
{
"id": "ce5b6b09-9d82-4d0b-8a1c-fcbafa4e97d6",
"name": "Internen Kommentar hinzufügen",
"type": "n8n-nodes-base.httpRequest",
"position": [
1180,
-120
],
"parameters": {
"url": "=https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/tickets/{{ $json.ticket.id }}.json",
"method": "PUT",
"options": {},
"sendBody": true,
"authentication": "predefinedCredentialType",
"bodyParameters": {
"parameters": [
{
"name": "ticket",
"value": "={{ {\n \"comment\": {\n \"body\": $('Format Marker.io Data').item.json.nodeBody,\n \"public\": false\n }\n} }}"
}
]
},
"nodeCredentialType": "zendeskApi"
},
"typeVersion": 4.2
},
{
"id": "974302df-baf6-4fed-a2a8-26b702a522a0",
"name": "Notiz2",
"type": "n8n-nodes-base.stickyNote",
"position": [
-540,
-740
],
"parameters": {
"width": 700,
"height": 2160,
"content": "# Marker.io to Zendesk Integration\n\n**Automatically create Zendesk tickets with full technical context when your team receives new Marker.io issues**\n\n## 🎯 What this template does\nThis workflow creates a seamless bridge between Marker.io and Zendesk, your customer support platform. Every issue submitted through Marker.io's widget automatically becomes a trackable ticket in Zendesk, complete with technical details and visual context. Centralizing customer issues in Zendesk helps your support agents continue the conversation right where they work every day.\n\nWhen an issue is reported, the workflow:\n- Creates or updates the reporter as a Zendesk user\n- Opens a new ticket with all issue details\n- Adds a comprehensive internal comment with technical metadata\n- Preserves all screenshots, browser info, and custom data\n- Automatically tags tickets for easy filtering\n\n## ✨ Benefits\n- **Zero manual entry** - All bug details transfer automatically\n- **Instant visibility** - Support agents see issues immediately \n- **Rich context** - Technical details preserved for developers\n- **Better collaboration** - Single source of truth for bugs\n- **Faster resolution** - No time wasted gathering information\n- **Smart organization** - Auto-tagging for efficient triage\n\n## 💡 Use Cases\n- **Product Teams**: Streamline bug triage without switching tools\n- **Support Teams**: Get technical context for customer-reported issues\n- **Development Teams**: Access browser info, console logs, and network logs directly from support tickets\n\n## 🔧 How it works\n1. **N8N Webhook receives** Marker.io issue data\n2. **Format and extract** relevant information from the payload\n3. **Create/update user** in Zendesk with reporter details\n4. **Create ticket** with the title and issue description\n5. **Add internal comment** with screenshot, full technical context and Marker.io links for the support agent\n\nThe result is a perfectly organized support ticket that your team can act on immediately, with all the context they need to reproduce and resolve the issue.\n\n## 📋 Prerequisites\n- **Marker.io account** with webhook capabilities\n- **Zendesk account** with API access\n- **Zendesk API token** with appropriate permissions\n\n## 🚀 Setup Instructions\n1. **Import this workflow** into your n8n instance\n\n2. **Configure the Webhook**:\n - Copy the test/production webhook URL after saving\n - Add to Marker.io: Workspace Settings → Webhooks → Create webhook\n - Select \"Issue Created\" as the trigger event\n\n3. **Set up Zendesk credentials**:\n - Generate an API token from Zendesk Admin Center → Apps and integrations → APIs → Zendesk API\n - Add credentials to all three HTTP Request nodes\n - Update your subdomain in the URLs (replace `[REPLACE_SUBDOMAIN]` with your subdomain)\n\n4. **Customize fields** (optional):\n - Update the custom field ID in \"Create Ticket\" node if you want to store Marker ID\n - Modify tags to match your workflow\n - Adjust priority mapping if needed\n\n5. **Test the integration**:\n - Create a test issue in Marker.io\n - Verify the ticket appears in Zendesk\n - Check that all data transfers correctly\n\n## 📊 Data Captured\n\n### Customer-facing ticket includes:\n- Issue title (as subject)\n- Description (as ticket body)\n\n### Internal comment includes:\n- 🆔 Marker ID\n- 📊 Priority level and issue type\n- 📅 Due date (if set)\n- 🖥️ Browser and OS details\n- 🤓 Developer console & network logs\n- 🌐 Website URL where issue occurred\n- 🔗 Direct link to Marker.io issue\n- 📦 Any custom data fields\n\n[→ Read more about Marker.io webhook events](https://help.marker.io/en/articles/3738778-webhook-notifications)"
},
"typeVersion": 1
},
{
"id": "a821b1b9-2fba-408e-bb55-04ae69cd02e4",
"name": "Notiz3",
"type": "n8n-nodes-base.stickyNote",
"position": [
280,
240
],
"parameters": {
"color": 5,
"width": 440,
"height": 620,
"content": "\n## 🚨 Troubleshooting\n\n**Webhook not triggering:**\n- Verify webhook URL is correct in Marker.io\n- Check that \"Issue Created\" event is selected\n- Test with Marker.io's webhook tester\n\n**User creation failing:**\n- Ensure Zendesk API token has user management permissions\n- Check email format in reporter data\n- Verify subdomain is correct in URLs\n\n**Ticket not appearing:**\n- Check API token has ticket creation permissions\n- Verify required fields are populated\n- Review Zendesk audit logs for errors\n\n**Internal comment missing:**\n- Ensure ticket was created successfully first\n- Verify API token permissions\n- Check that ticket ID is being passed correctly\n\n**Custom field not updating:**\n- Verify custom field ID is correct\n- Ensure field is active and visible to agents\n- Check field type matches the data format"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"912f522b-6e2f-4c8d-9271-173a6b0ed780": {
"main": [
[
{
"node": "9decf387-197b-4da6-9fd4-c01b19d031d3",
"type": "main",
"index": 0
}
]
]
},
"857bb007-3ada-4a0e-bd8b-7e30c2b228c8": {
"main": [
[
{
"node": "ce5b6b09-9d82-4d0b-8a1c-fcbafa4e97d6",
"type": "main",
"index": 0
}
]
]
},
"2dba9246-37f2-4c47-a09e-9d2cacbf28ae": {
"main": [
[
{
"node": "857bb007-3ada-4a0e-bd8b-7e30c2b228c8",
"type": "main",
"index": 0
}
]
]
},
"9decf387-197b-4da6-9fd4-c01b19d031d3": {
"main": [
[
{
"node": "2dba9246-37f2-4c47-a09e-9d2cacbf28ae",
"type": "main",
"index": 0
}
]
]
}
}
}Wie verwende ich diesen Workflow?
Kopieren Sie den obigen JSON-Code, erstellen Sie einen neuen Workflow in Ihrer n8n-Instanz und wählen Sie "Aus JSON importieren". Fügen Sie die Konfiguration ein und passen Sie die Anmeldedaten nach Bedarf an.
Für welche Szenarien ist dieser Workflow geeignet?
Fortgeschritten - Ticketverwaltung, Multimodales KI
Ist es kostenpflichtig?
Dieser Workflow ist völlig kostenlos. Beachten Sie jedoch, dass Drittanbieterdienste (wie OpenAI API), die im Workflow verwendet werden, möglicherweise kostenpflichtig sind.
Verwandte Workflows
Marker.io
@markerioMarker.io is a visual feedback and bug reporting tool primarily used by web development and design teams. It allows users to capture screenshots, annotate them with comments and drawings, and then send them directly to project management or issue tracking tools like Jira, Trello, GitHub, or Asana.
Diesen Workflow teilen