WordPress impulsa más del 40% de la web, así que hay bastantes probabilidades de que tu sitio funcione con él. Agregar un chatbot a WordPress es sencillo. No necesitas un desarrollador, un plugin personalizado ni experiencia programando. Esta guía recorre tres métodos, desde el enfoque más simple con un plugin hasta una instalación a nivel de tema, y cubre los detalles que suelen complicar a la gente.
Antes de empezar
Necesitas tener dos cosas listas antes de agregar el chatbot a tu sitio de WordPress.
1. Una cuenta de Agentkit con un chatbot entrenado.
Si todavía no hiciste esto, regístrate gratis y crea tu primer chatbot. Entrénalo con el contenido de tu sitio web, páginas de preguntas frecuentes, documentación o cualquier otro material sobre el que pregunten tus visitantes. Consulta la guía de entrenamiento para más detalles.
2. Copia el código generado.
Abre tu chatbot en Agentkit, entra en Canales > Incrustar en sitio web, selecciona Widget de chat y pulsa Copiar código. Pega las dos etiquetas de script completas en WordPress, sin cambiar la URL ni el ID. El código actual incluye un pequeño cargador y la etiqueta del widget.
Activa el canal Widget de chat antes de probar el sitio público.
Comparación de métodos
| Método | Dificultad | Requiere plugin | Se aplica a | Sobrevive a actualizaciones del tema | Ideal para |
|---|---|---|---|---|---|
| Plugin (WPCode) | Más fácil | Sí (gratis) | Todas las páginas | Sí | Usuarios sin conocimientos técnicos |
| Bloque HTML personalizado | Fácil | No | Páginas específicas | Sí | Chatbot por página |
| Pie de página del tema (footer.php) | Moderada | No | Todas las páginas | No (se necesita un tema hijo) | Desarrolladores |
Elige el método que mejor se ajuste a tu nivel de comodidad. Se recomienda el enfoque con plugin para la mayoría de los usuarios porque es el más simple y el más resistente a las actualizaciones del tema.
Método 1: usar un plugin (recomendado)
Este es el método más fácil. Instalas un plugin gratuito que te permite agregar fragmentos de código a tu sitio sin editar los archivos del tema.
Usar WPCode (Insert Headers and Footers)
WPCode es un plugin gratuito de WordPress con más de 2 millones de instalaciones. Te permite agregar código al encabezado o al pie de página de tu sitio sin tocar los archivos del tema.
Paso 1: instala el plugin
- En tu panel de administración de WordPress, ve a Plugins y luego a Añadir nuevo.
- Busca "WPCode".
- Haz clic en Instalar ahora y luego en Activar.
Paso 2: agrega el fragmento del chatbot
- En la barra lateral de administración de WordPress, ve a Code Snippets y luego a Header & Footer.
- Busca la sección Footer.
- Pega las dos etiquetas de Canales > Incrustar en sitio web en el campo Footer.
- Haz clic en Save Changes.
Eso es todo. El widget del chatbot ahora aparecerá en cada página de tu sitio de WordPress.
Paso 3: verifica que funciona
- Abre tu sitio web en una nueva pestaña del navegador (no el panel de administración de WordPress).
- Deberías ver la burbuja de chat en la esquina inferior derecha.
- Haz clic en ella y envía un mensaje de prueba para confirmar que responde correctamente.
WPCode antes se llamaba Insert Headers and Footers de WPBeginner. Es el mismo plugin, no otra opción de instalación. La guía de WPCode muestra dónde pegar el código en Footer.
Controlar en qué páginas se muestra el chatbot
Para unas pocas páginas, usa el bloque HTML de abajo si tu cuenta puede publicar scripts. WPCode también permite reglas condicionales, pero algunas reglas de páginas y entradas requieren una licencia de pago. Comprueba las reglas de tu versión.
Método 2: bloque HTML personalizado (páginas específicas)
Si quieres el chatbot solo en una o dos páginas y no quieres instalar un plugin, puedes usar el editor de bloques de WordPress.
Paso 1: edita la página donde quieres el chatbot.
Paso 2: agrega un bloque HTML personalizado al final del contenido de la página.
Paso 3: pega las dos etiquetas generadas en el bloque.
Paso 4: actualiza o publica la página.
Después de publicar, comprueba ambas etiquetas en el código fuente renderizado. WordPress puede quitarlas de cuentas sin unfiltered_html, incluidas algunas funciones de usuario en Multisite. Si falta una, usa un plugin de pie de página permitido o consulta al administrador. WordPress explica esta restricción. En WordPress.com necesitas un plan que permita plugins y JavaScript personalizado.
Limitaciones de este método:
- Si quieres el chatbot en muchas páginas, esto se vuelve tedioso. Usa el método del plugin en su lugar.
Método 3: pie de página del tema (footer.php)
Este método agrega el chatbot a nivel del tema. Es el enfoque más directo, pero requiere editar archivos del tema.
Importante: si editas directamente el footer.php de tu tema, tus cambios se perderán cuando el tema se actualice. Usa un tema hijo para que el cambio sea permanente.
Con un tema hijo
Paso 1: si todavía no tienes un tema hijo, crea uno. La mayoría de los desarrolladores de temas ofrecen instrucciones. Como alternativa, usa el plugin "Child Theme Configurator".
Paso 2: en tu panel de administración de WordPress, ve a Apariencia y luego a Editor de archivos de temas.
Paso 3: selecciona tu tema hijo en el menú desplegable.
Paso 4: abre footer.php. Si no existe en tu tema hijo, créalo copiando el footer.php del tema padre.
Paso 5: busca </body> y pega el código generado completo justo antes.
Paso 6: guarda el archivo.
Sin un tema hijo (no recomendado)
Si editas directamente el footer.php del tema padre, sigue los mismos pasos, pero ten en cuenta que una actualización del tema sobrescribirá tus cambios. Si eliges esta opción, guarda una copia de tu footer.php modificado para poder volver a aplicarlo después de cada actualización.
Prueba tu instalación
Después de agregar el chatbot con cualquiera de los métodos, revisa esta lista de verificación.
Verificación básica
| Verificación | Cómo verificarlo | Resultado esperado |
|---|---|---|
| El widget aparece | Visita tu sitio en una nueva pestaña | Burbuja de chat visible en la esquina inferior derecha |
| El widget se abre | Haz clic en la burbuja de chat | La ventana de chat se abre con un saludo |
| El chatbot responde | Escribe una pregunta y envíala | Respuesta de IA basada en tus datos de entrenamiento |
| Visualización móvil | Abre el sitio en el teléfono o usa las herramientas de desarrollo del navegador | El widget es accesible y usable |
| Velocidad de carga de la página | Revisa la pestaña Network de las herramientas de desarrollo del navegador | El script del widget carga de forma asíncrona, sin bloquear |
Lista de verificación para limpiar la caché
La caché es la razón número uno por la que la gente agrega el script del chatbot y no lo ve en su sitio. Limpia las cachés en este orden:
- Plugin de caché de WordPress (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): ve a la configuración del plugin y purga todas las cachés.
- Caché a nivel de hosting (SiteGround, WP Engine, Cloudflare): busca una opción para purgar la caché en el panel de tu hosting.
- Caché de CDN (Cloudflare, StackPath, Fastly): si usas un CDN, purga también la caché ahí.
- Caché del navegador: abre tu sitio en una ventana de incógnito o privada para evitar la caché local del navegador.
Si el chatbot sigue sin aparecer después de limpiar todas las cachés, revisa la consola de desarrollador del navegador (F12 en computadoras de escritorio) en busca de errores de JavaScript.
Solución de problemas comunes
El chatbot no aparece
Causa: caché. Este es el problema más común. Sigue la lista de verificación de limpieza de caché anterior.
Causa: script bloqueado. Comprueba en la consola o en la pestaña Red del navegador el host real de la URL src generada. Si la política CSP lo bloquea, pide al administrador que permita ese host.
El chatbot aparece pero no responde
Causa: chatbot sin entrenar. Ve a tu panel de Agentkit y confirma que tu chatbot tenga datos de entrenamiento. Un chatbot sin entrenar no tiene de dónde sacar información.
Causa: ID de chatbot incorrecto. Verifica que el data-chatbot de tu código de incrustación coincida con el ID que se muestra en tu panel de Agentkit.
Causa: restricción de dominio. Si configuraste restricciones de dominio en los ajustes de tu chatbot, asegúrate de que el dominio de tu sitio de WordPress esté en la lista de dominios permitidos.
El chatbot entra en conflicto con otro plugin de chat
Si tienes activo otro plugin de chat en vivo o de chatbot (Tidio, Intercom, Drift, Crisp), los dos widgets pueden superponerse o interferir entre sí.
Soluciones:
- Elimina el otro plugin de chat si estás cambiando por completo a Agentkit.
- Si necesitas ambos, usa el método del bloque HTML personalizado de Agentkit para colocarlo solo en las páginas donde el otro plugin no esté activo.
- Ajusta la posición del widget en la configuración de tu panel de Agentkit si ambos necesitan coexistir.
Carga lenta de la página después de agregar el chatbot
El widget de Agentkit carga de forma asíncrona (el atributo async en la etiqueta de script), así que no debería bloquear el renderizado de tu página. Si notas lentitud:
- Confirma que el atributo
asyncesté presente en tu etiqueta de script. - Ejecuta una prueba de velocidad (Google PageSpeed Insights, GTmetrix) y revisa si el script de Agentkit aparece marcado.
- Comprueba si un plugin de rendimiento retrasa los scripts y permite la URL real del widget que aparece en Canales si hace falta.
Configura el chatbot para WordPress
Una vez que el chatbot esté activo en tu sitio de WordPress, considera estos pasos de configuración en tu panel de Agentkit.
Restricción de dominio
En Configuración de tu chatbot, establece el dominio permitido como el dominio de tu sitio de WordPress (por ejemplo, yourdomain.com). Esto evita que alguien copie tu código de incrustación y use tu chatbot en otro sitio.
Entrenamiento con el contenido de WordPress
La mejor fuente para entrenar es el contenido real de tu sitio web. En Agentkit, agrega la URL de tu sitio de WordPress como fuente de entrenamiento, y el rastreador indexará tus páginas automáticamente.
Enfoca tu entrenamiento en:
- Páginas de preguntas frecuentes o de base de conocimiento
- Páginas de productos o servicios
- Página de precios
- Página "Sobre nosotros"
- Documentación de soporte
- Entradas de blog que responden preguntas comunes
Evita entrenar con páginas de contenido escaso, páginas de inicio de sesión o páginas que requieren autenticación.
Para una guía completa de entrenamiento, consulta Cómo entrenar un chatbot con el contenido de tu sitio web.
Captura de leads
Activa la acción de captura de leads para recopilar correos electrónicos y nombres de los visitantes directamente en el chat. Los leads capturados aparecen en tu panel de Agentkit y se pueden enviar a tu CRM mediante Zapier o webhooks. Consulta la documentación de captura de leads para la configuración.
Documentación de integración específica de WordPress
Para las instrucciones de configuración más actuales y cualquier función específica de WordPress, consulta la documentación de integración con WordPress.
Resumen de la comparación de métodos
| Consideración | Plugin (WPCode) | Bloque HTML personalizado | Pie de página del tema |
|---|---|---|---|
| Habilidad técnica | Ninguna | Ninguna | PHP básico |
| Sobrevive a actualizaciones del tema | Sí | Sí | Solo con un tema hijo |
| Cobertura en todo el sitio | Sí | No (por página) | Sí |
| Dependencia de plugin | Sí (plugin gratuito) | No | No |
Para la mayoría de los usuarios de WordPress, el método del plugin es la mejor opción. Es rápido, seguro y te da la mayor flexibilidad sin poner en riesgo los archivos de tu tema.
Próximos pasos
Una vez que tu chatbot esté activo en WordPress, dedica unos minutos al Playground de Agentkit para probar las respuestas. Si el chatbot no responde bien sobre temas específicos, agrega más datos de entrenamiento para esas áreas. El Playground te permite iterar rápido sin necesidad de probar en tu sitio en vivo cada vez.
Después, explora la posibilidad de conectar tu chatbot con tus otras herramientas. La guía de integración cubre los flujos de trabajo de Zapier, los webhooks y la API REST para configuraciones más avanzadas.
No se requiere tarjeta de crédito.
