Saltar al contenido principal

Empezar con Neuroon Widget

Integra búsqueda inteligente con IA en tu e-commerce en menos de 5 minutos.

Requisitos previos​

  • Una cuenta en Neuroon
  • Una tienda verificada con productos indexados
  • Tu token de widget (disponible en el Dashboard)

Instalación rápida​

Añade el siguiente código antes de cerrar la etiqueta </body> de tu página:

<link rel="stylesheet" href="https://cdn.neuroon.ai/widget.css">

<div id="neuroon-search"></div>

<script
  src="https://cdn.neuroon.ai/widget.js"
  data-token="YOUR_TOKEN"
  data-container="#neuroon-search">
</script>
Token dinámico

El token debe generarse en tu backend. Ver Generar Token más abajo.

Verificar la instalación​

Una vez añadido el código:

  1. Recarga tu página
  2. Deberías ver el buscador de Neuroon
  3. Realiza una búsqueda de prueba

Generar Token​

El token del widget debe generarse en tu backend usando tu Shop API Key (disponible en Dashboard → Tiendas → Tu Tienda).

El token tiene una validez de 1 hora. Para sesiones largas, implementa el callback onTokenExpiring (ver Configuración).

Node.js​

const crypto = require('crypto');

function generateWidgetToken(shopApiKey) {
  const timestamp = Date.now();
  const payload = `${shopApiKey}:${timestamp}`;
  const signature = crypto
    .createHmac('sha256', shopApiKey)
    .update(payload)
    .digest('hex');

  return Buffer.from(`${timestamp}:${signature}`).toString('base64');
}

// Uso
const token = generateWidgetToken(process.env.NEUROON_SHOP_API_KEY);

Python​

import hmac
import hashlib
import base64
import time

def generate_widget_token(shop_api_key: str) -> str:
    timestamp = str(int(time.time() * 1000))
    payload = f"{shop_api_key}:{timestamp}"
    signature = hmac.new(
        shop_api_key.encode(),
        payload.encode(),
        hashlib.sha256
    ).hexdigest()

    return base64.b64encode(f"{timestamp}:{signature}".encode()).decode()

# Uso
token = generate_widget_token(os.environ["NEUROON_SHOP_API_KEY"])

PHP​

function generateWidgetToken(string $shopApiKey): string {
    $timestamp = round(microtime(true) * 1000);
    $payload = "{$shopApiKey}:{$timestamp}";
    $signature = hash_hmac('sha256', $payload, $shopApiKey);

    return base64_encode("{$timestamp}:{$signature}");
}

// Uso
$token = generateWidgetToken($_ENV['NEUROON_SHOP_API_KEY']);

Java​

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import java.util.Base64;

public String generateWidgetToken(String shopApiKey) throws Exception {
    long timestamp = System.currentTimeMillis();
    String payload = shopApiKey + ":" + timestamp;

    Mac mac = Mac.getInstance("HmacSHA256");
    mac.init(new SecretKeySpec(shopApiKey.getBytes(), "HmacSHA256"));
    String signature = bytesToHex(mac.doFinal(payload.getBytes()));

    return Base64.getEncoder().encodeToString(
        (timestamp + ":" + signature).getBytes()
    );
}

Go​

import (
    "crypto/hmac"
    "crypto/sha256"
    "encoding/base64"
    "encoding/hex"
    "fmt"
    "time"
)

func GenerateWidgetToken(shopApiKey string) string {
    timestamp := time.Now().UnixMilli()
    payload := fmt.Sprintf("%s:%d", shopApiKey, timestamp)

    h := hmac.New(sha256.New, []byte(shopApiKey))
    h.Write([]byte(payload))
    signature := hex.EncodeToString(h.Sum(nil))

    tokenData := fmt.Sprintf("%d:%s", timestamp, signature)
    return base64.StdEncoding.EncodeToString([]byte(tokenData))
}

Integración en tu página​

<!-- Tu backend debe inyectar el token generado -->
<script
  src="https://cdn.neuroon.ai/widget.js"
  data-token="<%= generatedToken %>"
  data-container="#neuroon-search">
</script>
Plataformas con soporte nativo
  • WordPress: El plugin genera el token automáticamente
  • Shopify: La app gestiona los tokens

Siguiente paso​