Widget no seu site

O widget é a forma mais rápida de pôr o atendente Intelibot no ar. Você cola um trecho de código no seu site e em segundos aparece um botão de chat flutuante no canto inferior direito. Quando o visitante clica, abre a janela de conversa.

Funciona em qualquer site, incluindo WordPress, Wix, Shopify, Nuvemshop, Webflow, Framer, ou um HTML que você fez à mão.

Onde fica no painel

No menu lateral do atendente, vá em Canais > Widget. A tela tem três abas:

Aba Conteúdo

O que o visitante vê quando abre o chat. As principais opções:

• Nome de exibição: aparece no cabeçalho do chat. Quando deixado em branco, o widget usa o nome do atendente como padrão.
• Mensagens iniciais: o que o atendente "diz" antes do visitante começar a conversar. Padrão é "Olá! Como posso ajudar?". Você pode ter mais de uma, ordená-las e adicionar quantas precisar.
• Mensagens sugeridas: botões clicáveis que aparecem acima do campo de mensagem. Ideal para dúvidas frequentes. Ex.: "Quanto custa uma limpeza?", "Tem horário para amanhã?".
• Manter sugestões visíveis: chave de liga/desliga que decide se as sugestões aparecem só na primeira mensagem ou em todas.
• Placeholder da mensagem: texto cinza dentro do campo de entrada quando está vazio.
• Coletar feedback do usuário e Copiar mensagens: ícones de polegar e de copiar abaixo de cada resposta do bot.
• Aviso no topo do chat: banner que o visitante pode fechar (útil para um aviso como "Usamos IA para auxiliar nas respostas").
• Política de privacidade: link da sua política. Quando preenchido, o widget mostra um aviso de LGPD acima do campo de mensagem.
• Marca Intelibot: o selo "Desenvolvido por Intelibot" aparece no rodapé. Para tirá-lo, contrate o item Sem o selo Intelibot.
• Pop-up automático: dispara mensagens flutuantes depois de N segundos para chamar a atenção do visitante, com opção de som de notificação (até 3 mensagens).
• Voz para texto: ícone de microfone no campo de entrada (marcado como Em breve no painel).

Aba Estilo

Personaliza a aparência do botão flutuante e da janela:

• Aparência: tema claro ou escuro
• Foto de perfil: imagem que aparece no cabeçalho do chat e ao lado das mensagens do bot (JPG, PNG, SVG ou WebP, até 1 MB)
• Cor principal: usada no cabeçalho, botões e destaques
• Usar cor principal no cabeçalho: toggle que aplica a cor principal como fundo do topo do chat
• Cor do botão flutuante: cor do botão que abre o chat (quando não definida, herda a cor principal)
• Posição do botão: canto inferior direito ou esquerdo

Mexa primeiro nessa aba antes de instalar no site, para deixar com a cara do seu negócio.

Aba Incorporar (a que importa para instalar)

Três seções importantes:

Chave do widget

A chave é o identificador único do seu widget (algo como wk_2438fb554518421e). Ela aparece no código de incorporação e é o que o Intelibot usa para saber que aquele site está autorizado a usar esse atendente.

• Copiar: copia a chave para área de transferência
• Regenerar: gera uma nova chave. Use só se vazou ou se você quer "desligar" todos os sites que estavam usando a chave anterior (eles param de funcionar imediatamente)

Domínios permitidos

Por padrão, qualquer site pode incorporar seu widget se tiver a chave. Para travar e só permitir domínios específicos (recomendado em produção), ligue a opção e cadastre os domínios do seu negócio (ex.: meusite.com.br, www.meusite.com.br).

Isso evita que alguém copie sua chave e use no site dele.

Tipo de incorporação

Duas formas:

• Chat widget (padrão): botão flutuante com tudo. Recomendado para maioria dos sites.
• Iframe: o chat aparece incorporado direto numa área específica da página, sem botão flutuante. Útil para páginas de contato dedicadas.

Código de incorporação

Logo abaixo, aparece o snippet para copiar:

<script>
  (function () {
    var d = document, s = d.createElement("script");
    s.src = "https://widget.intelibot.com.br/embed.js";
    s.async = true;
    s.dataset.key = "wk_xxxxxxxxxxxxxxxx";
    d.body.appendChild(s);
  })();
</script>

A instrução é simples: cole esse código antes do </body> no HTML do seu site. Cada plataforma tem o seu jeito de fazer isso. Veja abaixo o passo a passo da sua.

Instalação por plataforma

Testando se funcionou

Resolvendo problemas

O botão não aparece:

• Confira se o código foi colado antes do </body>. Se estiver no <head> pode dar problema
• Confira se a chave no snippet bate com a do painel
• Se você ativou "domínios permitidos", confira se o domínio onde está testando está na lista (incluindo www e não-www separadamente, se for o caso)
• Abra o console do navegador (F12) e procure erros de rede ou CORS

Aparece um botão, mas o chat não abre quando clica:

• Pode ser conflito com outro chat ou widget no mesmo site. Tente desativar o outro e ver
• Se o site usa cache (Cloudflare, WP Rocket, etc.), limpe o cache

Atendente responde com mensagem genérica e errada:

• Não é problema do widget. Volte para o painel do atendente e revise as Instruções e a Base de conhecimento. Veja Atendente respondendo errado

Próximos passos