Como adicionar múltiplos widgets a um site com JavaScript

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

Se você gerencia várias propriedades no tawk.to e deseja exibir mais de uma ferramenta do chat no mesmo site, pode fazer isso usando uma solução personalizada em JavaScript. Isso permite executar várias ferramentas de forma independente — ideal para suporte a múltiplas marcas ou equipes separadas.


OBSERVAÇÃO: Este método requer conhecimento básico de programação. Se você não estiver familiarizado com HTML e JavaScript, considere trabalhar com um desenvolvedor.

Qual é a diferença entre uma propriedade e um widget?

Compreender a diferença entre uma propriedade e um widget é essencial para gerenciar sua configuração no tawk.to de forma eficaz.


Propriedade

Uma propriedade é um contêiner para todas as suas configurações e dados. Normalmente está associada a um site, empresa, marca, organização ou evento específico.


Ao criar uma nova propriedade, você está configurando um espaço de trabalho separado que pode incluir:

  • Ferramentas do chat

  • Mensagens de disparador

  • Base de Conhecimento

  • Atalhos

  • Guias

  • Agentes


OBSERVAÇÃO: Os complementos (como AI Assist e Remover publicidade) são adquiridos por propriedade e não são transferidos entre propriedades.


Widget

Um widget é a interface de chat que seus visitantes veem. Ele permite que os usuários:

  • Iniciar um chat ao vivo

  • Deixar mensagens offline

  • Visualizar conteúdo compartilhado por meio de cartões do widget


Cada propriedade pode ter até 20 widgets, e você pode personalizar cada um individualmente, incluindo:

  • Design e cor

  • Idioma de exibição

  • Regras de visibilidade

  • Comportamento do widget


OBSERVAÇÃO: Os complementos adquiridos para uma propriedade se aplicam a todos os widgets dentro dessa propriedade.

Por que não posso usar o script padrão para múltiplos widgets?

Por padrão, o script de incorporação do tawk.to suporta apenas o carregamento de um widget por página. Se você adicionar mais de um script de incorporação padrão, eles entrarão em conflito. Isso acontece porque cada script de widget usa o mesmo objeto global (Tawk_API) e os mesmos ouvintes de eventos globais, que não podem ser duplicados na mesma página.


Para contornar essa limitação, você pode injetar dinamicamente cada widget usando JavaScript de uma forma que evite conflitos.

Primeiro, obtenha o seu ID da propriedade e ID da ferramenta

1. Faça login na sua conta do tawk.to.

2. Selecione a propriedade correta.
3. Clique em Administração no menu superior.
4. Clique em Ferramenta do chat em Canais no menu à esquerda. Em seguida, Copiar a última parte do seu Link do chat direto. Esta é uma combinação do seu ID da propriedade e ID da ferramenta.
Modificando o código do seu widget para incluir múltiplos widgets

Para carregar diferentes widgets dinamicamente, será necessário atualizar o código de incorporação padrão especificando o ID da propriedade e o ID da ferramenta corretos.


Atualize a URL do script assim:

Para alterar o widget, basta atualizar o ID da ferramenta no final da URL.


Para alterar tanto a propriedade quanto o widget, atualize ambos os IDs na URL. Exemplo com IDs reais:

Esse método permite que cada script de widget seja carregado de forma independente, ajudando a evitar conflitos entre múltiplos scripts de widget na mesma página.


Aqui está um exemplo de implementação do código do widget tawk.to que carrega dinamicamente um widget com base no ID do chat que você fornecer:

A função getChatId() tem como objetivo fornecer o ID da propriedade e o ID da ferramenta corretos no formato adequado.


Você pode personalizar essa função para retornar diferentes IDs de chat com base nos seus próprios critérios — como domínio, localização do usuário ou função do usuário — dependendo da sua configuração.


Casos de uso:

Alterar o widget ou a propriedade com base no idioma de uma página

Alterar o widget com base no idioma do visitante

Altere a ferramenta com base na localização do visitante usando a Geolocalização de IP da Cloudflare

Considerações importantes

  • Essa solução depende de JavaScript e exige uma compreensão básica de como editar o código do seu site.


  • Embora esse método funcione em muitos casos, usar múltiplos widgets em uma única página pode afetar o desempenho ou causar comportamentos inesperados, dependendo de como o seu site está estruturado.


  • Você não poderá usar o objeto Tawk_API globalmente para ambos os widgets. Pode ser necessário um script personalizado para controle avançado.

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


Este artigo foi útil?

70 de 105 gostaram deste artigo