Personalizando a colocação da sua ferramenta com JavaScript

Você pode personalizar a posição exata da sua ferramenta usando o customStyle na API do tawk.to, com controle de nível de pixel além das seis posições padrão da tela.

Isso é útil quando:

• Você quer que a ferramenta evite sobrepor um menu ou rodapé

• Você está incorporando a ferramenta em um layout ou design personalizado

• Você quer posições diferentes para visualizações em dispositivos móveis e em desktops

Você pode definir que a ferramenta apareça em qualquer uma dessas seis posições padrão:

Cada posição pode ser ajustada ainda mais usando deslocamentos e rotação.

Os deslocamentos ajudam a mover a ferramenta ligeiramente a partir de sua posição base:

• xOffset: Move a ferramenta para a esquerda ou para a direita

• yOffset: Move-a para cima ou para baixo

Como funcionam os deslocamentos:

• No canto inferior direito (br), aumentar o xOffset moverá a sua ferramenta para a esquerda.

• No canto inferior esquerdo (bl), aumentar o xOffset moverá a sua ferramenta para a direita.

• No canto superior direito (tr), aumentar o yOffset moverá a sua ferramenta para baixo.

• Nas posições centrais (cl, cr), ajustar o yOffset moverá a sua ferramenta para cima e para baixo.

Você também pode girar a ferramenta usando esses valores:

A rotação é útil para layouts verticais ou designs criativos.

Aqui está um exemplo de código mostrando os valores aceitos de posição, deslocamento e rotação:

Aqui está um exemplo de código que você pode Copiar e colar antes do código da ferramenta no HTML do seu site:

• Sempre defina o customStyle antes do script de incorporação da ferramenta. Caso contrário, suas alterações não terão efeito.

• Personalize o layout da ferramenta separadamente para desktop e dispositivos móveis para garantir que ela não interfira no layout do seu site. Teste em diferentes tamanhos de tela para confirmar se tudo está correto.

• Você não precisa ajustar as configurações do Painel de controle, pois as configurações definidas no código substituem essas configurações.

Se você tiver sugestões sobre este artigo ou precisar de mais ajuda:

• Clique no ícone verde de chat ao vivo
• Agende uma chamada conosco
• Visite nossa comunidade