Instalación del widget

Instalación básica

Añade esta etiqueta script a tu sitio web, justo antes de la etiqueta de cierre </body>:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID' });
</script>

Código con inicio automático

También puedes usar una sola etiqueta script si no necesitas poner comandos en cola antes de que se cargue el widget:

<script
  src="https://www.usesonny.com/widget.js"
  data-site-id="YOUR_SITE_ID"
  async
></script>

Identifica a los visitantes y envía atributos personalizados

Cuando un usuario inicie sesión en tu sitio, llama a sonny('identify') con su correo y cualquier dato adicional que quieras que vea tu equipo de soporte. Pasa los campos adicionales en attributes: las claves nuevas se crean automáticamente como campos personalizados y se muestran en el lateral derecho de la conversación. Las llamadas posteriores sobrescriben el valor anterior.

<script>
  // Identify the visitor and pass any custom attributes you want
  // surfaced in the agent sidebar. Unknown keys are auto-created
  // as Custom Fields in your workspace settings.
  sonny('identify', {
    email: 'jane@acme.com',
    name: 'Jane Doe',
    attributes: {
      plan: 'pro',
      mrr: 499,
      signedUpAt: '2025-08-01T00:00:00Z',
      website: 'https://acme.com'
    }
  });
</script>

Tipos de valor admitidos: cadena, número, booleano, fecha ISO-8601 y URL. Pasa null para borrar un atributo. Las claves deben empezar por una letra, usar solo letras, números o guiones bajos y tener como máximo 64 caracteres. Las claves email, name, id, phone, createdAt y updatedAt están reservadas. Los valores de texto se limitan a 1000 caracteres. Límite: 50 atributos por llamada.

Abre el widget desde tu propio botón

¿Quieres abrir el chat desde tu propio botón en lugar de la burbuja flotante? Pasa hideLauncher: true a sonny('init') para ocultar el lanzador integrado y llama a sonny('open') desde cualquier elemento de tu página.

<!-- 1. Boot Sonny with its built-in launcher hidden -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['Sonny']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','sonny','https://www.usesonny.com/widget.js');
  sonny('init', { siteId: 'YOUR_SITE_ID', hideLauncher: true });
</script>

<!-- 2. Open the chat from your own button, anywhere on the page -->
<button onclick="sonny('open')">Chat with us</button>

Estos comandos controlan el widget desde cualquier parte de tu página:

• sonny('open'): abre el panel del chat.
• sonny('close'): lo cierra.
• sonny('toggle'): lo abre o lo cierra, ideal para un único botón de alternancia.
• sonny('show') y sonny('hide'): muestran u ocultan todo el widget, por encima de tus reglas de visualización.
• sonny('getUnreadCount', callback): lee el número actual de no leídos en cualquier momento.

¿Prefieres la instalación con una sola etiqueta script? Añade data-hide-launcher a la etiqueta script para ocultar el lanzador y conecta tu botón a los mismos comandos.

Muestra las respuestas no leídas en tu propio botón

Al ocultar el lanzador también se oculta su insignia de no leídos, así que Sonny se lo comunica a tu página. El widget emite un evento sonny:unread en window con detail.count, el mismo número que mostraría el lanzador integrado. Perfecto para una insignia en tu propia navegación móvil.

<button id="chat-button" onclick="sonny('open')">
  Chat with us
  <span id="chat-unread" hidden></span>
</button>

<script>
  function showUnread(count) {
    var badge = document.getElementById('chat-unread');
    badge.textContent = count > 9 ? '9+' : count;
    badge.hidden = count === 0;
  }

  // Fires once after the widget loads, then on every change.
  window.addEventListener('sonny:unread', function (event) {
    showUnread(event.detail.count);
  });

  // Optional: read the count on demand (e.g. after your own nav re-renders).
  sonny('getUnreadCount', showUnread);
</script>

El contador incluye las respuestas de agentes no leídas en todas las conversaciones del visitante. Se emite una vez poco después de que se cargue el widget (así, un listener añadido al cargar la página siempre recibe el estado actual) y de nuevo cada vez que cambia, incluido cuando vuelve a 0 al abrir el visitante el chat.

Opciones de personalización

Personaliza el widget desde la pestaña «Chat en vivo» de tu canal en Sonny.

Siguientes pasos

Ahora que tienes el widget instalado, configura también el reenvío de correo.

Documentación relacionada

• Personalizar el widget

  Adapta el widget a tu marca con colores, logotipos, mensajes y comportamiento.

• Identificación de visitantes

  Identifica a los usuarios con sesión iniciada y envía atributos personalizados desde tu sitio web.

• Dónde aparece el widget

  Muestra u oculta el widget según la página, el visitante, un parámetro de URL, la fecha, el horario, el dispositivo o el tiempo en la página.

• SDK de chat para móviles

  Añade el chat con visitantes a tu app de iOS, Android o React Native. Consulta los SDK públicos, las apps de ejemplo y los gestores de incidencias.

• Configurar el correo

  Reenvía tu correo de soporte a Sonny y gestiona el correo junto al chat en vivo.

• Canales

  Crea y gestiona los lugares donde tus clientes te contactan por chat en vivo y correo electrónico.