Widget
O chat flutuante para o seu site, com instalação em quatro formatos, controle por código, aparência por tamanho de tela e restrição de origem.
O widget é um chat que vive dentro do seu site. Ele carrega isolado da sua página, de modo que os seus estilos não vazam para ele nem os dele para você, e nenhuma briga de CSS é possível entre os dois.
Instalar
Um trecho, colado uma vez. A plataforma o gera já com o identificador do canal, em quatro formatos:
| Formato | Onde vai |
|---|---|
| HTML | antes do fechamento do body, em qualquer site |
| Next.js | um componente com next/script |
| React | um componente com useEffect |
| Google Tag Manager | uma tag de HTML personalizado |
O carregamento é assíncrono e espera a página ficar pronta, então o widget não disputa recurso com o que importa, que é o seu conteúdo. Colar o trecho duas vezes também não duplica nada, porque ele reconhece uma instalação que já está de pé e desiste.
Controlar por código
O trecho instala window.sublime, que responde a comandos mesmo antes de o widget terminar de carregar: chamadas feitas cedo entram em fila e são executadas quando ele sobe, o que evita a corrida clássica entre o seu código e o script de terceiro.
window.sublime('open') // abre o chat
window.sublime('close') // fecha
window.sublime('toggle') // alterna
window.sublime('getState') // 'loading' · 'initialized' · 'destroyed'
window.sublime('destroy') // remove o widget da página
É assim que um botão seu abre o chat, ou que uma etapa do seu funil o dispara no momento certo em vez de deixá-lo esperando em um canto. As duas formas de chamar funcionam, então window.sublime.open() faz o mesmo que a versão acima.
Aparência
O painel do canal configura o widget em grupos, e o que você muda aparece na hora na pré-visualização ao lado.
Widget cuida do comportamento: a posição entre seis pontos da tela, as medidas e o espaçamento, o som de notificação com arquivo próprio se quiser, o envio de arquivos, o envio de áudio e a marca da Sublime.
Aparência cuida do tema. Você declara a paleta inteira para o modo claro e para o escuro, com nove cores cada, além de arredondamento, fonte, tamanho de texto e efeitos de fundo. O modo inicial pode ser claro, escuro ou o do sistema, e você decide se o visitante ganha o botão de alternar entre eles.
Launcher cuida do que abre o chat. Ele pode ser o botão padrão, com ou sem o avatar do agente e com ou sem sugestões de primeira mensagem, pode ser um campo de entrada que já convida a escrever, ou pode simplesmente não existir, quando quem abre é o seu código.
A configuração é declarada por tamanho de tela, e o celular herda tudo do desktop: você sobrescreve apenas o que muda. Na prática, mudar só a posição e a altura no mobile é uma linha, não uma segunda configuração inteira.
Restringir origem
Domínios permitidos define de quais endereços o widget pode ser carregado, um por linha, e vazio aceita qualquer origem.
Não deixe vazio em produção. Um widget sem restrição de origem pode ser incorporado em qualquer página por qualquer pessoa, e a conta das conversas que nascerem dali é sua.