--- title: "Instalación del Widget en tu Sitio Web" description: "Antes de instalar el widget, asegúrate de: Tener acceso al código HTML de tu sitio, Tener el Asistente IA habilitado en tu panel" url: https://sistrack.com/docs/ai-assistant/instalacion-widget/ category: ai-assistant section: docs updated: 2026-01-18 --- *Versión Markdown para agentes. Esta página en la web: https://sistrack.com/docs/ai-assistant/instalacion-widget/* # Instalación del Widget en tu Sitio Web ## 📋 Requisitos Previos Antes de instalar el widget, asegúrate de: 1. ✅ Tener acceso al código HTML de tu sitio 2. ✅ Tener el Asistente IA habilitado en tu panel 3. ✅ Conocer tu dominio de Sistrack (ej: `tuempresa.sistrack.com`) ## 🚀 Instalación Rápida ### Paso 1: Obtener el Código El código de instalación es: ```html ``` **Reemplaza** `TUDOMINIO` con tu subdominio de Sistrack. ### Paso 2: Agregar a tu Sitio Copia el código y pégalo **antes de la etiqueta ``** en tu sitio web. ```html Mi Sitio ``` ### Paso 3: Verificar 1. Visita tu sitio web 2. Busca el botón de chat en la esquina inferior 3. Haz clic y envía un mensaje de prueba ## 📦 Instalación por Plataforma ### WordPress **Opción A: Plugin de código personalizado** 1. Instala el plugin "Insert Headers and Footers" 2. Ve a **Configuración** → **Insert Headers and Footers** 3. En la sección **Scripts in Footer**, pega: ```html ``` 4. Guarda los cambios **Opción B: Editar tema directamente** 1. Ve a **Apariencia** → **Editor de temas** 2. Selecciona `footer.php` 3. Agrega el código antes de `` 4. Guarda > ⚠️ **Nota**: Si usas un tema hijo, edita el `footer.php` del tema hijo. ### Shopify 1. Ve a **Tienda Online** → **Temas** 2. Haz clic en **Acciones** → **Editar código** 3. Busca `theme.liquid` 4. Encuentra la etiqueta `` 5. Agrega el código justo antes 6. Guarda ### WooCommerce Igual que WordPress (ver arriba). ### Wix 1. Ve a **Configuración** → **Avanzado** → **Código personalizado** 2. Haz clic en **+ Agregar código personalizado** 3. Pega el código 4. En "Ubicación", selecciona **Body - end** 5. En "Páginas", selecciona **Todas las páginas** 6. Guarda ### Squarespace 1. Ve a **Configuración** → **Avanzado** → **Inyección de código** 2. En la sección **Footer**, pega el código 3. Guarda ### HTML Estático Agrega directamente en cada página antes de ``: ```html ``` ## ⚙️ Opciones Avanzadas ### Cargar en Páginas Específicas Si solo quieres el widget en ciertas páginas: ```html ``` ### Retrasar la Carga Para mejorar el rendimiento, carga después de que el sitio esté listo: ```html ``` ## 🔍 Verificación de Instalación ### Lista de Verificación | Paso | ¿Completado? | |------|--------------| | Código agregado al sitio | ☐ | | Widget visible en la esquina | ☐ | | Al hacer clic se abre el chat | ☐ | | Puedo enviar un mensaje | ☐ | | Recibo respuesta del asistente | ☐ | ### Herramientas de Verificación **Consola del Navegador**: 1. Abre tu sitio 2. Presiona `F12` o `Ctrl+Shift+I` 3. Ve a la pestaña **Console** 4. Busca mensajes de "AI Assistant" Si ves errores, revisa: - El dominio en el script es correcto - No hay bloqueadores activos - El asistente está habilitado ## 🚨 Solución de Problemas ### El widget no aparece **Causas posibles**: | Causa | Solución | |-------|----------| | Código mal ubicado | Verifica que esté antes de `` | | Dominio incorrecto | Revisa la URL del script | | Asistente deshabilitado | Actívalo en el panel | | Bloqueador de anuncios | Desactiva temporalmente para probar | | Error de JavaScript | Revisa la consola del navegador | ### Widget aparece pero no funciona **Causas posibles**: | Causa | Solución | |-------|----------| | Sin conexión a API | Verifica tu conexión a internet | | Límite alcanzado | Revisa el uso mensual | | Error de configuración | Contacta a soporte | ### Widget se ve mal **Causas posibles**: | Causa | Solución | |-------|----------| | CSS conflictivo | Usa inspector para identificar | | Posición incorrecta | Cambia en configuración | | Responsive issues | Prueba en diferentes tamaños | ## 📱 Compatibilidad ### Navegadores Soportados | Navegador | Versión Mínima | |-----------|----------------| | Chrome | 80+ | | Firefox | 75+ | | Safari | 13+ | | Edge | 80+ | | Opera | 67+ | ### Dispositivos - ✅ Desktop (Windows, Mac, Linux) - ✅ Tablet (iOS, Android) - ✅ Móvil (iOS, Android) ## 🔒 Seguridad - ✅ El widget solo se comunica con tu dominio de Sistrack - ✅ Todas las comunicaciones son por HTTPS - ✅ No se almacenan datos sensibles en el navegador - ✅ Cumple con GDPR y normativas de privacidad ## 📞 Soporte Si tienes problemas con la instalación: 1. Revisa esta guía completa 2. Consulta la documentación técnica 3. Contacta a soporte con: - URL de tu sitio - Captura de pantalla del error - Navegador y versión usada