Cómo instalar un chatbot de IA en WordPress paso a paso
Configuración de WordPress campo por campo con ubicación flotante e integrada, reglas de dominio exactas, una pregunta de prueba real y soluciones prácticas de caché.
Un chatbot de IA para WordPress requiere más que un plugin activado: se debe verificar el asistente correcto, el dominio autorizado, la ubicación y una respuesta real.
El plugin para WebChatAgent conecta WordPress sin editar archivos del tema. WordPress solo almacena el Chatbot ID y si el widget flotante está activo. El diseño, el conocimiento, las herramientas y el comportamiento de las respuestas se gestionan desde el panel de WebChatAgent.
Esta guía utiliza un sitio local desechable de WordPress llamado Northstar Support Demo y una cuenta de prueba de WebChatAgent en inglés (Light Mode). Instalaremos la versión 1.1.3 del plugin, conectaremos un asistente, publicaremos una página de chat integrado y verificaremos el resultado sin afectar un entorno de producción.
No des por finalizada la prueba solo con ver el botón de chat. El hostname debe estar autorizado, el asistente correcto debe responder y una pregunta respaldada por fuentes debe devolver el dato esperado.
Reproductor en dos clics que protege la privacidad
Cómo instalar un chatbot de IA en WordPress (paso a paso)
Instala un chatbot de IA en WordPress con el plugin oficial, ID de asistente, dominios permitidos, bloque o shortcode y pruebas reales.
El reproductor de YouTube permanece bloqueado hasta que pulsa Reproducir. Al cargarlo, su navegador se conecta a YouTube y puede transmitir datos técnicos a Google.
Abrir directamente en YouTubeQué obtendrá al final
- El plugin oficial instalado y activo
- El hostname exacto de WordPress autorizado en WebChatAgent
- El Chatbot ID correcto guardado con el widget flotante habilitado
- Una página de chat integrado creada con el bloque o shortcode
- Una verificación reproducible de respuestas reales y errores de dominio
Antes de empezar
- Acceso de administrador en WordPress
- Un chatbot de WebChatAgent con una fuente indexada
- Los hostnames exactos de producción y staging
- Una pregunta respaldada por fuentes con una respuesta esperada conocida
- Permisos para vaciar cachés de WordPress, maquetadores visuales y CDN
Un solo ID conecta dos plataformas
WebChatAgent gestiona la configuración del asistente. El plugin de WordPress inserta los scripts y pasa el Chatbot ID seleccionado a las ubicaciones flotante e integrada.
Allowed websites es la barrera de seguridad. Un ID correcto puede mostrar un error de configuración o no cargar el widget si falta el hostname de la página.
01–11
Configuración paso a paso
Buscar y activar el plugin oficial
Confirma el nombre del plugin, el autor y la versión antes de activarlo.
En el panel de administración de WordPress, ve a Plugins → Add Plugin y busca “WebChatAgent”. Selecciona AI Chatbot & Live Chat – WebChatAgent de WebChatAgent. Instálalo desde el directorio y luego haz clic en Activate.
La prueba controlada utilizó la versión 1.1.3 en WordPress 7.0. Es preferible usar una versión compatible más reciente si el directorio la ofrece; no subas un archivo ZIP desconocido desde sitios de descarga de terceros.
Confirmar el plugin activo y el nuevo menú
WordPress confirma la activación y añade WebChatAgent al menú principal.
Vuelve a Installed Plugins. La fila de WebChatAgent debe mostrar Deactivate, no Activate, y debe aparecer el aviso verde de “Plugin activated”. El siguiente paso es acceder al menú principal de WebChatAgent en la barra lateral izquierda.
Si la activación falla, revisa los requisitos de WordPress y PHP indicados en el directorio de plugins antes de modificar cualquier ajuste en WebChatAgent.
Copiar el Chatbot ID completo del asistente correspondiente
El UUID determina qué asistente se mostrará en WordPress.
Abre el asistente correspondiente en el panel en inglés de WebChatAgent. Haz clic en Chatbot actions → Copy chatbot ID, o copia el UUID que aparece en Widget Integration. El ID también es el último segmento de la URL del panel.
Comprueba el nombre del asistente antes de copiarlo. El ejemplo verificado utiliza Northstar Support; pegar por error el ID de un bot de ventas puede parecer correcto técnicamente pero generará respuestas equivocadas.
Autorizar cada hostname exacto de WordPress
Los hostnames de producción, www y staging se configuran por separado.
En WebChatAgent, abre Settings y añade los hostnames exactos en Allowed websites. Introduce los hostnames sin `https://`, puertos ni rutas de página, y presiona Enter tras cada uno.
Por ejemplo, `www.northstar-demo.example` no autoriza automáticamente a `support.northstar-demo.example`. Añade solo los hosts que realmente cargarán el widget. En la prueba reproducimos intencionadamente el error de dominio del plugin antes de corregir la lista de autorizados.
Abrir la pestaña General del plugin de WordPress
Solo se guardan dos valores localmente para el widget flotante.
Selecciona WebChatAgent en el menú principal de WordPress. La pestaña General explica que WordPress almacena el Chatbot ID y el interruptor del widget flotante. Las demás pestañas reflejan valores de solo lectura procedentes del panel.
Antes de conectar, la página muestra un enlace para crear o abrir una cuenta de WebChatAgent y un área de vista previa. Mantén abierto el panel de WebChatAgent en otra pestaña para comparar fácilmente el nombre y el ID del asistente.
Pegar el ID y activar el widget flotante
Guarda un UUID completo y sin espacios.
Pega el UUID copiado en Chatbot ID, activa “Enable the chat widget on your site” y haz clic en Save Settings. Este interruptor controla únicamente el botón flotante; las integraciones embebidas funcionan de forma independiente.
No escribas el ID a mano desde una captura de pantalla. Cópialo directamente y comprueba los primeros y últimos cuatro caracteres antes de guardar.
Comprobar el estado guardado y prestar atención a los errores
Que esté guardado localmente no significa que esté autorizado por WebChatAgent.
Un aviso verde de “Settings saved successfully” solo confirma que WordPress guardó los datos. Si la configuración del chatbot no se puede cargar, la misma pantalla indicará que debes verificar Allowed Domains y Chatbot ID.
Este es un fallo controlado muy útil. Vuelve a verificar el hostname exacto, el subdominio `www` o de staging, y el UUID completo. Guarda primero en WebChatAgent y luego recarga WordPress. No desactives la restricción de dominios para ocultar el problema.
Elegir bloque de Gutenberg o shortcode para el chat integrado
Ambos métodos reutilizan el ID guardado a menos que se defina uno específico para la página.
Abre la pestaña Inline Embed. Usa el bloque WebChatAgent Inline Chat en Gutenberg, o `[webchatagent_inline]` en el Editor Clásico, un bloque de shortcode, maquetadores visuales o widgets de texto.
Es posible asignar un bot específico para una página con `[webchatagent_inline chatbot-id="OTHER_UUID"]`. Documenta bien estas excepciones, ya que pueden explicar por qué el chat integrado y el botón flotante muestran asistentes diferentes.
Añadir el chat integrado a una página real
La página de ejemplo utiliza un bloque de Shortcode estándar.
Crea una página llamada “Ask Northstar Support”, añade el bloque de Shortcode de WordPress y pega `[webchatagent_inline]`. Si usas el bloque nativo de WebChatAgent, busca “WebChatAgent Inline Chat” y deja el campo de ID opcional vacío para reutilizar la configuración de General.
Deja suficiente espacio vertical alrededor del elemento insertado y revisa las vistas previas para tablet y móvil en el editor antes de publicar.
Publicar y registrar la URL exacta de prueba
Una página publicada te proporciona un destino de prueba reproducible en el navegador.
Haz clic en Publish, revisa la visibilidad y la URL, y confirma la publicación. Abre la URL pública final en una ventana de incógnito para evitar que las cookies de administrador o un estado desactualizado del widget oculten algún problema.
En entornos de staging, mantén la página fuera de los resultados de búsqueda y elimínala tras la validación. La página del tutorial local solo contenía datos ficticios de Northstar.
Verificar la ubicación, la identidad del asistente y una respuesta real
Evalúa la experiencia completa del visitante, no solo la carga de los scripts.
La página publicada muestra el chat integrado en el contenido y el botón flotante Open chat abajo a la derecha. Si solo deseas una de las dos opciones, desactiva el interruptor flotante o elimina el bloque integrado.
Pregunta exacta de prueba: “What is the internal escalation code for an urgent service incident?” Resultado esperado y observado: `NORDSTERN-42`. El recuadro verificado de 1440 × 1000 muestra la respuesta real respaldada por fuentes en el sitio desechable de WordPress tras autorizar el hostname local exacto.
Si el widget no aparece, vacía la caché de WordPress, del maquetador visual y de la CDN. Excluye `web-chat-agent.js` y, en páginas con chat integrado, `chat-widget-inline.js` de las reglas de aplazamiento (delay/defer) o combinación de scripts, y vuelve a probar en una ventana de incógnito limpia.
Ejemplo y resultado
Vea la prueba práctica y su resultado
Cada tutorial incluye un caso de entrada definido, el resultado previsto y un registro transparente de las comprobaciones realizadas.
Ejemplo práctico: Instalar el chatbot de IA de WebChatAgent en WordPress: guía completa para principiantes
Este escenario exacto se completó con la cuenta temporal del tutorial.
Entrada exacta de la prueba
Open the WordPress sample page and ask: “What is the internal escalation code for an urgent service incident?”
Resultado previsto
El widget carga una sola vez, se abre correctamente y devuelve el dato del PDF indexado.
Qué se comprobó realmente
La página desechable de WordPress cargó las ubicaciones integrada y flotante. El widget integrado real respondió: “The support verification code is NORDSTERN-42.”
Consejos útiles
Consiga una configuración fiable
Pruebe con ejemplos realistas, guarde su punto de partida y modifique un solo ajuste cada vez para evaluar las mejoras con claridad.
Gestiona los hostnames como reglas de seguridad exactas
Añade los hosts de producción, www y staging necesario por separado. Elimina los hosts desechables tras la validación.
Elige el modelo antes del control de calidad en WordPress
Utiliza el modelo más rápido y económico que supere las pruebas de respuestas conocidas y admita honestamente cuando desconoce un dato. WordPress no altera la calidad del modelo.
Vuelve a probar tras cada actualización de fuentes
Elimina páginas duplicadas y archivos PDF obsoletos, reindexa y repite las mismas preguntas de evaluación en la página pública de WordPress.
Si algo no funciona
Resolución de problemas
Revise el estado, los permisos y los datos de prueba de forma sistemática antes de cambiar el modelo o la instrucción.
No aparece la opción esperada
Confirma el plan de la cuenta, los permisos de las funciones y el chatbot seleccionado. Las funciones de pago o en fase beta pueden no mostrarse si no se cumplen los requisitos previos.
El resultado de la prueba no es consistente
Reinicia la conversación de prueba, mantén la misma entrada y cambia solo un ajuste a la vez para poder medir la causa con precisión.
Listo para una prueba tipo producción
Repite la prueba de respuesta en la página de inicio, en una página interna en caché y en vista móvil. Confirma las ubicaciones deseadas, el comportamiento del consentimiento y la identidad del asistente antes del lanzamiento.