Inbox de Site (Web Widget)
O Web Widget é o canal mais simples de configurar — não exige credenciais externas, só um trecho de script no seu site.
O que o cliente vê
C
Olá! Como posso ajudar hoje?
Quero saber sobre o plano Pro
Claro, você é cliente novo ou já tem conta?
Configuração rápida
Criar a inbox
Configurações → Inboxes → + Nova Inbox → Site.
Preencha:
- Nome do widget — aparece no cabeçalho ("Suporte", "Vendas", etc.)
- Domínio do site — onde o widget vai rodar (ex:
meusite.com.br) - Cor primária — combina com o branding da sua marca
Configurar saudação e tempo de resposta
- Mensagem de saudação — primeira mensagem que o visitante vê
- Estimativa de resposta — "em alguns minutos", "em até 1 hora", etc.
- Coletar e-mail — pede e-mail antes do primeiro contato (opcional)
- CSAT — pergunta se a conversa foi útil ao final
Copiar o script
Após criar, vá em Configurações da inbox → Script de instalação. Cole o código antes do
</body>do seu site.html<script> (function(d,t) { var BASE_URL = "https://desk.cosmobots.io"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function() { window.cosmoSDK.run({ websiteToken: "SEU_TOKEN_AQUI", baseUrl: BASE_URL }); }; })(document, "script"); </script>
Configurações disponíveis
🎨
Visual
Cor, posição (canto inferior direito/esquerdo), avatar, nome.
💬
Mensagens
Saudação, "respondemos em X", mensagem ao resolver.
🔧
Recursos do widget
Anexos, emoji, ler mensagens em voz, encerrar conversa, avatar do bot.
📧
E-mail / continuidade
Pede e-mail no início. Conversas continuam por e-mail se ele não estiver online.
🎯
Trava por sessão
1 conversa por visitante (recomendado para vendas) ou várias conversas em paralelo.
⭐
CSAT no fim
Pergunta de 1 a 5 estrelas e comentário ao resolver.
API JavaScript do widget
O script expõe window.cosmoSDK com métodos úteis:
js
// Identificar o visitante (pra não perder histórico)
cosmoSDK.setUser("user-123", {
email: "fulano@empresa.com",
name: "Fulano",
// qualquer atributo customizado
plan: "pro"
});
// Adicionar atributos custom à conversa
cosmoSDK.setConversationAttributes({
origem: "campanha-google",
pedido: "ABC-123"
});
// Abrir/fechar o widget programaticamente
cosmoSDK.toggle();
cosmoSDK.popoutChatWindow();
// Receber eventos
cosmoSDK.on("ready", () => console.log("widget pronto"));
cosmoSDK.on("message_received", (msg) => console.log(msg));