Widget de Chat JavaScript

Cole este snippet no template da sua página, idealmente logo antes da tag de fechamento </body>. Ele carrega o widget de forma assíncrona, então não bloqueia a renderização.

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN"
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

É isso — a bolha de chat aparece imediatamente no canto inferior direito. Sem pacote npm, sem bundler, sem etapa de build. Funciona dentro de Next.js, React, Vue, temas Shopify, WordPress, HTML puro, em qualquer lugar onde JavaScript rode.

1. Faça login no dashboard do Deskwoot (como dono da conta, não como visitante final — o widget em si não requer login do usuário final).
2. Vá para Configurações → Caixas de entrada.
3. Crie uma nova caixa de entrada do tipo Website, ou abra a existente.
4. Abra a aba Instalar — o snippet pronto para colar com seu widgetToken específico da caixa de entrada é mostrado lá. Copie como está.

Um widgetToken = uma caixa de entrada. Conversas desse widget sempre caem nessa caixa de entrada, onde seus agentes as pegam. Para rotear para uma equipe ou conjunto de agentes diferente, crie uma segunda caixa de entrada e use seu token em uma página diferente.

Todas as opções de runtime ficam em window.deskwootSettings. Apenas widgetToken é obrigatório; tudo o mais tem um padrão sensato.

window.deskwootSettings = {
  widgetToken: "YOUR_WIDGET_TOKEN",
  color: "#2563EB",
  darkMode: false,
  position: "right",
  welcomeTitle: "Hi there!",
  welcomeMessage: "How can we help?",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

Se o visitante já estiver logado no seu site, passe seus dados de contato para que a conversa chegue com contexto completo em vez de como um visitante anônimo.

window.deskwootSettings = {
  widgetToken: "...",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

O Deskwoot identifica visitantes pelo e-mail. Se um contato com esse e-mail já existir na conta, o widget anexa-se ao mesmo registro de contato — todas as conversas anteriores, notas e atributos personalizados ficam visíveis ao agente que responde.

Depois que o script for carregado, window.deskwootWidget expõe um punhado de métodos para controlar o widget a partir da sua própria UI — por exemplo, um link "Fale conosco" na navegação que deve abrir o painel em vez de navegar para uma página de suporte.

// All methods wait until the widget has finished loading.
window.deskwootWidget.open();    // expand the chat panel
window.deskwootWidget.close();   // collapse the chat panel
window.deskwootWidget.toggle();  // open if closed, close if open

// Current unread agent-message count for this visitor:
console.log(window.__deskwootUnread);

Defina embedded: true quando você estiver hospedando o widget dentro de um container que deve ocupar a viewport completa — tipicamente uma WebView de app móvel, uma tela de Contato em página inteira ou um modal que já fornece sua própria estrutura.

No modo embedded, a bolha do launcher, o popup de gatilho e o botão de fechar ficam ocultos, e o painel se estende para position:fixed; inset:0 sem sombra, sem border-radius, sem deslocamento de 20px. O app iOS do Deskwoot usa exatamente esse modo dentro da sua tela integrada de Contatar Suporte.

<button onclick="window.deskwootWidget.open()">Contact Support</button>

Posicionamentos recomendados

Três padrões que vimos funcionar bem para suporte in-app:

<a href="#" onclick="window.deskwootWidget.open(); return false;" class="nav-item">
  <svg class="icon"><!-- chat-bubble icon --></svg>
  Contact Support
</a>

<div role="menuitem" onclick="window.deskwootWidget.open()">
  Chat with support
  <span class="kbd">?</span>
</div>

<button
  onclick="window.deskwootWidget.open()"
  style="position:fixed;bottom:20px;right:20px;background:#2563eb;color:#fff;border:0;border-radius:9999px;padding:12px 18px;box-shadow:0 6px 20px rgba(0,0,0,.15);cursor:pointer;font-weight:600"
>
  💬 Help
</button>

Dicas

• Chame deskwootWidget.toggle() em vez de open() se quiser que o mesmo gatilho feche o painel quando ele já estiver aberto.
• Mostre um badge de mensagens não lidas no seu gatilho usando window.__deskwootUnread — um número que se atualiza enquanto o painel está fechado.
• Coloque o gatilho de forma consistente entre as páginas autenticadas para que os usuários sempre saibam onde encontrar suporte. A posição global deixa de ser "chat oculto" e passa a ser "botão de suporte visível".

Para a instalação padrão (não-embedded) no site, você não precisa de nenhum gatilho personalizado — deskwoot.js renderiza a bolha sozinho e cuida do clique.

Se seu site roda com um cabeçalho CSP, coloque a origem do Deskwoot na lista de permitidos. Configuração mínima típica:

script-src  https://deskwoot.com;
connect-src https://deskwoot.com wss://deskwoot.com;
img-src     https://deskwoot.com data:;
style-src   'unsafe-inline';

O style-src 'unsafe-inline' é necessário porque o widget injeta seu próprio stylesheet. Se sua CSP proibir estilos inline, podemos passar para um nonce — escreva para nós em hello@deskwoot.com.