---
title: "Instalá el widget en tu sitio"
description: "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…"
collection: "Primeros pasos"
source: Vibelayers
url: https://ayuda.vibelayers.app/instalar-el-widget
updated: 2026-07-25T16:12:13.143376+00:00
language: es-AR
---

# Instalá el widget en tu sitio

> 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…

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**.

## Instalación en tres pasos

1.

#### Copiá el snippet desde el dashboard
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.

2.

#### Pegalo antes del cierre de `</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.

3.

#### Verificá que aparezca
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.

## Qué hace el snippet

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:

- Crea un <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.
- Todo corre adentro del iframe, aislado de tu página: no pisa tu CSS ni tu JavaScript.
- Instala window.Vibelayers, una API global con dos funciones: identify() y reset().
- El widget hereda los colores que configuraste en **Configuración → Personalización**.

## Identificá al usuario logueado

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.

## Identidad verificada con user\_hash \(opcional\)

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:

- El hash se calcula sobre el email **normalizado**: sin espacios y en minúsculas, igual que en el ejemplo. Si tu backend y el identify usan emails distintos, la verificación falla.
- Sin 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.