Saltar al contenido principal

Instalación del widget

Esta página describe la forma soportada de embeber el widget en producción: CDN versionado con Subresource Integrity (SRI), política Content-Security-Policy y fallback a una versión fija cuando @latest se mueve.

Requisitos previos​

  • Un Widget Token (cabecera X-Widget-Token). Si no tienes uno, sigue Autenticación → Widget Token.
  • Un contenedor en tu plantilla, normalmente un <div id="neuroon-search"></div>.
  • Acceso para añadir un <script> en <head> o antes de </body>.

Versiones disponibles​

Cargando versiones…

Snippet base​

index.html
<div id="neuroon-search"></div>
<script
  src="https://cdn.neuroon.ai/widget/widget.js"
  data-token="YOUR_WIDGET_TOKEN"
  data-container="#neuroon-search"
  data-theme="auto"
  data-locale="es"
></script>
<div id="neuroon-search"></div>
<script
  src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
  data-token="WIDGET_TOKEN_AQUI"
  data-container="#neuroon-search"
  data-theme="auto"
  data-locale="es"
  data-api-url="https://api.neuroon.ai"
  async
></script>

El script auto-inicializa: detecta el data-token, monta el Shadow DOM en el data-container (por defecto #neuroon-search si lo omites) y renderiza el UI. No tienes que llamar a ninguna API JavaScript adicional para el flujo estándar.

Subresource Integrity (SRI)​

Cada release del widget publica un manifiesto SRI con el hash SHA-384 del bundle:

https://cdn.neuroon.ai/widget@0.9.10/sri-manifest.json

El manifiesto global de SRI para la última versión está en https://cdn.neuroon.ai/sri-manifest.json y la lista de versiones publicadas en https://cdn.neuroon.ai/versions.json.

Añádelo al <script> para que el navegador rechace cualquier modificación del CDN:

<script
  src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
  integrity="sha384-AbCdEf123…"
  crossorigin="anonymous"
  data-token="WIDGET_TOKEN_AQUI"
  data-container="#neuroon-search"
  async
></script>

Atributos data-*​

El parser está en widget/src/core/config.ts (parseDataAttributes). Sólo estos atributos se leen — el resto se ignora.

AtributoRequeridoValor
data-tokensíWidget Token (cadena opaca emitida por Neuroon).
data-containernoSelector CSS del contenedor. Default #neuroon-search.
data-themenoauto (default), light, dark.
data-localenoUno de los 9 códigos soportados. Default es.
data-api-urlnoOverride del API base URL. Default https://api.neuroon.ai.
data-primary-colornoHex/rgb del color primario (atajo legacy; preferir StyleOverrides).
data-placeholdernoTexto del input vacío.
data-suggestionsnofalse deshabilita el dropdown de sugerencias.
data-filtersnofalse deshabilita filtros y el drawer.

Política Content-Security-Policy​

Si tu host aplica CSP estricta, el widget necesita estas directives:

script-src   'self' https://cdn.neuroon.ai;
connect-src  'self' https://api.neuroon.ai https://browser-intake-datadoghq.eu;
img-src      'self' data: https:;
font-src     'self' https://rsms.me;
style-src    'self' 'unsafe-inline';
  • connect-src — el widget llama al API y, si está habilitado el monitoring opcional, reporta a browser-intake-datadoghq.eu.
  • font-src https://rsms.me — el widget pre-conecta y carga la familia Inter desde rsms.me.
  • style-src 'unsafe-inline' — necesario porque el widget inyecta <style> dentro del Shadow DOM. El Shadow DOM aísla esa hoja del documento del host.

Variantes por entorno​

EntornoCDNAPI
Producciónhttps://cdn.neuroon.ai/widget@0.9.10/widget.jshttps://api.neuroon.ai
Desarrollomismo CDN, mismas versioneshttps://dev-api.neuroon.ai

Para apuntar a Desarrollo basta con data-api-url="https://dev-api.neuroon.ai". El bundle del widget es el mismo.

Inicialización programática (opcional)​

El auto-init basta para la mayoría de integraciones. Si necesitas control fino (lazy-load, múltiples instancias, configuración dinámica desde el servidor), usa la API JavaScript:

const widget = window.NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'WIDGET_TOKEN_AQUI',
  apiUrl: 'https://api.neuroon.ai',
  theme: 'auto',
  locale: 'es',
})

// Métodos disponibles sobre la instancia
widget.setTheme('dark')
widget.setStyles({ primary: '#06b6d4' })
widget.destroy()

Próximas lecturas​

Última actualización en