Instalação do widget

Instalação básica

Adicione esta tag de script ao seu site, logo antes da tag de fechamento </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 com inicialização automática

Você também pode usar uma única tag de script se não precisar enfileirar comandos antes de o widget carregar:

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

Identifique visitantes e envie atributos personalizados

Depois que um usuário fizer login no seu site, chame sonny('identify') com o e-mail dele e quaisquer dados extras que sua equipe de suporte deva ver. Envie os campos extras em attributes — chaves novas são criadas automaticamente como campos personalizados e aparecem no lado direito da conversa. Chamadas seguintes substituem o 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 aceitos: string, número, booleano, data ISO-8601 e URL. Envie null para limpar um atributo. As chaves devem começar com uma letra, usar apenas letras, números ou sublinhados e ter no máximo 64 caracteres. As chaves email, name, id, phone, createdAt e updatedAt são reservadas. Valores de texto são limitados a 1.000 caracteres. Limite: 50 atributos por chamada.

Abra o widget com o seu próprio botão

Quer abrir o chat com um botão seu em vez da bolha flutuante? Passe hideLauncher: true para sonny('init') para ocultar o botão do chat padrão e chame sonny('open') a partir de qualquer elemento da sua 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>

Estes comandos controlam o widget de qualquer lugar da sua página:

• sonny('open') — abre o painel do chat.
• sonny('close') — fecha o painel.
• sonny('toggle') — alterna entre aberto e fechado, ideal para um único botão.
• sonny('show') e sonny('hide') — mostram ou ocultam o widget inteiro, ignorando suas regras de exibição.
• sonny('getUnreadCount', callback) — lê a contagem atual de não lidas a qualquer momento.

Prefere a instalação com uma única tag de script? Adicione data-hide-launcher à tag de script para ocultar o botão do chat e ligue o seu botão aos mesmos comandos.

Mostre respostas não lidas no seu próprio botão

Ocultar o botão do chat também oculta o selo de não lidas, então o Sonny avisa a sua página. O widget dispara um evento sonny:unread em window com detail.count — o mesmo número que o botão do chat padrão mostraria. Perfeito para um selo na navegação mobile do seu site.

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

A contagem cobre as respostas não lidas dos agentes em todas as conversas do visitante. O evento é disparado uma vez logo após o widget carregar — assim, um listener adicionado no carregamento da página sempre recebe o estado atual — e de novo sempre que o número muda, inclusive quando volta a 0 depois que o visitante abre o chat.

Opções de personalização

Personalize o widget na aba "Chat ao vivo" do seu canal no Sonny.

Próximos passos

Agora que o widget está instalado, configure também o encaminhamento de e-mail.

Documentos relacionados

• Personalizar o widget

  Deixe o widget com a cara da sua marca: cores, logotipo, mensagens e comportamento.

• Identificação de visitantes

  Identifique usuários conectados e envie atributos personalizados a partir do seu site.

• Onde o widget aparece

  Mostre ou oculte o widget por página, visitante, parâmetro de URL, data, agenda, dispositivo ou tempo na página.

• SDKs de chat para celular

  Adicione o chat com visitantes ao seu app iOS, Android ou React Native. Explore os SDKs públicos, apps de exemplo e rastreadores de problemas.

• Configurar o e-mail

  Encaminhe seu e-mail de suporte para o Sonny e gerencie e-mails junto com o chat ao vivo.

• Canais

  Crie e gerencie os lugares onde os clientes falam com você por chat ao vivo e e-mail.