Saltar al contenido principal

Widget · Visión general

El widget de Neuroon es un componente embebible que añade búsqueda semántica con IA a cualquier tienda online. Se integra con un único <script> y se aísla del tema del host mediante Shadow DOM, evitando colisiones de CSS y JavaScript con tu plantilla.

Está pensado para integraciones server-rendered (WordPress, Magento, .NET, plataformas custom). El host no necesita un framework concreto: cualquier página HTML que pueda imprimir un <script> y un <div> puede embeberlo.

Qué resuelve​

  • Búsqueda semántica en lenguaje natural, voz e imagen.
  • Asistente IA con respuesta conversacional y filtros guiados.
  • Comparador, cross-sell sobre el carrito y kit builder.
  • Follow-up y memoria por conversationId.

Stack​

Preact 10.19   ─┐
TypeScript      │
Tailwind v4     ├──►  Bundle ~262 KB (gzip ~65 KB)
Vite 5          │
Framer Motion  ─┘
  • Preact en lugar de React para reducir el peso del bundle (~3 KB vs ~45 KB).
  • Shadow DOM en modo open — el host puede inspeccionar el árbol pero los estilos del tema no entran.
  • CSS inline en el bundle — sin red adicional para los estilos.

Cómo funciona​

  1. El loader del CDN registra window.NeuroonWidget y, cuando detecta un <script> con data-token, llama automáticamente a init (auto-init).
  2. El widget crea un Shadow DOM aislado en el contenedor declarado e inyecta el CSS inline.
  3. Resuelve el tema (auto/light/dark), aplica los StyleOverrides configurados, registra el listener de prefers-color-scheme y monta el árbol Preact dentro del shadow root.
  4. Cada petición al backend lleva la cabecera X-Widget-Token.

Multi-instancia​

El widget soporta varias instancias en la misma página (un init por contenedor). Cada instancia gestiona su propio tema, eventos globales y cleanup:

window.NeuroonWidget.getInstanceIds() // ['neuroon-widget-1', 'neuroon-widget-2']
window.NeuroonWidget.destroy('#header-search') // destruye sólo esa instancia
window.NeuroonWidget.destroy() // destruye todas

Próximas lecturas​

Última actualización en