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": "Respond to 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 Chat Model",
"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": {
"AI Agent": {
"main": [
[
{
"node": "Respond to Webhook",
"type": "main",
"index": 0
}
]
]
},
"Simple Memory": {
"ai_memory": [
[
{
"node": "AI Agent",
"type": "ai_memory",
"index": 0
}
]
]
},
"Webhook (POST)": {
"main": [
[
{
"node": "AI Agent",
"type": "main",
"index": 0
}
]
]
},
"f41c4f4f-f24b-4625-8499-bd087a51e404": {
"ai_languageModel": [
[
{
"node": "AI Agent",
"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 기반 전자상거래 고객 지원 챗봇
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
리드 육성