Guía de instalación
Añade un chat de IA a tu sitio web
Esta guía está dirigida a comerciantes que pueden editar su sitio o añadir un script con sus herramientas de publicación. El objetivo es comprobar una conversación y su respuesta, además de ver el botón de chat.
Ouviro · Publicado
1. Prepara tu sitio y tu cuenta
Necesitas acceso a la plantilla compartida o a la configuración de código personalizado del sitio, tu correo de registro y una política de atención vigente para probar. Regístrate en app.ouviro.com, confirma tu correo y completa la creación de la tienda.
Usa una cuenta de propietario o administrador para configurar canales y conocimiento. Mantén una vía de atención humana para las preguntas que tu contenido no pueda responder.
2. Configura el canal de tu sitio
Abre Canales y utiliza el canal web creado durante la configuración, o crea uno para el sitio donde lo vas a instalar. Comprueba la URL del sitio, el nombre visible, el idioma y la apariencia. Después, copia el código de instalación de ese canal.
El websiteToken identifica el canal y aparece en el código fuente de la página. No es una credencial privada de API ni un permiso para leer pedidos.
3. Carga el SDK e inicia el widget
Añade el código una sola vez al diseño compartido del sitio. Si usas window.aiSupportSettings para opciones adicionales, defínelo antes de cargar el script. El SDK carga de forma asíncrona; llama a window.aiSupportSDK.run solo cuando haya terminado de cargar.
Esta instalación ilustrativa contiene un valor ficticio. Sustitúyelo por el código de tu propio canal y publica el cambio en tu sitio.
<script>
(function (d) {
var g = d.createElement("script");
g.src = "https://app.ouviro.com/sdk.js";
g.async = true;
g.onload = function () {
window.aiSupportSDK.run({
websiteToken: "YOUR_WEBSITE_TOKEN",
baseUrl: "https://app.ouviro.com"
});
};
d.head.appendChild(g);
})(document);
</script>4. Permite las conexiones necesarias en la CSP
Si tu sitio utiliza Content Security Policy, incorpora estos permisos de origen a su política actual. Permite todo el origen del script, porque el panel del chat carga otro archivo. El código de inicio insertado en la página también necesita la autorización mediante nonce o hash que utilice tu sitio; estos permisos de origen no autorizan por sí solos el código en línea.
El widget actual inserta estilos en línea en su Shadow DOM. También necesita el permiso de estilos indicado abajo; el nonce o hash del código de inicio no autoriza esos estilos. Conserva los demás orígenes de tu política. Si tu política de seguridad no permite estos estilos en línea, por ejemplo si solo acepta estilos con nonce, el widget aún no es compatible. Revisa esta limitación antes de instalarlo.
Añade el permiso de estilos en línea solo después de revisarlo y aprobarlo. Una directiva style-src-elem existente o restricciones de nonce/hash para estilos pueden seguir bloqueando el widget; copiar estas tres líneas no las anula.
script-src https://app.ouviro.com;
connect-src https://app.ouviro.com wss://app.ouviro.com;
style-src 'unsafe-inline';5. Abre la ventana y comprueba la conexión
Recarga la página publicada y abre el chat. En las herramientas de desarrollo del navegador, comprueba que se carguen sdk.js y el script del chat, que las solicitudes a /widget/ funcionen y que se abra la conexión con wss://app.ouviro.com/ws/.
Ver el botón no demuestra que la conversación pueda conectarse. Comprueba también la página con un ancho de pantalla móvil.
6. Verifica la primera respuesta útil
Añade una política breve y vigente en Conocimiento y espera a que termine su indexación y publicación. Haz una pregunta cuya respuesta puedas contrastar con esa política. Confirma el contenido de la respuesta y que la conversación aparezca en la bandeja de los agentes.
Haz también una pregunta no cubierta por el contenido y prueba el botón de atención humana. Comprueba la derivación real y la disponibilidad de los agentes antes de invitar a los clientes.
7. Corrige fallos de carga e instalaciones repetidas
Si el botón muestra Reintentar, revisa las solicitudes de scripts bloqueadas, los errores de CSP y los fallos de red antes de volver a probar. Si el panel se abre pero no conecta, revisa por separado las solicitudes HTTP y WebSocket.
Mantén una sola instalación en la plantilla y elimina las inserciones duplicadas del gestor de etiquetas o del tema. En una aplicación de página única, llama a window.aiSupportSDK.destroy() al quitar o sustituir la integración y después ejecuta run con la configuración deseada. Repetir run no actualiza un widget activo.