Web Chat (Widget)

Instale e configure o widget de chat no seu site, com texto e voz.

Visão geral

O Web Chat é o widget que você instala no seu site para os visitantes conversarem com o agente — por texto, por voz ou pelos dois. Diferente dos outros canais, ele não usa webhook: fala direto com o serviço de agente por WebSocket.

Obtendo o código de instalação

Acesse Canais no menu lateral
Selecione Web Chat
Escolha o agente que vai atender
Copie o código de instalação

<!-- TakeSales Voice Agent Widget -->
<script>
  window.TakeSalesConfig = {
    agentId: 'SEU_AGENT_ID',
    httpUrl: 'https://api-agent.takesales.ai'
  };
</script>
<script src="https://api-agent.takesales.ai/takesales-widget.min.js"></script>

ℹ️

O snippet gerado no painel já vem com o agentId e a URL corretos do seu ambiente — prefira copiá-lo a montar o código à mão.

Instalando

HTML

Cole o snippet antes de </body>.

Next.js / React

import Script from 'next/script';
 
export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script id="takesales-config" strategy="lazyOnload">
        {`window.TakeSalesConfig = { agentId: 'SEU_AGENT_ID', httpUrl: 'https://api-agent.takesales.ai' };`}
      </Script>
      <Script src="https://api-agent.takesales.ai/takesales-widget.min.js" strategy="lazyOnload" />
    </>
  );
}

Vue

<script setup>
import { onMounted } from 'vue';
 
onMounted(() => {
  window.TakeSalesConfig = { agentId: 'SEU_AGENT_ID', httpUrl: 'https://api-agent.takesales.ai' };
  const script = document.createElement('script');
  script.src = 'https://api-agent.takesales.ai/takesales-widget.min.js';
  script.async = true;
  document.body.appendChild(script);
});
</script>

Angular

Cole o snippet no index.html, antes de </body> — é a forma mais simples e evita duplicar a inicialização em navegações internas.

WordPress

Use o editor de tema (footer) ou um plugin de inserção de scripts, colando o snippet na seção de rodapé.

Origens permitidas

Por segurança, liste os domínios que podem incorporar o widget em Canais → Web Chat → Origens permitidas (ou em Agentes → Segurança).

As origens precisam começar com https://
Deixar a lista vazia permite qualquer site
O painel do Take Sales sempre tem acesso, para o modo de teste

⚠️

Em produção, preencha as origens. Sem elas, qualquer site pode embutir o seu agente — e consumir os seus créditos.

Personalizando

A aparência e o comportamento vêm das configurações do agente (Agentes → [agente] → Aparência / Recursos da conversa):

Área	O que dá para configurar
Cores	Primária, secundária, fundo, fonte e balão do agente
Ícone e posição	Ícone do botão (ou imagem própria) e um dos quatro cantos
Tela inicial	Estilo (padrão, boas-vindas, destaque), título, mensagem, texto do botão, logo e botões extras
Pré-abertura	Convite exibido antes de abrir o chat: balão, card com campo de pergunta, agente online, boas-vindas ou destaque
Abas	Barra estilo messenger com Início, Mensagens e Ajuda
Conversa	Voz, chat de texto, respostas rápidas, compartilhamento de tela, ações no DOM, busca no Google
Privacidade	Exigir consentimento (LGPD/GDPR), limpar histórico ao fechar, permitir baixar a conversa
Marca	Exibir ou esconder "Powered by Take Sales"

Veja o guia de configuração do widget para os detalhes de cada opção.

Identificando o visitante

Se o seu site tem login, você pode assinar a identidade do usuário no seu servidor e passá-la ao widget (userId + userHash). A conversa passa a ser vinculada àquela pessoa em vez de confiar no navegador. Veja Workspace → Verificação de identidade.

Testando

Abra o site com o widget instalado
Confirme que o botão flutuante aparece
Envie uma mensagem e verifique a resposta
Confirme que a conversa aparece em Conversas, com o canal Widget

💡

Para testar sem publicar nada, use o Teste de cenário no card do agente: você informa a URL do site e a plataforma abre o site real com o widget sobreposto.

Solução de problemas

Confirme que o agentId está correto e que o agente está ativo
Veja o console do navegador (F12) — o widget loga erros de inicialização
Verifique se um bloqueador de anúncios não barrou o script
Confirme que o domínio está nas origens permitidas

O agente precisa estar ativo e ter diretrizes configuradas
Verifique se o domínio api-agent.takesales.ai não está bloqueado por firewall/proxy
Confira o status do serviço Agent em Configurações → Status

O microfone não funciona

A API de microfone exige HTTPS (exceto em localhost) e permissão do navegador. Veja configurações de voz.