Saltar al contenido principal

Instalación del widget

El widget se instala en 3 pasos: tu servidor firma un token, lo inyecta en el HTML, y el script se auto-inicializa. Sin npm, sin build step.

Paso 1 — Tu servidor firma el Widget Token​

El token se genera con HMAC-SHA256 usando tu API Key como secreto. Lo firma tu backend, no el navegador. Implementaciones copy-paste en Widget Token.

Paso 2 — Tu servidor imprime el HTML​

El token se inyecta dinámicamente en data-token. Snippet completo con las opciones más comunes:

<div id="neuroon-search"></div>
<script
  src="https://cdn.neuroon.ai/widget@0.9.27/widget.js"
  data-token="EL_TOKEN_QUE_ACABAS_DE_FIRMAR"
  data-container="#neuroon-search"
  data-theme="auto"
  data-locale="es"
  async
></script>

Esto es para cualquier stack que imprima HTML desde el servidor: WordPress, .NET, PHP, Node con templates, Rails, Django.

Atributos data-* del auto-init​

Ver la tabla completa en Configuración → Atributos data-*. Cubre token, container, theme, locale y apiUrl (para apuntar a Development sin JS). Para carrito, voz, imagen, comparador, callbacks o personalizar colores, usa init() programático — ver más abajo.

Entornos​

Por defecto el widget apunta a producción (https://api.neuroon.ai). Con auto-init, añade data-api-url="https://dev-api.neuroon.ai" al <script> para apuntar a desarrollo. Si prefieres control programático (SPA, cambio de entorno en runtime), usa init() con la URL que ves en el selector de entorno del navbar:

window.NeuroonWidget.init({
container: '#neuroon-search',
token: 'TOKEN_DE_DESARROLLO',
apiUrl: 'https://api.neuroon.ai',
theme: 'auto',
locale: 'es',
})

Selecciona Development en el navbar y el apiUrl cambiará automáticamente en este ejemplo.

Configuración programática (opcional)​

Para control fino — SPA, múltiples instancias, carrito, estilos, entorno de desarrollo:

const widget = window.NeuroonWidget.init({
  container: '#neuroon-search',
  token: 'TOKEN_FIRMADO_POR_TU_SERVIDOR',
  apiUrl: 'https://dev-api.neuroon.ai',   // desarrollo
  theme: 'auto',
  locale: 'es',
})

widget.setTheme('dark')
widget.destroy()

Si usas init(), no pongas data-* attributes en el <script>. Son caminos excluyentes.

Próximas lecturas​

Última actualización en