Onde pegar o código do WebChat para colocar no seu site
Quer o balão de conversa da Talqui no site da sua empresa? Tudo começa por um pequeno código que a própria Talqui gera para você. Neste artigo você vê onde encontrar esse código, em que parte do HTML ele entra e como pedir nome, e-mail e telefone do visitante antes de a conversa começar.
O código vem do plugin WebChat. Se ele ainda não estiver instalado na sua conta, é só instalar: o código é criado na mesma hora, sem precisar configurar nada antes.
Só donos e gerentes da conta conseguem instalar o WebChat. Para os demais perfis, o botão de instalar aparece bloqueado.
Quando usar
Você está colocando o chat no site pela primeira vez e precisa do código para mandar para quem cuida do site.
A agência ou o desenvolvedor pediu "o script do chat".
O chat já está instalado, mas você perdeu o código e precisa dele de novo.
Você quer filtrar quem abre o chat e receber só contatos identificados.
Passo a passo: instalando o WebChat e pegando o código
No menu lateral, clique em Extensions (em português, Extensões). A lista de todos os plugins disponíveis para a sua conta abre em All Plugins (Todas as extensões).
Role a lista até encontrar o card WebChat. Se o botão do card for View Details (Detalhes), o plugin ainda não está instalado. Clique nele.
Na janela do WebChat, em Connections (Conexões), clique em Install (Instalar). O WebChat é gratuito, por isso a instalação acontece direto, sem etapa de contratação.
Em poucos segundos aparece a confirmação de que o plugin foi instalado e a Talqui abre sozinha a tela do WebChat, já com o seu código pronto no card Instalação, do lado direito.
Clique em Copiar, no canto do bloco de código, e envie o código para quem cuida do seu site.
A tela interna do WebChat aparece em português mesmo quando a Talqui está em outro idioma. Por isso o vídeo, gravado com a interface em inglês, mostra os textos dessa parte em português.
O código de instalação
O card Instalação reúne tudo o que você precisa para colocar o chat no ar:
O código tem este formato:
<script type="text/javascript">
window.__TALQUI_TID = "identificador-da-sua-conta";
window.__TALQUI_PCID = "identificador-do-seu-webchat";
</script>
<script src="https://webchat.talqui.chat/t.js" async></script>As duas linhas com
window.dizem para o chat qual é a sua conta e qual é o seu WebChat. É isso que faz as conversas do site caírem na sua caixa de entrada da Talqui. Esses valores são únicos, então copie sempre o código da sua própria tela, nunca de um exemplo.A última linha carrega o balão de chat. O
asyncfaz o chat carregar em paralelo, sem atrasar a abertura do seu site.
Cole o código exatamente como ele foi copiado. Trocar ou apagar um caractere dos identificadores faz o chat não aparecer ou não entregar as mensagens.
Em que parte do HTML colar
O próprio aviso do card responde: cole o código dentro da tag <head> ou logo antes do fechamento da tag </body> do seu site. Os dois lugares funcionam; escolha um só.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<title>Minha empresa</title>
<!-- Opção 1: cole o código do WebChat aqui, antes de </head> -->
</head>
<body>
<!-- conteúdo do seu site -->
<!-- Opção 2: ou cole aqui, logo antes de </body> -->
</body>
</html>Para o balão aparecer em todas as páginas, o código precisa estar em todas elas. Na maioria dos sites isso significa colar uma vez só, no cabeçalho ou no rodapé que é compartilhado por todas as páginas.
Link direto: o chat sem instalar nada
Logo abaixo do código fica o Link direto. Ele abre o WebChat em tela cheia, sem precisar mexer no site. Use em link da bio do Instagram, assinatura de e-mail, QR code impresso ou dentro do seu aplicativo. O botão Copiar ao lado funciona do mesmo jeito que o do código.
Formulário de pré-atendimento
Sabe aquele visitante que clica no balão só por curiosidade, manda um "oi" e some? O formulário de pré-atendimento resolve isso. Com ele ligado, a pessoa precisa se identificar antes de mandar a primeira mensagem. Você recebe menos conversas vazias e cada conversa que chega já vem com os dados do contato, pronta para virar um lead.
Ele fica no card Personalização do WebChat, do lado esquerdo da mesma tela, e vem desligado quando o plugin é instalado.
Ativar formulário de pré-atendimento
A chave principal. Ligada, o formulário passa a aparecer no chat do seu site. Se você ligar essa chave sem escolher nenhum campo, a tela avisa "Selecione ao menos um campo para o formulário aparecer no chat": sem campo, não há formulário.
Os campos
São quatro: Nome, Sobrenome, E-mail e Telefone. Ligue a chave de cada campo que você quer pedir. Eles aparecem para o visitante nessa mesma ordem.
Obrigatório
Cada campo tem a sua chave Obrigatório, que só pode ser ligada depois que o campo está ligado.
Campo obrigatório: o visitante não consegue começar a conversa sem preencher.
Campo opcional: aparece com "(opcional)" ao lado do nome, e o visitante pode deixar em branco.
Salvar
Depois de ajustar, clique em Salvar, no topo da tela. O botão só fica ativo quando existe alguma mudança. A mudança vale para o chat do seu site assim que é salva, sem precisar trocar o código que já está instalado.
O que o visitante vê
Quando o formulário está ligado, o espaço de escrever mensagem dá lugar aos campos que você escolheu e ao botão Iniciar conversa. O botão só libera depois que os campos obrigatórios estão preenchidos e o e-mail e o telefone estão num formato válido; se não estiverem, o visitante vê "E-mail inválido" ou "Telefone inválido". Depois de enviar, a conversa começa normalmente e os dados vão para o contato na Talqui.
O formulário é pedido uma vez só: quem já preencheu não vê o formulário de novo naquele navegador.
Voltando ao código depois
O código não muda depois que o WebChat está instalado, e você pode pegá-lo de novo sempre que precisar:
Clique em Extensions (Extensões) no menu lateral.
Vá em Installed Plugins (Extensões instaladas).
No card do WebChat, que agora mostra a etiqueta Installed, clique em Configure (Configurar).
A mesma tela do WebChat abre, com o formulário de pré-atendimento à esquerda e o código à direita:
Perguntas frequentes
O WebChat é pago?
Não. O plugin aparece com a etiqueta Free e é instalado sem etapa de contratação.
Preciso instalar o plugin de novo para pegar o código outra vez?
Não. Com o WebChat instalado, o código fica sempre disponível em Extensions > Installed Plugins > WebChat > Configure.
Não consigo clicar em Install. Por quê?
Só donos e gerentes da conta podem instalar plugins. Peça para uma dessas pessoas instalar o WebChat; depois disso, o código fica visível na tela do plugin.
Colo o código no head ou antes do fechamento do body?
Tanto faz, os dois funcionam. Escolha um lugar só e não cole o código duas vezes na mesma página.
Mudei o formulário de pré-atendimento. Preciso colar o código de novo no site?
Não. As mudanças salvas na tela do WebChat valem para o chat que já está no site; o código continua o mesmo.
Quem já preencheu o formulário precisa preencher de novo?
Não. Depois de enviado, o formulário não aparece de novo para aquele visitante no mesmo navegador.
Dá para usar o chat sem mexer no site?
Dá. Use o Link direto, que abre o WebChat em tela cheia. Ele serve para bio de redes sociais, e-mails, QR codes e aplicativos.
Continue explorando
Este artigo foi útil?