Cuadro de chat personalizable y con marca de N8N
Este es unSupport Chatbot, Multimodal AIflujo de automatización del dominio deautomatización que contiene 7 nodos.Utiliza principalmente nodos como Webhook, Agent, RespondToWebhook, LmChatDeepSeek, MemoryBufferWindow. Implementar un chatbot de sitio web basado en IA de DeepSeek con soporte para marca personalizada
- •Punto final de HTTP Webhook (n8n generará automáticamente)
Nodos utilizados (7)
Categoría
{
"id": "xvm6EO9Wn6VnNpEi",
"meta": {
"instanceId": "50631c03cbd88440965b74e5a58aada5437cbc43e90372b516e36154908ad374",
"templateCredsSetupCompleted": true
},
"name": "Brandable Custom Chatbox for N8N",
"tags": [],
"nodes": [
{
"id": "e9dd1163-099f-4939-996d-b4c711f6b3fd",
"name": "Disparador 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": "Responder a Disparador 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": "Agentee de IA",
"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": "Modelo de Chat 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": "Memoria Simple",
"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": "Nota Adhesiva1",
"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": "Nota Adhesiva",
"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": {
"Agente de IA": {
"main": [
[
{
"node": "Responder a Webhook",
"type": "main",
"index": 0
}
]
]
},
"b0894788-2696-47d4-9305-5b44ff83b2f8": {
"ai_memory": [
[
{
"node": "Agente de IA",
"type": "ai_memory",
"index": 0
}
]
]
},
"Webhook (POST)": {
"main": [
[
{
"node": "Agente de IA",
"type": "main",
"index": 0
}
]
]
},
"f41c4f4f-f24b-4625-8499-bd087a51e404": {
"ai_languageModel": [
[
{
"node": "Agente de IA",
"type": "ai_languageModel",
"index": 0
}
]
]
}
}
}¿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 - Chatbot de soporte, 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.
Flujos de trabajo relacionados recomendados
Muhammad Omer Fayyaz
@omerfayyazCompartir este flujo de trabajo