Saltar al contenido principal

Custom · Standalone

Si tu stack no encaja en WordPress ni en la integración estándar es:

  1. Sirves un <script> con el loader del widget desde el CDN.
  2. Tu backend emite el Widget Token (24 h) desde la Shop API Key vía server-to-server.
  3. Tu frontend recibe ese token (impreso en SSR, fetch a un endpoint propio, etc.) y lo inyecta en data-token.

Esto cubre Rails, Spring, Express, Django, Phoenix, monolitos PHP, sitios estáticos con SSR, etc.

Snippet mínimo​

<div id="neuroon-search"></div>
<script
  src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
  integrity="sha384-JTaG/IN0Jj/ImfUj2x5QVMG4HkbFHzui7fTpLtwl1hsP+kY9W8OODeSJRFWN1ZP5"
  data-token="WIDGET_TOKEN_AQUI"
  data-container="#neuroon-search"
  data-theme="auto"
  data-locale="es"
  data-api-url="https://api.neuroon.ai"
  crossorigin="anonymous"
  async></script>

Atributos data-*​

AtributoRequeridoDefaultNotas
data-tokenSí—Widget Token de 24 h firmado por tu servidor con la Shop API Key (HMAC).
data-containerSí—Selector CSS donde se monta el widget.
data-themeNoautoauto | light | dark.
data-localeNoautodetectISO 639-1 (es, en, fr, de, …).
data-api-urlNohttps://api.neuroon.aiConmuta a Development con https://dev-api.neuroon.ai.
data-positionNoinlineinline | floating.

Flujo del widget token​

Tu backend firma el token localmente con la Shop API Key como secreto HMAC. No llamas a Neuroon para emitirlo. El backend de Neuroon valida la firma en cada request del widget.

Formato:

Base64URL( shopId : unixTimestamp : HMAC-SHA256(hex)( "shopId:unixTimestamp", secret = shopApiKey ) )

Implementaciones copy-paste (Node, .NET, Python, PHP) con cache + rotación en Recipe · Server-to-server token.

Patrón "imprimir en SSR"​

La forma más simple en cualquier servidor: tu render imprime el token en el HTML.

<div id="neuroon-search"></div>
<script
  src="https://cdn.neuroon.ai/widget@0.9.10/widget.js"
  data-token="<%= neuroonWidgetToken %>"
  data-container="#neuroon-search"
  data-locale="<%= currentLocale %>"
  async></script>

Tu backend regenera neuroonWidgetToken cada N horas (con N < 24) y lo persiste en cache (Redis, KV, memoria + lock). Si el cache está vacío, llama al endpoint server-to-server.

Patrón "fetch desde el cliente"​

Útil cuando no controlas el render server-side (SPA con backend separado):

// 1. Endpoint propio (en tu backend) que devuelve el token actual desde tu cache.
//    NUNCA expongas la Shop API Key al frontend.
async function loadNeuroonWidget() {
    const r = await fetch('/api/internal/neuroon-token', { credentials: 'include' });
    const { token } = await r.json();

    const s = document.createElement('script');
    s.src = 'https://cdn.neuroon.ai/widget@0.9.10/widget.js';
    s.integrity = 'sha384-JTaG/IN0Jj/ImfUj2x5QVMG4HkbFHzui7fTpLtwl1hsP+kY9W8OODeSJRFWN1ZP5';
    s.crossOrigin = 'anonymous';
    s.async = true;
    s.dataset.token = token;
    s.dataset.container = '#neuroon-search';
    s.dataset.theme = 'auto';
    document.head.appendChild(s);
}

document.addEventListener('DOMContentLoaded', loadNeuroonWidget);

El endpoint /api/internal/neuroon-token lo expones tú, no Neuroon. Su único job es leer el token de tu cache server-side y devolverlo. La firma se hace una vez cada ~23 h. Ver Recipe · Server-to-server token.

Versionado y SRI​

  • Fija siempre la versión del widget en la URL (@0.9.10, no @latest) en producción.
  • Acompaña la versión con integrity="sha384-…" para bloquear binarios alterados.
  • Recalcula el SRI al subir versión:
curl -s https://cdn.neuroon.ai/widget@VERSION/widget.js \
| openssl dgst -sha384 -binary | openssl base64 -A

CSP recomendada​

Content-Security-Policy:
script-src   'self' https://cdn.neuroon.ai;
connect-src  'self' https://api.neuroon.ai;
img-src      'self' data: https:;
style-src    'self' 'unsafe-inline';

Próximos pasos​

Última actualización en