Marker.io から Intercom への不具合レポートの自動化(完全な技術のコンテキスト付き)

中級

これはTicket Management, Multimodal AI分野の自動化ワークフローで、7個のノードを含みます。主にCode, Webhook, HttpRequestなどのノードを使用。 Marker.ioからIntercomへのバグレポートの自動化(完全な技術のコンテキストを含む)

前提条件
  • HTTP Webhookエンドポイント(n8nが自動生成)
  • ターゲットAPIの認証情報が必要な場合あり
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
  "meta": {
    "instanceId": "b8d4a47d3554c1f7fcd3ee16a413d67d707f3769dee6d5380a7d25c6b616c836"
  },
  "nodes": [
    {
      "id": "1422c63e-e65c-4db9-a1a5-ea6badc8299c",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "position": [
        0,
        0
      ],
      "webhookId": "e373c60f-8530-4368-a486-fcc41f410b6c",
      "parameters": {
        "path": "e373c60f-8530-4368-a486-fcc41f410b6c",
        "options": {},
        "httpMethod": "POST"
      },
      "typeVersion": 2
    },
    {
      "id": "344e0ae2-f317-4db0-9156-2eb9be1ff117",
      "name": "Marker.io データのフォーマット",
      "type": "n8n-nodes-base.code",
      "position": [
        220,
        0
      ],
      "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    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  }\n}];"
      },
      "typeVersion": 2
    },
    {
      "id": "c6e59c93-8830-403a-adee-b80f4434359d",
      "name": "コンタクトの作成/更新",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        440,
        0
      ],
      "parameters": {
        "url": "https://api.intercom.io/contacts",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "role",
              "value": "user"
            },
            {
              "name": "email",
              "value": "={{ $json.reporterEmail }}"
            },
            {
              "name": "name",
              "value": "={{ $json.reporterName }}"
            }
          ]
        },
        "nodeCredentialType": "intercomApi"
      },
      "credentials": {
        "intercomApi": {
          "id": "",
          "name": ""
        }
      },
      "typeVersion": 4.2,
      "continueOnFail": true
    },
    {
      "id": "ac375334-4e47-47b2-a6dd-ae95ff5a2039",
      "name": "カンバセの作成",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        660,
        0
      ],
      "parameters": {
        "url": "https://api.intercom.io/conversations",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "from",
              "value": "={{ { \"type\": \"user\", \"email\": $('Format Marker.io Data').item.json.reporterEmail } }}"
            },
            {
              "name": "body",
              "value": "={{ $('Format Marker.io Data').item.json.messageBody }}"
            },
            {
              "name": "message_type",
              "value": "inapp"
            }
          ]
        },
        "nodeCredentialType": "intercomApi"
      },
      "credentials": {
        "intercomApi": {
          "id": "",
          "name": ""
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "ac1a3de3-022a-4aff-b330-6b8c912ecb3b",
      "name": "内部メモを追加",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        880,
        0
      ],
      "parameters": {
        "url": "=https://api.intercom.io/conversations/{{ $json.conversation_id }}/parts",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "jsonHeaders": "[\n            {\n              \"name\": \"Accept\",\n              \"value\": \"application/json\"\n            },\n            {\n              \"name\": \"Intercom-Version\",\n              \"value\": \"2.13\"\n            }\n          ]",
        "sendHeaders": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "message_type",
              "value": "note"
            },
            {
              "name": "body",
              "value": "={{ $('Format Marker.io Data').item.json.nodeBody }}"
            },
            {
              "name": "admin_id",
              "value": ""
            }
          ]
        },
        "specifyHeaders": "json",
        "nodeCredentialType": "intercomApi"
      },
      "credentials": {
        "intercomApi": {
          "id": "",
          "name": ""
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "e66ca32c-c7c6-459a-a276-d4e3199a589b",
      "name": "付箋",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -820,
        -640
      ],
      "parameters": {
        "width": 700,
        "height": 2220,
        "content": "# Marker.io to Intercom integration\n\n**Automatically create Intercom conversations with full technical context when your team receive new Marker.io issues**\n\n## 🎯 What this template does\n\nThis workflow creates a seamless bridge between Marker.io and Intercom, your customer support platform. Every issue submitted through Marker.io's widget automatically becomes a trackable conversation in Intercom, complete with technical details and visual context. Centralizing customers issues in Intercom helps your support agents continue the conversation right where they work every day.\n\nWhen a bug is reported, the workflow:\n- Creates or updates the reporter as an Intercom contact\n- Opens a new conversation with the reporter and the all issue details\n- Adds a comprehensive internal note with technical metadata\n- Preserves all screenshots, browser info, and custom data\n\n## ✨ Benefits\n\n- **Zero manual entry** - All bug details transfer automatically\n- **Instant visibility** - Support agents sees 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\n## 💡 Use Cases\n\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 the support tickets\n\n## 🔧 How it works\n\n1. **N8N Webhook receives** Marker.io bug report data\n2. **Format and extract** relevant information from the payload\n3. **Create/update contact** in Intercom with reporter details\n4. **Start conversation** with the Title and Bug description\n5. **Add internal note** with 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\n- **Marker.io account** with webhook capabilities\n- **Intercom account** with API access\n- **Intercom Access Token** with appropriate permissions\n- **Admin ID** from your Intercom workspace\n\n## 🚀 Setup Instructions\n\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 Intercom credentials**:\n   - Create an Intercom app or use existing API credentials from the Intercom Develper Hub\n   - Add credentials to both HTTP Request nodes\n   - Update the `admin_id` in the \"Add Internal Note\" node with the id of one of your intercom admin\n\n4. **Test the integration**:\n   - Create a test issue in Marker.io\n   - Verify the conversation appears in Intercom\n   - Check that all data transfers correctly\n\n\n## 📊 Data Captured\n\n### Customer-facing message includes:\n- Issue title\n- Description\n\n### Internal note includes:\n- 🆔 Marker ID\n- 📊 Priority level and issue type\n- 📅 Due date (if set)\n- 🖥️ Browser and OS details\n- 🤓 Develper 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 our webhook events](https://help.marker.io/en/articles/3738778-webhook-notifications)"
      },
      "typeVersion": 1
    },
    {
      "id": "8cb11d36-ef6b-498a-9c78-272b592357b4",
      "name": "付箋1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -40,
        540
      ],
      "parameters": {
        "color": 5,
        "width": 440,
        "height": 420,
        "content": "## 🚨 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**Contact creation failing:**\n- Ensure Intercom API token has contact write permissions\n- Check email format in reporter data\n\n**Missing internal note:**\n- Verify admin_id is correct (find in Intercom settings)\n- Ensure API token belongs to the admin user\n\n**Data not appearing:**\n- Check webhook payload structure hasn't changed\n- Verify all field paths in the Format node"
      },
      "typeVersion": 1
    }
  ],
  "pinData": {},
  "connections": {
    "1422c63e-e65c-4db9-a1a5-ea6badc8299c": {
      "main": [
        [
          {
            "node": "344e0ae2-f317-4db0-9156-2eb9be1ff117",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "ac375334-4e47-47b2-a6dd-ae95ff5a2039": {
      "main": [
        [
          {
            "node": "ac1a3de3-022a-4aff-b330-6b8c912ecb3b",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "c6e59c93-8830-403a-adee-b80f4434359d": {
      "main": [
        [
          {
            "node": "ac375334-4e47-47b2-a6dd-ae95ff5a2039",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "344e0ae2-f317-4db0-9156-2eb9be1ff117": {
      "main": [
        [
          {
            "node": "c6e59c93-8830-403a-adee-b80f4434359d",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
よくある質問

このワークフローの使い方は?

上記のJSON設定コードをコピーし、n8nインスタンスで新しいワークフローを作成して「JSONからインポート」を選択、設定を貼り付けて認証情報を必要に応じて変更してください。

このワークフローはどんな場面に適していますか?

中級 - チケット管理, マルチモーダルAI

有料ですか?

このワークフローは完全無料です。ただし、ワークフローで使用するサードパーティサービス(OpenAI APIなど)は別途料金が発生する場合があります。

ワークフロー情報
難易度
中級
ノード数7
カテゴリー2
ノードタイプ4
難易度説明

経験者向け、6-15ノードの中程度の複雑さのワークフロー

作成者
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.

外部リンク
n8n.ioで表示

このワークフローを共有

カテゴリー

カテゴリー: 34