Utilizar widget clássico junto com o chatbot
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.
-
OlaGabriel Queiroz Do Nascimento,
Em primeiro lugar, pedimos desculpas por quaisquer erros de tradução, pois isso foi escrito usando o Google Tradutor.
Eu implementei um aplicativo Next.js muito simples que usa tanto o widget da web (clássico) quanto o sistema de mensagens (chatbot). A maneira como o configurei atualmente é usar o arquivo _document.tsx para adicionar o script para o widget da web (clássico) que é usado na maior parte do site e, em seguida, adicionar individualmente o script de mensagens a cada uma das rotas que exigem mensagens . Nesta configuração, consigo utilizar os métodos window.zE sem nenhum conflito quando o método é chamado em suas respectivas rotas. Além disso, parece que o script adicionado diretamente às rotas tem precedência sobre o _document, portanto, não deve haver necessidade de remover programaticamente o script.
日本时尚类杂志pode me informar se pode tentar uma configuração semelhante do seu lado? Sinta-se à vontade para entrar em contato se tiver alguma dúvida!
Tipene
-
OlaTipene Hughes
日本时尚类杂志poderia disponibilizar essa sua implementação para testarmos? Ao tentar realizar essa implementação ainda ocorre o erro dos conflitos na variável window.zE -
OlaQueiroz,
Aqui está um link para um repositório GitHub com um exemplo simples de next.js.
https://github.com/tipenehughes/next-widget-example
低地维拉,adicionei o部件干白em恩有限公司mponente 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
-
OlaTipete!
Eu fiz um fork do seu projeto, testei usando as minhas chaves do zendesk, ao navegar pela telas diretamente digitando a url no browser os componentes funcionam perfeitamente, mas aconteceu um erro ao navegar de uma tela para a outra utilizando a api do nextjs next/router . Link do meu fork:https://github.com/gabriel-queiroz/next-widget-example
-
OlaQueiroz,
Desculpe pelo atraso na resposta! Por alguma razão, sua mensagem não chegou até mim imediatamente. Passei algum tempo olhando para isso e parece ser um problema causado pelo DOM não ser recarregado ao usar next/router. Esta é, obviamente, a funcionalidade esperada ao usar o React.
Infelizmente, isso está fora do escopo de nossa equipe, pois o problema está sendo causado pela implementação, não especificamente pelo widget da web. Enquanto dava uma olhada, encontrei algumas postagens do Stack Overflow que podem ser úteis para você; Vou linkar os abaixo:
https://stackoverflow.com/questions/70758485/how-to-unmount-next-script-on-page-change-in-next-js
https://stackoverflow.com/questions/69294792/nextjs-reloading-ads-javascript-and-ad-slots-on-route-changeMe desculpe, eu não poderia ser mais útil! Quando você encontrar uma solução, sinta-se à vontade para nos atualizar aqui - eu ficaria muito interessado em saber como você fez isso.
Obrigado!
Tipene
Vous devezvous connecter把联合国commentaire自由。
5 Commentaires