El widget es la puerta de entrada de tu soporte: un botón flotante en tu sitio que abre el chat. Desde ahí tus visitantes también pueden buscar los artículos publicados de tu centro de ayuda. Instalarlo lleva dos minutos: copiás un snippet del dashboard y lo pegás en tu sitio, sin editar nada. Apenas alguien escribe, el mensaje te llega al Inbox.
Andá a Configuración → Widget, pestaña Código. El primer bloque es el snippet de tu proyecto, ya viene con tu ID de widget adentro. Tocá Copiar y listo, no tenés que modificar nada.
</body>En tu sitio, pegá el snippet justo antes de la etiqueta de cierre </body>. Si tu app tiene un layout compartido (Next.js, Astro, etc.), pegalo ahí una sola vez y aparece en todas las páginas. Funciona en cualquier sitio: React, Vue, Astro, HTML estático, lo que sea.
Recargá tu sitio. Vas a ver el botón del chat flotando abajo a la derecha. Mandá un mensaje de prueba y fijate que llegue a tu Inbox en el dashboard.
Si querés ver cómo queda el widget antes de tocar tu sitio, en la misma página del dashboard tenés la pestaña Vista previa: muestra el widget con tus colores y tu logo. Es una vista de apariencia, así que los mensajes que escribas ahí no se guardan ni llegan al Inbox.
El snippet que copiás tiene esta forma (acá está abreviado, el del dashboard viene completo):
<script>
(function(){
var ORIGIN = "https://vibelayers.app";
var src = ORIGIN + "/widget/TU_WIDGET_ID";
var iframe = document.createElement("iframe");
iframe.src = src;
// ... posiciona el iframe como boton flotante, escucha los
// mensajes de tamano del widget y define identify() y reset()
document.body.appendChild(iframe);
window.Vibelayers = { identify: identify, reset: reset };
})();
</script>En concreto:
<iframe> flotante abajo a la derecha. Arranca como un botón chico y se agranda solo cuando el visitante lo abre. En pantallas chicas (hasta 480px de ancho) el panel abierto ocupa toda la pantalla para que nunca quede cortado.window.Vibelayers, una API global con dos funciones: identify() y reset().Si tu app tiene login, avisale al widget quién es el usuario. Así no le pide el email para chatear y sus conversaciones quedan asociadas a su identidad. A los visitantes sin sesión el widget les pide el email solo, no tenés que hacer nada extra.
// Despues del login, donde tu app ya sabe quien esta logueado:
window.Vibelayers.identify({
email: user.email,
name: user.name
});
// Al cerrar sesion:
window.Vibelayers.reset();Campos que acepta identify:
email: el email del usuario.name: el nombre para mostrar en las conversaciones.id (también acepta external_id): tu ID interno del usuario.user_hash: la firma HMAC para identidad verificada. Opcional, ver la sección siguiente.metadata: un objeto con datos extra del usuario, que viaja junto con su identidad.Tenés que mandar al menos email o id. El resto es opcional.
No importa el orden: si llamás a identify() mientras el widget todavía está cargando, la llamada queda en cola y se aplica sola cuando termina de cargar.
Por defecto, las conversaciones viven en cada navegador. Si además firmás el email del usuario desde tu backend, el widget puede confiar en esa identidad: recupera todo el historial del usuario en cualquier navegador o dispositivo, y nadie puede hacerse pasar por otro mandando un email ajeno. Es opcional, no hace falta para empezar.
Tu secret está en la misma página del dashboard: Configuración → Widget, sección Opciones avanzadas (Identidad verificada). Guardalo como variable de entorno en tu servidor.
La firma es un HMAC-SHA256 del email, calculado en tu backend:
// En TU backend (Node.js). El secret nunca va al navegador.
import crypto from "crypto";
const userHash = crypto
.createHmac("sha256", process.env.VIBELAYERS_IDENTITY_SECRET)
.update(user.email.trim().toLowerCase())
.digest("hex");Pasale userHash a tu frontend junto con los datos del usuario y sumalo a la llamada:
window.Vibelayers.identify({
email: user.email,
name: user.name,
user_hash: userHash
});Dos detalles importantes:
user_hash todo sigue funcionando igual: identidad simple, historial por navegador.El secret nunca tiene que llegar al navegador. Firmá siempre en tu servidor y mandá al frontend solo el resultado (userHash). Si el secret se filtra, cualquiera podría hacerse pasar por tus usuarios.