O widget de chat no site é um balãozinho de chat que você coloca em qualquer página da web com uma única tag <script>. Os visitantes conversam com a sua IA; quando uma pessoa assume, as respostas dela aparecem no mesmo balãozinho — ao vivo.
wk_…) que leva cada conversa até o seu desk. Use o Copy snippet de lá, e o Preview widget para ver o resultado antes de ele chegar perto do seu site. Veja as Settings.Adicionando ao seu site
Cole o trecho de código logo antes da sua tag </body> de fechamento:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here"></script>O widget carrega no próprio frame, então não entra em conflito com os estilos nem com os scripts do seu site.
Opções
| Atributo | O que faz |
|---|---|
data-key |
Obrigatório. A widget key do seu desk, que está nas Settings. |
data-position |
right (padrão) ou left — em que canto o balãozinho fica. |
data-offset |
Pixels a partir do canto (padrão 20). |
data-lang |
Fixa o idioma do widget, por exemplo ja. Deixe de fora e cada visitante vê o idioma do próprio navegador. |
Se a sua página mostra um selo do reCAPTCHA no mesmo canto, o widget sobe automaticamente acima dele para que os dois não se sobreponham.
Em que idioma o widget fala
Se você não mexer, o widget segue o idioma do navegador de cada visitante. Um visitante japonês num site em inglês recebe o balãozinho em japonês; não há nada para configurar, e visitantes diferentes numa mesma página podem ver idiomas diferentes.
Para fixar um único idioma — o caso de um site que atende um mercado só, não importa quem esteja lendo — acrescente o data-lang:
<script src="https://blz.actionbridge.io/support/widget.js" data-key="wk_your_key_here" data-lang="ja"></script>Traduzidos hoje: inglês e japonês. Qualquer outro valor cai para o inglês em vez de mostrar um balãozinho traduzido pela metade, então data-lang="de" te dá inglês até que o alemão seja acrescentado.
data-lang. A resposta da IA segue o idioma em que o cliente escreve. E a IA só consegue responder a partir de artigos da base de conhecimento escritos naquele idioma — um artigo em inglês não responde a uma pergunta em japonês. Se você atende clientes em dois idiomas, escreva seus artigos nos dois. Veja sua base de conhecimento.O mesmo vale para o formulário web hospedado por nós: acrescente ?lang=ja ao endereço dele para fixar o idioma, ou deixe de fora para seguir o visitante.
Usando o seu próprio ícone de balão
Por padrão, o botão no seu site é o nosso balãozinho azul-petróleo com um ícone de balão de fala (💬). Você pode substituí-lo por um PNG seu para que o widget pareça parte do seu site. A imagem que você envia vira o botão inteiro: ela preenche todo o botão de 56 pixels, e a nossa bolinha azul-petróleo deixa de ser desenhada atrás dela.
- Abra as Settings do seu desk. Vá até a seção Web chat e encontre Chat bubble icon.
- Clique em Upload PNG e escolha o seu arquivo. O balãozinho de pré-visualização ao lado do botão mostra exatamente como ele vai ficar.
- Mudou de ideia? O Reset to default devolve o nosso ícone de balão de fala.
| Imagem | O que funciona |
|---|---|
| Formato de arquivo | PNG |
| Tamanho recomendado | Quadrada, de no mínimo 112×112 pixels |
| Tamanho exibido | Preenche o botão inteiro, 56×56 pixels |
| Forma | Definida pela própria imagem — um fundo transparente é fortemente recomendado |
| Tamanho do arquivo | 256 KB no máximo |
O botão é desenhado a 56×56 pixels, então um original de 112×112 (ou maior) mantém a sua marca nítida em telas de alta resolução. Uma sombra sutil é acrescentada por nós e acompanha o contorno da sua arte, então não é preciso embutir uma no PNG.
O ícone é a única parte do botão que você pode mudar — a cor do nosso balãozinho padrão não é configurável. Na prática isso pesa menos do que parece: como a nossa bolinha não é mais desenhada atrás da sua imagem, um PNG transparente faz com que a cor que os visitantes veem seja a cor da sua própria arte.
O que o visitante vê
- Ele abre o balãozinho e deixa nome, e-mail e uma primeira mensagem.
- A IA responde a partir do seu conhecimento, com as fontes, ali mesmo no chat — sem esperar por ninguém da sua equipe.
- Uma pessoa pode assumir — a resposta dela aparece no mesmo chat em poucos segundos.
O e-mail que ele deixa é por onde ele é reconhecido na próxima vez — veja seu cadastro de clientes.
data-key em todo lugar onde o trecho está colado, e em qualquer lugar de onde o seu formulário o envie.O chat no site é um dos cinco caminhos de entrada — veja como os clientes falam com você e como um ticket funciona depois que uma conversa começa.