Skip to main content

JavaScript API

The Neuroon widget exposes a minimalist JavaScript API for initialization and basic control.

Available API​

NeuroonWidget.init(config)​

Initializes and mounts the widget in the specified container.

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',
  theme: 'auto',
  locale: 'en',
  // ... more options (see Configuration)
});

Parameters:

  • config (NeuroonWidgetConfig): Widget configuration object

Returns: WidgetInstance

interface WidgetInstance {
  destroy: () => void
  setTheme: (theme: 'light' | 'dark' | 'auto') => void
}

NeuroonWidget.getInstance()​

Gets the current widget instance if it exists.

const widget = NeuroonWidget.getInstance();

if (widget) {
  widget.setTheme('dark');
}

Returns: WidgetInstance | null

NeuroonWidget.destroy()​

Destroys the current widget instance and cleans up the DOM.

NeuroonWidget.destroy();

Instance Methods​

widget.setTheme(theme)​

Changes the widget theme dynamically.

const widget = NeuroonWidget.init({ /* config */ });

// Switch to dark theme
widget.setTheme('dark');

// Switch to light theme
widget.setTheme('light');

// Follow system preference
widget.setTheme('auto');

Parameters:

  • theme ('light' | 'dark' | 'auto'): Theme to apply

widget.destroy()​

Destroys this widget instance.

widget.destroy();
warning

After calling destroy(), the instance is no longer usable. You must create a new one with NeuroonWidget.init().

Complete Example​

// Initialize widget
const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',
  theme: 'auto',
  locale: 'en',
  features: {
    suggestions: true,
    filters: true,
    voiceSearch: true,
    imageSearch: true,
    aiAssistant: false,
  },
  callbacks: {
    onSearch: (query) => {
      console.log('Search:', query);
    },
    onResultClick: (product) => {
      console.log('Product clicked:', product.name);
    },
  },
});

// Change theme based on time of day
const hour = new Date().getHours();
if (hour >= 20 || hour < 6) {
  widget.setTheme('dark');
}

// Cleanup when leaving page (SPA)
window.addEventListener('beforeunload', () => {
  widget.destroy();
});

Global Access​

The widget registers itself automatically on window.NeuroonWidget:

// Available globally after loading the script
window.NeuroonWidget.init({ /* config */ });

Framework Integration​

React​

import { useEffect, useRef } from 'react';

function SearchWidget({ token }) {
  const containerRef = useRef(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && !widgetRef.current) {
      widgetRef.current = window.NeuroonWidget.init({
        container: containerRef.current,
        token,
        theme: 'auto',
      });
    }

    return () => {
      widgetRef.current?.destroy();
      widgetRef.current = null;
    };
  }, [token]);

  return <div ref={containerRef} />;
}

Vue​

<template>
  <div ref="container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps(['token']);
const container = ref(null);
let widget = null;

onMounted(() => {
  widget = window.NeuroonWidget.init({
    container: container.value,
    token: props.token,
    theme: 'auto',
  });
});

onUnmounted(() => {
  widget?.destroy();
});
</script>

Next steps​