Embed del widget

Snippet mínimo

<script src="https://cdn.zen.zervizdev.com/widget.js" defer></script>
<script>
  window.addEventListener('load', () => {
    Zengine.init({
      tenantId: 'iplacex-demo',
      widgetId: 'sitio-principal-v2'
    });
  });
</script>

Pegar antes de </body>. El script no bloquea render gracias a defer.

API Zengine.init(options)

Opción	Tipo	Default	Descripción
tenantId	string	—	Requerido. ID del tenant.
widgetId	string	—	Requerido. ID del widget configurado en el Admin SPA.
apiBase	string	https://eqeloz3trh.execute-api.us-east-2.amazonaws.com	Override del API de inbound-router.
locale	string	es-CL	Idioma del UI. Soporta es-CL, es-MX, en-US, pt-BR.
theme	object	(remoto)	Override local del tema, ver abajo.
user	object	null	Identifica al usuario si el sitio ya lo conoce.
metadata	object	{}	Atributos custom que se adjuntan a la conversación.
autoOpen	boolean	false	Abre el panel al cargar.
position	bottom-right \| bottom-left	bottom-right	Esquina del botón.
zIndex	number	2147483000	z-index del contenedor.

Identificar al usuario

Zengine.init({
  tenantId: 'iplacex-demo',
  widgetId: 'sitio-principal-v2',
  user: {
    id: 'user-42',                  // identificador estable
    firstName: 'Cristian',
    email: 'cristian@example.com',
    phone: '+56912345678',
    signature: '<HMAC del backend>'  // opcional, ver "User signing"
  },
  metadata: {
    plan: 'premium',
    productPage: location.pathname
  }
});

User signing (anti-suplantación)

Si el sitio tiene login, firma user.id con un HMAC-SHA256 de un secret compartido con ZEngine y pásalo en user.signature. Sin firma, el widget acepta cualquier user.id (modo confianza).

// Backend (Node ejemplo)
const sig = crypto
  .createHmac('sha256', process.env.ZEN_WIDGET_SECRET)
  .update(userId)
  .digest('hex');

El secret se entrega al admin del tenant y vive en Secrets Manager (/zen/dev/widget/<tenantId>/signing-key).

Eventos del widget

Suscríbete después de Zengine.init:

Zengine.on('ready',        () => console.log('widget montado'));
Zengine.on('open',         () => {});
Zengine.on('close',        () => {});
Zengine.on('message',      (msg) => console.log('IN', msg));
Zengine.on('messageSent',  (msg) => console.log('OUT', msg));
Zengine.on('handoff',      (info) => {});       // transferido a humano
Zengine.on('surveyShown',  () => {});
Zengine.on('error',        (err) => {});

Evento	Payload
ready	{ widgetId, sessionId }
open	{}
close	{}
message	{ id, text, attachments, timestamp, author }
messageSent	{ id, text, timestamp }
handoff	{ channel, queue, agentName? }
surveyShown	{ surveyId }
error	{ code, message, correlationId }

Métodos imperativos

Zengine.open();
Zengine.close();
Zengine.toggle();
Zengine.send('Hola desde código');     // envía mensaje como usuario
Zengine.setUser({ firstName: 'Ana' }); // actualiza datos
Zengine.reset();                       // borra sesión y reinicia
Zengine.destroy();                     // remueve el widget del DOM

CSP (Content Security Policy)

Si tu sitio tiene CSP estricta, incluye:

script-src  'self' https://cdn.zen.zervizdev.com;
connect-src 'self' https://eqeloz3trh.execute-api.us-east-2.amazonaws.com https://cdn.zen.zervizdev.com;
img-src     'self' https://cdn.zen.zervizdev.com data:;
style-src   'self' 'unsafe-inline';
frame-src   'self' https://*.zen.zervizdev.com;

Compatibilidad

• Browsers: últimos 2 versions de Chrome, Firefox, Safari, Edge.
• Móvil: iOS Safari 16+, Chrome Android 110+.
• IE11: no soportado.