Skip to main content

Widget · Overview

The Neuroon widget is an embeddable component that adds AI-powered semantic search to any online store. It integrates with a single <script> and isolates itself from the host theme via Shadow DOM, avoiding CSS and JavaScript collisions with your template.

It is designed for server-rendered integrations (WordPress, Magento, .NET, custom platforms). The host doesn't need any specific framework: any HTML page that can print a <script> and a <div> can embed it.

What it solves​

  • Semantic search with natural language, voice and image.
  • Inline AI assistant with conversational answers and guided filters.
  • Comparator, cross-sell on top of the cart and kit builder.
  • Follow-up and memory keyed by conversationId.

Stack​

Preact 10.19   ─┐
TypeScript      │
Tailwind v4     ├──►  Bundle ~262 KB (gzip ~65 KB)
Vite 5          │
Framer Motion  ─┘
  • Preact instead of React to reduce bundle size (~3 KB vs ~45 KB).
  • Shadow DOM in open mode — the host can inspect the tree but theme styles do not leak in.
  • CSS inlined in the bundle — no extra network request for styles.

How it works​

  1. The CDN loader registers window.NeuroonWidget and, when it finds a <script> with data-token, automatically calls init (auto-init).
  2. The widget creates an isolated Shadow DOM in the declared container and injects the inline CSS.
  3. It resolves the theme (auto/light/dark), applies the configured StyleOverrides, registers the prefers-color-scheme listener and mounts the Preact tree inside the shadow root.
  4. Every backend request carries the X-Widget-Token header.

Multi-instance​

The widget supports several instances on the same page (one init per container). Each instance manages its own theme, global events and cleanup:

window.NeuroonWidget.getInstanceIds() // ['neuroon-widget-1', 'neuroon-widget-2']
window.NeuroonWidget.destroy('#header-search') // destroys only that instance
window.NeuroonWidget.destroy() // destroys all

Further reading​

Last updated on