Widget installation

This page describes the supported way to embed the widget in production: versioned CDN with Subresource Integrity (SRI), Content-Security-Policy, and a pinned-version fallback when @latest moves.

Prerequisites

A Widget Token (header X-Widget-Token). If you don't have one yet, follow Authentication → Widget Token.
A container in your template, typically a <div id="neuroon-search"></div>.
Permission to add a <script> in <head> or before </body>.

Available versions

Loading versions…

Base snippet

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_HERE"
  data-container="#neuroon-search"
  data-theme="auto"
  data-locale="es"
  data-api-url="https://api.neuroon.ai"
  async
></script>

The script auto-initializes: it detects data-token, mounts the Shadow DOM in the data-container (defaults to #neuroon-search if omitted) and renders the UI. You don't have to call any extra JavaScript API for the standard flow.

Subresource Integrity (SRI)

Each widget release publishes an SRI manifest with the SHA-384 hash of the bundle:

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

The global SRI manifest for the latest version is at https://cdn.neuroon.ai/sri-manifest.json and the published-version index at https://cdn.neuroon.ai/versions.json.

Add it to the <script> so the browser rejects any CDN tampering:

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

`data-*` attributes

The parser lives in widget/src/core/config.ts (parseDataAttributes). Only these attributes are read — anything else is ignored.

Attribute	Required	Value
`data-token`	yes	Widget Token (opaque string issued by Neuroon).
`data-container`	no	CSS selector of the container. Defaults to `#neuroon-search`.
`data-theme`	no	`auto` (default), `light`, `dark`.
`data-locale`	no	One of the 9 supported codes. Default `es`.
`data-api-url`	no	API base URL override. Default `https://api.neuroon.ai`.
`data-primary-color`	no	Hex/rgb of the primary color (legacy shortcut; prefer `StyleOverrides`).
`data-placeholder`	no	Empty-input text.
`data-suggestions`	no	`false` disables the suggestions dropdown.
`data-filters`	no	`false` disables filters and the drawer.

Content-Security-Policy

If your host enforces strict CSP, the widget needs these 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 — the widget calls the API and, when optional monitoring is enabled, reports to browser-intake-datadoghq.eu.
font-src https://rsms.me — the widget preconnects and loads the Inter family from rsms.me.
style-src 'unsafe-inline' — required because the widget injects <style> inside the Shadow DOM. The Shadow DOM isolates that stylesheet from the host document.

Variants per environment

Environment	CDN	API
Production	`https://cdn.neuroon.ai/widget@0.9.10/widget.js`	`https://api.neuroon.ai`
Development	same CDN, same versions	`https://dev-api.neuroon.ai`

To point at Development, set data-api-url="https://dev-api.neuroon.ai". The widget bundle is the same.

Programmatic initialization (optional)

Auto-init covers most integrations. If you need fine-grained control (lazy-load, multiple instances, dynamic server-side configuration), use the JavaScript API:

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

// Methods available on the instance
widget.setTheme('dark')
widget.setStyles({ primary: '#06b6d4' })
widget.destroy()

Prerequisites​

Available versions​

Base snippet​

Subresource Integrity (SRI)​

data-* attributes​

Content-Security-Policy​

Variants per environment​

Programmatic initialization (optional)​

Further reading​