Cómo agregar un chatbot a WordPress (sin programar)

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. Tu etiqueta de script de incrustación.

Una vez que tu chatbot esté entrenado, ve a Configuración y luego a la página Incrustar de tu chatbot en el panel de Agentkit. Verás una etiqueta de script parecida a esta:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Copia este fragmento de código. Lo pegarás en WordPress usando uno de los tres métodos que se explican a continuación.

Comparación de métodos

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

1. En tu panel de administración de WordPress, ve a Plugins y luego a Añadir nuevo.
2. Busca "WPCode" (el nombre completo es WPCode - Insert Headers, Footers, and Code Snippets).
3. Haz clic en Instalar ahora y luego en Activar.

Paso 2: agrega el fragmento del chatbot

1. En la barra lateral de administración de WordPress, ve a Code Snippets y luego a Header & Footer.
2. Busca la sección Footer.
3. Pega la etiqueta de script de incrustación de Agentkit en el cuadro Footer.
4. 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

1. Abre tu sitio web en una nueva pestaña del navegador (no el panel de administración de WordPress).
2. Deberías ver la burbuja de chat en la esquina inferior derecha.
3. Haz clic en ella y envía un mensaje de prueba para confirmar que responde correctamente.

Usar Insert Headers and Footers (alternativa)

Si prefieres un plugin diferente, "Insert Headers and Footers" de WPBeginner funciona de la misma manera:

1. Instala y activa el plugin.
2. Ve a Ajustes y luego a Insert Headers and Footers.
3. Pega el script de incrustación en el cuadro Scripts in Footer.
4. Guarda.

Controlar en qué páginas se muestra el chatbot

Tanto WPCode como otros plugins similares admiten lógica condicional. Si solo quieres el chatbot en ciertas páginas:

1. En WPCode, en lugar de usar la sección Header & Footer, crea un nuevo Code Snippet.
2. Configura el tipo de código como "HTML Snippet".
3. Pega tu script de incrustación.
4. En Insertion, elige "Site Wide Footer".
5. En Smart Conditional Logic, agrega condiciones como:
   • La página es "Contact", "Support" o "Pricing"
   • El tipo de entrada es "Product"
   • La URL contiene "/help"
6. Guarda y activa el fragmento.

Esto te da un control preciso sin necesidad de crear varios chatbots.

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 tu script de incrustación de Agentkit en el bloque:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Paso 4: actualiza o publica la página.

El chatbot aparecerá solo en esa página específica. Repite el proceso en otras páginas según lo necesites.

Limitaciones de este método:

• El script se carga como parte del contenido de la página, así que puede tardar un poco más en cargar que si estuviera en el pie de página.
• Si quieres el chatbot en muchas páginas, esto se vuelve tedioso. Usa el método del plugin en su lugar.
• Algunos constructores de páginas (Elementor, Divi) pueden eliminar las etiquetas de script de los bloques HTML. Si eso ocurre, usa el método del plugin.

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 la etiqueta de cierre </body>. Pega el script de incrustación justo antes de ella:

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

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

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:

1. 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.
2. Caché a nivel de hosting (SiteGround, WP Engine, Cloudflare): busca una opción para purgar la caché en el panel de tu hosting.
3. Caché de CDN (Cloudflare, StackPath, Fastly): si usas un CDN, purga también la caché ahí.
4. 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: ubicación de la etiqueta de script. Asegúrate de que el script esté dentro de la etiqueta <body>, no en <head>. Algunos plugins de encabezado/pie de página colocan el código en <head> de forma predeterminada.

Causa: política de seguridad de contenido. Algunos plugins de seguridad agregan encabezados de política de seguridad de contenido (CSP) que bloquean scripts externos. Revisa si tu plugin de seguridad (Wordfence, Sucuri, iThemes Security) tiene configuración de CSP y agrega cdn.agentkit.ai a las fuentes de scripts permitidas.

Causa: conflicto con el constructor de páginas. Algunos constructores de páginas eliminan las etiquetas de script de las áreas de contenido. Usa el método del plugin (Método 1) en lugar del bloque HTML personalizado.

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:

1. Confirma que el atributo async esté presente en tu etiqueta de script.
2. Ejecuta una prueba de velocidad (Google PageSpeed Insights, GTmetrix) y revisa si el script de Agentkit aparece marcado. Los scripts asíncronos rara vez afectan las puntuaciones de rendimiento.
3. Si usas un plugin de rendimiento que retrasa JavaScript, agrega cdn.agentkit.ai a la lista de permitidos para evitar que interfiera con la carga del widget.

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. Si tu sitio usa renderizado con JavaScript, el rastreador basado en Firecrawl se encarga de eso.

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

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.

Crea tu chatbot gratis →

No se requiere tarjeta de crédito.