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": "[](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
Google GeminiとWHMCSを基盤とした仮想ホスティングAIカスタマーサポートチャットソリューション
Webhook
Agent
Http Request Tool
+
Webhook
Agent
Http Request Tool
15 ノードMuhammad Omer Fayyaz
AI RAG検索拡張
WHMCS を使用したドメイン利用可能チェック - テンプレート
Google Gemini と WHMCS を使用したドメイン詳細確認チャットボット
Webhook
Agent
Http Request Tool
+
Webhook
Agent
Http Request Tool
8 ノードMuhammad Omer Fayyaz
AIチャットボット
カスタマーサポート
GPT-4とSupabaseを統合したAI駆動のEコマースカスタマーサポートチャットボット
Code
Switch
Webhook
+
Code
Switch
Webhook
27 ノードSehar Nazeer
サポートチャットボット
歯科医院の受付係
Google Calendar、AI アシスタント、メール通知を使った歯科予約の自動化
If
Code
Gmail
+
If
Code
Gmail
14 ノードMd Sabirul Islam
サポートチャットボット
AI症状チェックと医師推薦
Ollama AIとWhatsAppで医療症状分析と医師の推奨
If
Code
Webhook
+
If
Code
Webhook
15 ノードOneclick AI Squad
サポートチャットボット
AI駆動の食品注文処理システム、Facebook Messenger、Googleスプレッドシート、カレンダーとの統合
AI駆動の食品注文処理システム、Facebook Messenger、Googleスプレッドシート、カレンダーとの統合
If
Code
Webhook
+
If
Code
Webhook
26 ノードHans Wilhelm Radam
リードナーチャリング