Cuadro de chat personalizable y con marca de N8N

Intermedio

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

Requisitos previos
  • Punto final de HTTP Webhook (n8n generará automáticamente)
Vista previa del flujo de trabajo
Visualización de las conexiones entre nodos, con soporte para zoom y panorámica
Exportar flujo de trabajo
Copie la siguiente configuración JSON en n8n para importar y usar este flujo de trabajo
{
  "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": "[![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": "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
          }
        ]
      ]
    }
  }
}
Preguntas frecuentes

¿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.

Información del flujo de trabajo
Nivel de dificultad
Intermedio
Número de nodos7
Categoría2
Tipos de nodos6
Descripción de la dificultad

Adecuado para usuarios con experiencia intermedia, flujos de trabajo de complejidad media con 6-15 nodos

Enlaces externos
Ver en n8n.io

Compartir este flujo de trabajo

Categorías

Categorías: 34