Instalar el widget en HTML o cualquier sitio web

Qué vas a lograr

Al completar esta guía, el widget de chat de tu asistente aparecerá en cualquier página web donde pegues el snippet de instalación. Esta es la opción universal que funciona en cualquier sitio web, CMS o framework.

Antes de empezar

Necesitas poder editar el HTML de tu sitio web (acceso al código fuente o a un panel que permita insertar código personalizado).
Tu asistente debe estar creado y configurado en Lectico.
Necesitas una API key activa.

Cómo acceder al snippet

Desde el sidebar izquierdo de Lectico, haz clic en Asistentes. Haz clic en la tarjeta de tu asistente. Selecciona la pestaña Instalación. En el grid de plataformas, selecciona HTML / Otra.

Lectico generará automáticamente el snippet con los parámetros de tu asistente. Haz clic en Copiar código.

Paso a paso

Abre el archivo HTML de tu página

Abre el archivo HTML de tu sitio web, o accede al panel de tu CMS donde puedas insertar código personalizado.

Pega el código antes de </body>

Pega el snippet completo de Lectico justo antes de la etiqueta de cierre </body>.

Guarda y sube los cambios

Guarda el archivo y sube los cambios a tu servidor. Recarga la página en tu navegador.

Snippet básico de referencia

El snippet que Lectico genera tiene esta estructura:

<script>
(function() {
  var s = document.createElement('script');
  s.src = 'https://api.lectico.com/storage/v1/object/public/widget/v1/lectico-widget.js';
  s.onload = function() {
    Lectico.init({
      apiUrl: 'https://api.lectico.com',
      courseId: 'tu-course-id',
      assistantId: 'tu-asistente-id',
      apiKey: 'widget_pk_...'
    });
  };
  document.body.appendChild(s);
})();
</script>

No necesitas copiar este ejemplo. Usa siempre el snippet generado automáticamente en la pestaña Instalación de tu asistente, que ya incluye tus parámetros reales.

Filtro de ruta (opcional)

Si defines una ruta en el campo Filtrar por ruta dentro de la pestaña Instalación de Lectico, el chat solo aparecerá en las páginas cuya URL contenga esa ruta. Si lo dejas vacío, el chat aparecerá en todas las páginas donde esté instalado el snippet.

Frameworks SPA (React, Next.js, Vue)

Si tu sitio usa un framework de tipo Single Page Application:

React: Carga el snippet dentro de un useEffect en tu componente raíz.
Next.js: Usa el componente <Script> de Next.js con strategy="afterInteractive".
Vue: Carga el snippet en el hook onMounted de tu componente principal.

Consulta la referencia de la API del widget para ver todas las opciones de inicialización disponibles.

Content Security Policy (CSP)

Si tu sitio web utiliza una política de seguridad de contenido (CSP), añade api.lectico.com a las directivas script-src y connect-src para que el widget funcione correctamente.

Verificar la instalación

Abre tu página en una ventana de incógnito (Ctrl+Shift+N en Windows o Cmd+Shift+N en Mac).
Deberías ver el botón del chat en la esquina inferior derecha.
Haz clic en el botón y envía un mensaje de prueba.

Solución de problemas

Verifica que el código está antes de </body>, no dentro de otro bloque <script>.
Abre la consola del navegador (F12) y busca errores en rojo.
Si el botón del chat no es visible, verifica en DevTools que no haya elementos con z-index superior superpuestos al widget.
Verifica que el dominio de tu sitio está en los dominios permitidos de tu API key. Para comprobarlo, ve a API Keys en el sidebar izquierdo de Lectico.