Con estos fragmentos de código podrás agregar el CHAT de N8N con tu agente de IA en tu sitio web de WordPress o cualquier sitio web.
Código para la cabecera del sitio web:
Debes insertar este código dentro de las etiquetas <head></head> de tu sitio web, para hacerlo puedes ayudarte con algún plugin.
Dentro del código debes cambiar el ➡️WEBHOOK_URL_PRODUCTION⬅️ por tu URL de producción de N8N en el nodo de chat.
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
webhookUrl: '➡️WEBHOOK_URL_PRODUCTION⬅️',
webhookConfig: {
method: 'POST',
headers: {}
},
target: '#n8n-chat',
mode: 'window',
chatInputKey: 'chatInput',
chatSessionKey: 'sessionId',
metadata: {},
showWelcomeScreen: false,
defaultLanguage: 'en',
initialMessages: [
'¿Qué duda tienes sobre el Plugin?'
],
i18n: {
en: {
title: 'Soluciona tus dudas',
subtitle: "Asistente inmediato creado con IA",
footer: '',
getStarted: 'Nueva conversación',
inputPlaceholder: 'Escribe aquí...',
},
},
});
</script>Puedes utilizar algún plugin para insertar código en la cabecera del sitio web, a continuación dejaré algunos ejemplo:
Código de estilo CSS para mejorar la apariencia del chat
Puedes agregarlo dirigiéndote a WordPress – Apariencia – Personalizar – Custom CSS.
También puedes agregar un plugin para insertar CSS a un sitio web, ejemplo:
Luego agregas este código:
/* =========================================================
N8N Chat – Hoja de estilos breve y documentada por secciones
Edita primero la sección "TEMA (variables)" para cambios rápidos
========================================================= */
/* =========================
1) RESETS Y AJUSTES BASE
========================= */
#n8n-chat .chat-layout .chat-header h1,
#n8n-chat .chat-layout .chat-header p { margin: 0; }
#n8n-chat .chat-layout .chat-header { gap: 0 !important; }
#n8n-chat .chat-layout .chat-footer { border-top: 1px solid #ededed; }
#n8n-chat textarea { box-shadow: none; }
/* =========================
2) TEMA (VARIABLES)
Cambia colores, radios y tamaños globales del widget
========================= */
#n8n-chat {
/* -- Colores principales / botón flotante -- */
--chat--color-primary: #1f93ff;
--chat--toggle--background: #1f93ff;
--chat--toggle--hover--background: #157ad8;
--chat--toggle--active--background: #157ad8;
--chat--color-primary-shade-50: #157ad8;
--chat--color-primary-shade-100: #157ad8;
/* -- Cabecera y superficies -- */
--chat--header--background: #ffffff;
--chat--header--color: #333333;
--chat--body--background: #f9f9fb;
--chat--footer--background: #f9f9fb;
/* -- Burbujas y bordes -- */
--chat--border-radius: 1rem;
--chat--message--user--background: #1f93ff;
--chat--message--user--color: #ffffff;
--chat--message--bot--border: 1px solid #ededed;
/* -- Tamaños y tipografía -- */
--chat--toggle--size: 55px;
--chat--heading--font-size: 1.1em;
--chat--message--font-size: 0.9rem;
}