Cómo Crear e Insertar un Chatbot con IA en WordPress y Elementor usando n8n y OpenAI/Claude (Sin Mensualidades)

Instalar un chatbot con Inteligencia Artificial en WordPress suele implicar dos malos caminos: instalar un plugin pesado que ralentiza la carga de tu sitio o pagar suscripciones mensuales de $49 a $150 USD en plataformas SaaS que cobran por cada conversación. Sin embargo, si utilizas n8n, puedes usar el paquete oficial @n8n/chat conectado a un nodo Chat Trigger y un AI Agent (con OpenAI, Claude o Gemini) para tener tu propio widget flotante de chat en WordPress y Elementor pagando únicamente centavos por consumo de API.

En este tutorial aprenderás cómo configurar el Chat Trigger en n8n, cómo protegerlo por dominio (CORS) y el snippet exacto en PHP/JavaScript para integrarlo en WordPress sin afectar tus métricas de velocidad y Core Web Vitals.

Paso 1: Configurar el nodo «Chat Trigger» en n8n

1. En tu lienzo de n8n, añade el nodo Chat Trigger.
2. Activa la opción Make Chat Publicly Available.
3. En Mode, selecciona Embedded Chat.
4. En Allowed Origins (CORS), escribe el dominio exacto de tu sitio WordPress (por ejemplo, https://tudominio.com) para impedir que terceros incrusten tu webhook en otras páginas.
5. Conecta la salida del Chat Trigger a un nodo AI Agent con su respectivo modelo de lenguaje y memoria de ventana, y copia la Webhook URL de producción.

Paso 2: Insertar el Widget @n8n/chat en WordPress mediante Código Limpio

En lugar de instalar plugins adicionales, añade este snippet en el plugin Code Snippets o en el archivo functions.php de tu tema hijo. Este código carga la hoja de estilos y el módulo ES oficial de @n8n/chat en el pie de página (wp_footer) con textos personalizados en español:

add_action('wp_footer', function () {
    ?>
    <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
    <style>
        :root {
            --chat--color-primary: #0A6D98;
            --chat--color-secondary: #111827;
            --chat--window--width: 380px;
            --chat--window--height: 560px;
        }
    </style>
    <script type="module">
        import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

        createChat({
            webhookUrl: 'https://tu-instancia-n8n.com/webhook/TU-WEBHOOK-ID/chat',
            mode: 'window',
            showWelcomeScreen: false,
            initialMessages: [
                '¡Hola! 👋 Soy el asistente virtual. ¿En qué puedo ayudarte hoy?'
            ],
            i18n: {
                en: {
                    title: 'Asistente en Línea',
                    subtitle: 'Respuesta inmediata con IA',
                    inputPlaceholder: 'Escribe tu consulta aquí...',
                    getStarted: 'Nueva conversación'
                }
            }
        });
    </script>
    <?php
}, 99);

Paso 3: Conectar tu Chatbot IA con los datos reales de tu WordPress o WooCommerce

Para que el chatbot no responda generalidades sino información exacta de tu negocio, en el nodo AI Agent de n8n puedes añadir como herramientas (Tools):

• Búsqueda en entradas y páginas de WordPress: Una herramienta HTTP Request que consulte https://tudominio.com/wp-json/wp/v2/search?search={{query}} (revisa nuestra guía completa de la API REST de WordPress).
• Consulta de catálogo y suscripciones en WooCommerce: Igual que explicamos en nuestra guía para crear un Agente de IA en WhatsApp con n8n y WooCommerce, el mismo flujo de n8n puede atender simultáneamente el chat web de tu página y tu canal de WhatsApp.
• Captura de leads hacia Elementor / CRM: Cuando el usuario deja su nombre y WhatsApp en el chat, n8n puede registrarlo en tu base de datos o disparar una plantilla de bienvenida por WhatsApp Cloud API.