Alterando a aparência da Ferramenta do chat do tawk.to

As instruções abaixo são apenas para desktops e laptops.

Faça com que o Chat Widget tenha a aparência da sua marca, para que os visitantes o reconheçam imediatamente e saibam onde obter ajuda. Este guia mostra como acessar as configurações de Apariencia (Appearance), ajustar opções para desktop e mobile, alterar cores e o Chamada de atenção (Attention Grabber), visualizar suas alterações e Salvar, tudo a partir do seu Dashboard do tawk.to.
Passos para alterar a aparência do seu Widget
1. Faça login na sua conta tawk.to.

2. Selecione a propriedade correta.

3. Clique em Administração na barra de navegação à esquerda.

4. Clique em Ferramenta do chat no submenu à esquerda.

5. Role até Apariencia del widget (Widget Appearance) e clique em Avançado (Advanced).

6. Na página Apariencia del widget (Widget Appearance), você pode personalizar a cor, forma e tamanho do seu Widget para desktop e mobile. Use a visualização ao vivo à direita para testar suas alterações. Quando estiver satisfeito, clique em Salvar (Save). O Widget será atualizado automaticamente no seu site — não é necessário alterar código.

Configurações do Widget para desktop

Forma: Escolha circular (compacta) ou retangular. Uma forma circular é menos intrusiva, enquanto uma forma retangular oferece mais espaço e opções.

Tamanho: Defina Largura e Altura (isso afeta o Widget quando maximizado). Se você escolheu retangular, também pode definir Largura/Altura Minimizada e Raio Superior/Inferior para controlar os cantos arredondados.

Posição: Escolha onde o Widget aparece na Página (canto inferior direito é o padrão). Escolha uma posição que se encaixe no layout do seu site.

Chamada de atenção (Attention Grabber): Ative para chamar atenção. Clique em Galeria (Gallery) para escolher um design pronto ou faça upload da sua própria arte. OBSERVAÇÃO: o Chamada de atenção (Attention Grabber) é exibido apenas no desktop e somente quando o Widget está online. Saiba mais aqui: Habilitando o Chamada de atenção (Attention Grabber)

Configurações do Widget para mobile

Escolha o tipo e a posição do Widget mobile para que ele não interfira na navegação ou em botões importantes em telas menores. A pré-visualização mobile mostra como ele aparecerá.

Cores e estilos de mensagem

Essas configurações de cores se aplicam tanto à visualização desktop quanto à mobile:

Cabeçalho: Altere a cor de fundo do Widget, do cabeçalho e das Mensagem sugerida (Suggested Messages).

Texto do cabeçalho: Altere a cor do texto do cabeçalho e da seção interna do design padrão.

Mensagem do agente/Texto do agente: Controle a cor de fundo e do texto das mensagens enviadas pelos seus agentes.

Mensagem do visitante/Texto do visitante: Controle a cor de fundo e do texto das mensagens dos visitantes. Ajuste para que as mensagens sejam legíveis e consistentes com a sua marca.

Considerações adicionais
  • Visibilidade do Chamada de atenção (Attention Grabber)
    O Chamada de atenção (Attention Grabber) aparece apenas no desktop e somente quando o Widget está online. Se o Widget estiver offline ou ausente, ele não será exibido.

  • Responsividade mobile
    O Widget pode ajustar seu layout no mobile para não cobrir a navegação ou outros elementos da interface. Teste em vários dispositivos e tamanhos de tela.

  • Conflitos com estilos do site
    CSS personalizado ou scripts no seu site podem, às vezes, interferir na posição ou aparência do Widget. Se você usar estilos personalizados, teste cuidadosamente e verifique possíveis conflitos.
Guias relacionados

Se você tiver comentários sobre este artigo, ou se precisar de mais ajuda:


Este artigo foi útil?

1835 de 2262 gostaram deste artigo