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>Traduzido para 11 idiomas: inglês, japonês, coreano, chinês (simplificado e tradicional), espanhol, francês, alemão, português, árabe e russo. O árabe é exibido da direita para a esquerda, e o chinês segue a escrita do visitante — tradicional para Taiwan, Hong Kong e Macau, simplificado nos outros casos. Qualquer outro idioma cai para o inglês em vez de mostrar um balãozinho traduzido pela metade, então data-lang="it" te dá inglês.
data-lang. A resposta da IA segue o idioma em que o cliente escreve. A sua base de conhecimento pode estar escrita em qualquer idioma: a IA encontra os artigos pelo que a pergunta quer dizer, não pelas palavras exatas, então um artigo em inglês responde a uma pergunta em japonês — em japonês, com uma tradução fiel. Escreva uma vez só, no idioma que a sua equipe domina melhor. 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.
A cor da sua marca
Enquanto você não escolhe uma, o chat usa o nosso azul-petróleo. Escolha a sua própria cor e ela passa a ser usada no cabeçalho do chat, nos botões dele e nas mensagens do seu cliente, no botão de fechar (✕) que o balãozinho mostra enquanto o chat está aberto, e no seu formulário web hospedado por nós.
- Abra as Settings do seu desk. Na seção Web chat, encontre Brand color (cor da marca), logo abaixo de Chat bubble icon.
- Escolha uma cor e clique em Save color (salvar cor).
- Mudou de ideia? O Reset to default devolve o nosso azul-petróleo.
A sua cor chega ao seu site em cerca de 5 minutos, e não há nada para colar de novo. Assim como o ícone, só os administradores do desk e o proprietário podem mudá-la.
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 do botão é uma imagem, então a cor da sua marca não o repinta — o que os visitantes veem é o ícone que você enviou. 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.
Quando o ticket é resolvido e uma pesquisa de satisfação é enviada, o visitante que ainda está com o chat aberto a vê como um cartão na conversa e pode responder ali mesmo.
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.