Convertir informes de errores visuales de Marker.io en tickets de soporte de Zendesk con contexto técnico

Intermedio

Este es unTicket Management, Multimodal AIflujo de automatización del dominio deautomatización que contiene 7 nodos.Utiliza principalmente nodos como Code, Webhook, HttpRequest. Convertir informes visuales de errores de Marker.io en tickets de soporte de Zendesk con contexto técnico

Requisitos previos
  • Punto final de HTTP Webhook (n8n generará automáticamente)
  • Pueden requerirse credenciales de autenticación para la API de destino
Vista previa del flujo de trabajo
Visualización de las conexiones entre nodos, con soporte para zoom y panorámica
Exportar flujo de trabajo
Copie la siguiente configuración JSON en n8n para importar y usar este flujo de trabajo
{
  "meta": {
    "instanceId": "b8d4a47d3554c1f7fcd3ee16a413d67d707f3769dee6d5380a7d25c6b616c836"
  },
  "nodes": [
    {
      "id": "912f522b-6e2f-4c8d-9271-173a6b0ed780",
      "name": "Disparador 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": "Formatear datos de Marker.io",
      "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": "Crear/Actualizar usuario",
      "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": "Crear ticket",
      "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": "Agregar comentario interno",
      "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": "Nota adhesiva2",
      "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": "Nota adhesiva3",
      "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": {
    "Webhook": {
      "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
          }
        ]
      ]
    }
  }
}
Preguntas frecuentes

¿Cómo usar este flujo de trabajo?

Copie el código de configuración JSON de arriba, cree un nuevo flujo de trabajo en su instancia de n8n y seleccione "Importar desde JSON", pegue la configuración y luego modifique la configuración de credenciales según sea necesario.

¿En qué escenarios es adecuado este flujo de trabajo?

Intermedio - Gestión de tickets, IA Multimodal

¿Es de pago?

Este flujo de trabajo es completamente gratuito, puede importarlo y usarlo directamente. Sin embargo, tenga en cuenta que los servicios de terceros utilizados en el flujo de trabajo (como la API de OpenAI) pueden requerir un pago por su cuenta.

Información del flujo de trabajo
Nivel de dificultad
Intermedio
Número de nodos7
Categoría2
Tipos de nodos4
Descripción de la dificultad

Adecuado para usuarios con experiencia intermedia, flujos de trabajo de complejidad media con 6-15 nodos

Autor
Marker.io

Marker.io

@markerio

Marker.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.

Enlaces externos
Ver en n8n.io

Compartir este flujo de trabajo

Categorías

Categorías: 34