Ir para o conteúdo

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:

FormatoOnde vai
HTMLantes do fechamento do body, em qualquer site
Next.jsum componente com next/script
Reactum componente com useEffect
Google Tag Manageruma 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.