Cómo insertar un chatbot en WordPress: guía completa paso a paso

El método más simple y confiable es pegar el script de inserción de tu chatbot directamente en tu sitio de WordPress. Funciona con cualquier plataforma de chatbot y no requiere un plugin.

Paso 1: Inicia sesión en tu plataforma de chatbot (Chatloom, Tidio, Crisp o la que estés usando) y copia el script de inserción. Típicamente parece una etiqueta <script> con unas pocas líneas de configuración.

Paso 2: En el panel de administración de WordPress, navega a Apariencia > Editor de archivos del tema. Selecciona el archivo footer.php de tu tema en la lista de archivos de la derecha.

Paso 3: Pega el script de inserción justo antes de la etiqueta de cierre </body>. Si tu tema usa wp_footer(), pégalo inmediatamente antes de esa llamada de función.

Paso 4: Haz clic en "Actualizar archivo" y visita tu sitio. El widget del chatbot debería aparecer de inmediato.

Nota importante: Si usas un tema hijo (lo cual se recomienda), añade el fragmento al footer.php de tu tema hijo. Esto evita que tus cambios se sobreescriban durante las actualizaciones del tema. Si tu tema hijo no tiene un footer.php, crea uno o usa el Método 2 en su lugar.

Este método carga el script de forma asíncrona, por lo que no afectará la velocidad de carga de tu página.

Si editar los archivos del tema te resulta incómodo, un plugin ofrece una alternativa más segura. Esta es también la mejor opción si actualizas temas frecuentemente o usas un host de WordPress administrado que restringe la edición de archivos.

WPCode (antes Insert Headers and Footers) es la opción más popular con más de 2 millones de instalaciones activas. Así se usa:

Paso 1: Instala WPCode desde Plugins > Añadir nuevo en tu administración de WordPress. Busca "WPCode" y haz clic en Instalar, luego en Activar.

Paso 2: Ve a Fragmentos de código > Encabezado y pie de página en la barra lateral izquierda.

Paso 3: Pega tu script de inserción del chatbot en la sección Pie de página. El pie de página es preferible porque asegura que el script se cargue después del contenido de tu página, manteniendo tu sitio rápido.

Paso 4: Haz clic en "Guardar cambios". Tu chatbot ya está en vivo.

La ventaja de este enfoque es que tu código de inserción sobrevive a los cambios y actualizaciones del tema. También puedes desactivarlo fácilmente sin tener que buscar en los archivos del tema.

Una cosa a tener en cuenta: si estás usando un plugin de caché (WP Super Cache, W3 Total Cache, LiteSpeed Cache), limpia tu caché después de añadir el fragmento para que el chatbot aparezca para todos los visitantes de inmediato.

A veces quieres el chatbot solo en páginas específicas (tu página de precios, página de contacto o páginas de producto) en lugar de en todo el sitio. Tanto Elementor como Gutenberg hacen esto sencillo.

Con Gutenberg (editor de bloques): Edita la página donde quieres el chatbot. Añade un bloque de HTML personalizado. Pega tu script de inserción en el bloque. Actualiza la página. El chatbot aparecerá solo en esa página específica.

Con Elementor: Edita la página en Elementor. Arrastra un widget HTML al fondo de la página. Pega el script de inserción. Guarda y publica.

Carga condicional con código: Si te sientes cómodo con una pequeña modificación de código, puedes hacer condicional el script de todo el sitio. En tu footer.php o fragmento de WPCode, envuelve el script con las etiquetas condicionales de WordPress.

Por ejemplo, usa is_page() para cargar solo en páginas específicas, is_product() para páginas de producto de WooCommerce, o is_front_page() solo para la página de inicio.

Esto mantiene un único punto de inserción pero te da control granular sobre dónde aparece el chatbot. La carga condicional también mejora el rendimiento ya que las páginas que no necesitan el chatbot no cargarán el script en absoluto.

La mayoría de plataformas de chatbot, incluyendo Chatloom, también ofrecen segmentación por página en la configuración del dashboard, lo que puede ser más simple que los condicionales a nivel de código.

Si estás usando WooCommerce, tu chatbot puede hacer más que responder preguntas genéricas. Con la configuración correcta, se convierte en un asesor de productos y herramienta de soporte que entiende tu catálogo.

Entrenamiento con datos de producto: Exporta tu catálogo de productos de WooCommerce (Productos > Todos los productos > Exportar) como CSV. Súbelo a la base de conocimiento de tu chatbot. La IA puede entonces responder preguntas sobre productos específicos, precios, disponibilidad y especificaciones.

La ubicación estratégica importa. En las páginas de producto, el chatbot debe enfocarse en preguntas específicas del producto. En la página del carrito, en envío y devoluciones. En la página de checkout, en pagos y seguridad. Configura el mensaje de bienvenida de tu chatbot para que coincida con el contexto de la página.

La integración del estado del pedido es el siguiente nivel. Si tu plataforma de chatbot ofrece acceso a la API, puedes conectarla a la API de pedidos de WooCommerce para que los clientes puedan preguntar "¿Dónde está mi pedido?" y obtener información de seguimiento en tiempo real. Esto solo puede desviar un número significativo de tickets de soporte.

Las recomendaciones de producto funcionan bien a través de chatbots. Cuando un visitante pregunta sobre un producto, el bot puede sugerir artículos complementarios basándose en las relaciones de tus productos. Esto impulsa tanto el valor promedio del pedido como la satisfacción del cliente.

Para tiendas WooCommerce, mantén tu base de conocimiento de producto actualizada cada vez que añadas o cambies productos. La información de producto obsoleta es peor que ninguna información.

La mayoría de instalaciones de chatbot en WordPress son fluidas, pero estos son los problemas que más frecuentemente aparecen.

El chatbot no aparece después de añadir el script: Limpia primero todos los cachés: el plugin de caché, el caché de CDN (Cloudflare, etc.) y el caché del navegador. Si estás usando un constructor de páginas, asegúrate de que no esté eliminando la etiqueta de script. Algunos plugins de seguridad también bloquean los scripts inline; revisa los registros de tu plugin de seguridad.

El chatbot aparece en el admin pero no en el sitio en vivo: Esto suele significar que el script se añadió al archivo de plantilla equivocado. Verifica que está en footer.php (no en header.php ni en una plantilla de página). También comprueba que tu tema realmente usa wp_footer().

El chatbot entra en conflicto con otros plugins: Si el chatbot deja de funcionar después de la activación, busca errores de JavaScript en la consola de herramientas de desarrollo de tu navegador (F12 > pestaña Consola). Los culpables comunes son los conflictos de versión de jQuery, los plugins agresivos de optimización de scripts y otras herramientas de chat en vivo cargadas simultáneamente. Desactiva otros plugins relacionados con el chat antes de añadir un nuevo chatbot.

Problemas de rendimiento: Los widgets de chatbot modernos se cargan de forma asíncrona y típicamente añaden peso mínimo a la carga de la página. Si estás viendo problemas de rendimiento, verifica que el script usa los atributos async o defer. La mayoría de plataformas, incluyendo Chatloom, lo manejan por defecto.

La Política de Seguridad de Contenido (CSP) bloquea el widget: Algunas configuraciones de WordPress con seguridad reforzada usan encabezados CSP que bloquean scripts de terceros. Necesitarás incluir en la lista blanca el dominio de tu plataforma de chatbot en tu configuración de CSP.