N8N におけるカスタマイズ可能なブランディングチャットボックス

中級

これはSupport Chatbot, Multimodal AI分野の自動化ワークフローで、7個のノードを含みます。主にWebhook, Agent, RespondToWebhook, LmChatDeepSeek, MemoryBufferWindowなどのノードを使用。 DeepSeek ベースの AI チャットボットの展開(ブランドカスタマイズ対応)

前提条件
  • HTTP Webhookエンドポイント(n8nが自動生成)
ワークフロープレビュー
ノード接続関係を可視化、ズームとパンをサポート
ワークフローをエクスポート
以下のJSON設定をn8nにインポートして、このワークフローを使用できます
{
  "id": "xvm6EO9Wn6VnNpEi",
  "meta": {
    "instanceId": "50631c03cbd88440965b74e5a58aada5437cbc43e90372b516e36154908ad374",
    "templateCredsSetupCompleted": true
  },
  "name": "Brandable Custom Chatbox for N8N",
  "tags": [],
  "nodes": [
    {
      "id": "e9dd1163-099f-4939-996d-b4c711f6b3fd",
      "name": "Webhook (POST)",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -576,
        32
      ],
      "webhookId": "1a05e652-773a-40f2-ae60-92a875111c68",
      "parameters": {
        "path": "brand-bot",
        "options": {},
        "httpMethod": "POST",
        "responseMode": "responseNode"
      },
      "typeVersion": 1
    },
    {
      "id": "9ae0e1e1-536c-42e8-aff2-e2e5e7d03772",
      "name": "Webhook への応答",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        48,
        32
      ],
      "parameters": {
        "options": {
          "responseHeaders": {
            "entries": [
              {
                "name": "Content-Type",
                "value": "application/json"
              },
              {
                "name": "Access-Control-Allow-Origin",
                "value": "*"
              },
              {
                "name": "Access-Control-Allow-Headers",
                "value": "Content-Type, x-api-key"
              },
              {
                "name": "Access-Control-Allow-Methods",
                "value": "POST, OPTIONS"
              }
            ]
          }
        }
      },
      "typeVersion": 1
    },
    {
      "id": "38c02528-87b3-43fd-b30b-e83c4b745df4",
      "name": "AI エージェント",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        -352,
        32
      ],
      "parameters": {
        "text": "={{ $json.body.message }}",
        "options": {},
        "promptType": "define"
      },
      "typeVersion": 2.1
    },
    {
      "id": "f41c4f4f-f24b-4625-8499-bd087a51e404",
      "name": "DeepSeek チャットモデル",
      "type": "@n8n/n8n-nodes-langchain.lmChatDeepSeek",
      "position": [
        -320,
        256
      ],
      "parameters": {
        "options": {}
      },
      "credentials": {
        "deepSeekApi": {
          "id": "Cbb13Z94ucK9d2bf",
          "name": "DeepSeek account"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "b0894788-2696-47d4-9305-5b44ff83b2f8",
      "name": "シンプルメモリ",
      "type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
      "position": [
        -192,
        256
      ],
      "parameters": {
        "sessionKey": "={{ $('Webhook (POST)').item.json.body.sessionId }}",
        "sessionIdType": "customKey"
      },
      "typeVersion": 1.3
    },
    {
      "id": "94fe64e1-fc32-4005-931b-b452f81252c7",
      "name": "付箋1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -272,
        -496
      ],
      "parameters": {
        "color": 5,
        "width": 864,
        "height": 480,
        "content": "[![Brandable Custom Chatbox for N8N](https://omerfayyaz.com/n8n-brandable-chatbox/n8n-brandable-chatbox-copy.jpg)](https://omerfayyaz.com/n8n-brandable-chatbox/index.html)"
      },
      "typeVersion": 1
    },
    {
      "id": "638705ab-22a1-419a-b450-b8d5609bcfa1",
      "name": "付箋",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -896,
        -496
      ],
      "parameters": {
        "width": 608,
        "height": 480,
        "content": "## Brandable Custom Chatbox for N8N\n**Follow along to add a custom branded chat widget to your webiste. [Implementation Details](https://omerfayyaz.com/n8n-brandable-chatbox/index.html)**\n\nThis template is perfect for **business owners, developers, and marketers** who want to add a professional, branded AI chatbot to their website. Whether you're running an e-commerce site, a SaaS platform, or a corporate website, this template gives you a fully customizable chat widget that integrates seamlessly with your brand.\n\nThe chat widget itself is a **vanilla JavaScript component** that you embed on your website. It features:\n- Customizable colors, branding, and positioning\n- Light/dark theme support\n- Mobile-responsive design\n- Local conversation history\n- Session management with expiration\n- WordPress plugin integration"
      },
      "typeVersion": 1
    }
  ],
  "active": false,
  "pinData": {},
  "settings": {
    "executionOrder": "v1"
  },
  "versionId": "b257a55e-a8ea-416a-90e2-a89782e63590",
  "connections": {
    "38c02528-87b3-43fd-b30b-e83c4b745df4": {
      "main": [
        [
          {
            "node": "9ae0e1e1-536c-42e8-aff2-e2e5e7d03772",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "b0894788-2696-47d4-9305-5b44ff83b2f8": {
      "ai_memory": [
        [
          {
            "node": "38c02528-87b3-43fd-b30b-e83c4b745df4",
            "type": "ai_memory",
            "index": 0
          }
        ]
      ]
    },
    "e9dd1163-099f-4939-996d-b4c711f6b3fd": {
      "main": [
        [
          {
            "node": "38c02528-87b3-43fd-b30b-e83c4b745df4",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "f41c4f4f-f24b-4625-8499-bd087a51e404": {
      "ai_languageModel": [
        [
          {
            "node": "38c02528-87b3-43fd-b30b-e83c4b745df4",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    }
  }
}
よくある質問

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

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

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

中級 - サポートチャットボット, マルチモーダルAI

有料ですか?

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

関連ワークフロー

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

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

外部リンク
n8n.ioで表示

このワークフローを共有

カテゴリー

カテゴリー: 34