Hoje temos o zendesk webwidget (clássico) sendo utilizado em nossa plataforma desenvolvida em React e NextJs, e surgiu uma demanda para adicionarmos o zendesk chatbot em apenas uma página da nossa aplicação para testes com o cliente. Então nós fizemos uma lógica para remover o script do webwidget na rota solicitada e adicionamos o script do chatbot porque nossa aplicação não recarregada todo o documento html ao trocar de página, porém notamos que o webwidget e o chatbot trabalham da mesma forma no browser, utilizando a propriedade window.zE da api do browser, entendemos que não podemos ter instâncias do webwidget é do chatbot por conta da utilização da propriedade window.zE, nos tentamos fazer a remocação da propriedade window.zE ao fazer a troca do script do zendesk mas ainda assim não funcionou. Gostariamos saber se vocês tem alguma sugestão de solução para esse problema, onde possamos trabalhar com o webwidget é o chatbot sem haver conflitos de implementação entre eles.
Aqui está um link para um repositório GitHub com um exemplo simples de next.js.
https://github.com/tipenehughes/next-widget-example
Você verá que adicionei o widget clássico em um componente de script next.js ao arquivo document.js. Isso garantirá que o widget clássico seja exibido em todas as páginas, salvo indicação em contrário. Eu defini a estratégia no script como “afterInteractive” (este é o valor padrão). Você também verá que criei uma rota test.js. Foi aqui que adicionei o widget messenger, novamente usando um componente de script next.js. Aqui, você verá que defini a estratégia no componente de script como “beforeInteractive”. Isso garante que o script seja carregado antes de qualquer outro script. Por fim, você verá que estou chamando os métodos window.zE dentro de um gancho useEffect nas rotas test.js e index.js. Isso é necessário porque o objeto de janela não é imediatamente acessível devido à natureza SSR de next.js.
Eu espero que isso ajude! Sinta-se à vontade para entrar em contato com qualquer dúvida.
Tipene