Saltar al contenido principal

Configuración del Widget

El widget de Neuroon se configura mediante atributos data-* en el script tag o mediante JavaScript.

Configuración con data attributes​

<script
  src="https://cdn.neuroon.ai/widget.js"
  data-token="YOUR_TOKEN"
  data-container="#neuroon-search"
  data-theme="dark"
  data-locale="es"
  data-placeholder="¿Qué estás buscando?">
</script>

Opciones disponibles​

AtributoTipoDefaultDescripción
data-tokenstringrequeridoToken de autenticación del widget
data-containerstringrequeridoSelector CSS del contenedor
data-refresh-endpointstringnullURL para renovar token automáticamente
data-themestring"auto"Tema: "light", "dark", "auto"
data-localestring"es"Idioma: "es", "en"
data-placeholderstring""Placeholder del input de búsqueda
data-suggestionsbooleantrueMostrar sugerencias automáticas
data-filtersbooleantrueHabilitar filtros

Configuración con JavaScript​

Para mayor control, usa la API de JavaScript:

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'YOUR_TOKEN',
  theme: 'dark',
  locale: 'es',
  features: {
    suggestions: true,
    filters: true,
    voiceSearch: true,
    imageSearch: true,
  },
  ui: {
    placeholder: '¿Qué estás buscando?',
    resultsPerPage: 20,
    showPrices: true,
    showBrands: true,
    layout: 'grid', // 'grid' o 'list'
  },
  callbacks: {
    onSearch: (query) => console.log('Búsqueda:', query),
    onResultClick: (product) => console.log('Click:', product),
  },
});

Features​

Todas las features están habilitadas por defecto. Solo necesitas desactivarlas explícitamente si no las quieres.

Búsqueda por voz​

features: {
  voiceSearch: false, // Desactivar (habilitado por defecto)
}

Requiere HTTPS y un navegador compatible (Chrome, Safari, Edge).

Búsqueda por imagen​

features: {
  imageSearch: false, // Desactivar (habilitado por defecto)
}

Permite buscar productos mediante fotos.

Filtros guiados​

Los filtros guiados se generan automáticamente basándose en la intención de búsqueda del usuario. No requieren configuración adicional.

Refresh de Token​

El token tiene una validez de 1 hora. Para sesiones largas, configura un endpoint de refresh y el widget lo gestionará automáticamente.

Opción 1: Con data-attribute (recomendado)​

<script
  src="https://cdn.neuroon.ai/widget.js"
  data-token="YOUR_INITIAL_TOKEN"
  data-refresh-endpoint="/api/neuroon/refresh-token"
  data-container="#neuroon-search">
</script>

Opción 2: Con JavaScript​

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: initialToken,
  refreshEndpoint: '/api/neuroon/refresh-token',
});

El widget automáticamente:

  1. Detecta cuando el token está por expirar (5 min antes)
  2. Hace GET al endpoint configurado
  3. Espera respuesta { "token": "nuevo_token" }
  4. Actualiza el token internamente

Endpoint en tu backend​

Tu endpoint debe devolver JSON con el nuevo token:

// Node.js / Express
app.get('/api/neuroon/refresh-token', (req, res) => {
  // Verificar que el usuario está autenticado
  if (!req.session.userId) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  const token = generateWidgetToken(process.env.NEUROON_SHOP_API_KEY);
  res.json({ token });
});
# Python / Flask
@app.route('/api/neuroon/refresh-token')
def refresh_token():
    if not session.get('user_id'):
        return jsonify(error='Unauthorized'), 401

    token = generate_widget_token(os.environ['NEUROON_SHOP_API_KEY'])
    return jsonify(token=token)
// PHP
if (!isset($_SESSION['user_id'])) {
    http_response_code(401);
    echo json_encode(['error' => 'Unauthorized']);
    exit;
}

$token = generateWidgetToken($_ENV['NEUROON_SHOP_API_KEY']);
echo json_encode(['token' => $token]);

Opción 3: Callback personalizado​

Para casos donde necesitas lógica custom (headers especiales, auth tokens, etc.):

const widget = NeuroonWidget.init({
  container: '#neuroon-search',
  token: initialToken,
  callbacks: {
    onTokenExpiring: async () => {
      const response = await fetch('/api/neuroon/refresh-token', {
        headers: { 'Authorization': `Bearer ${myAuthToken}` }
      });
      const data = await response.json();
      return data.token;
    },
  },
});

Sin refresh configurado​

Si no configuras refresh:

  • El token expira después de 1 hora
  • Las búsquedas posteriores fallarán silenciosamente
  • El usuario deberá recargar la página
Recomendación

Siempre configura data-refresh-endpoint en aplicaciones donde el usuario puede permanecer en la página más de 1 hora.

Siguiente paso​