Skip to main content

Getting Started with Neuroon Widget

Integrate AI-powered smart search into your e-commerce in less than 5 minutes.

Prerequisites​

  • An account on Neuroon
  • A verified shop with indexed products
  • Your widget token (available in the Dashboard)

Quick Installation​

Add the following code before the closing </body> tag of your page:

<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>
Dynamic Token

The token must be generated in your backend. See Generate Token below.

Verify Installation​

Once the code is added:

  1. Reload your page
  2. You should see the Neuroon search widget
  3. Perform a test search

Generate Token​

The widget token must be generated in your backend using your Shop API Key (available in Dashboard → Shops → Your Shop).

The token is valid for 1 hour. For long sessions, implement the onTokenExpiring callback (see Configuration).

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');
}

// Usage
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()

# Usage
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}");
}

// Usage
$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))
}

Integration in your page​

<!-- Your backend must inject the generated token -->
<script
  src="https://cdn.neuroon.ai/widget.js"
  data-token="<%= generatedToken %>"
  data-container="#neuroon-search">
</script>
Platforms with native support
  • WordPress: The plugin generates the token automatically
  • Shopify: The app manages tokens

Next Steps​