Saltar al contenido principal

Custom · Standalone

Si no usas el plugin oficial de WordPress, 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 opaco emitido por Neuroon (24 h).
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​

El token lo emite Neuroon, no tu backend. Tu backend solo solicita el token con su Shop API Key (sk_…) y lo entrega al frontend.

POST/api/shops/{id}/widget-token
POST /api/shops/shop_xxxxxxxx/widget-token HTTP/1.1
Host: api.neuroon.ai
X-Shop-API-Key: sk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Respuesta:

{
  "token": "wt_zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz"
}

El response sólo trae token. El TTL es fijo a 24 h desde la emisión; rótalo a las 23 h por seguridad.

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

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

Si trabajas en Development, añade https://dev-api.neuroon.ai a connect-src.

Próximos pasos​

Última actualización en