Integração webchat com projeto React [erro no script]

Weni Responde
1

Olá, pessoal! :grinning:
Estou trabalhando em um projeto que requer a integração do chatbot via canal web. Este projeto utiliza Next.js na versão 14.1.4, React na versão 18.2.0 e React DOM na mesma versão. Além disso, o Node.js está configurado na versão 20.11.1. Como parte do desenvolvimento, preciso personalizar o estilo e manipular dados do chatbot. Ao tentar acessar o script conforme instruído no README do repositório link aqui na seção As a React component, me deparei com um obstáculo inicial. Ao tentar baixar o pacote, meu terminal apresentou o seguinte erro:

Captura_de_tela_2024-04-20_202913
Captura_de_tela_2024-04-20_202913831×668 91.5 KB

Após uma análise, percebi que o projeto está utilizando uma versão do React superior à suportada pelo push-webchat. Enquanto meu projeto utiliza o React@18.2.0, o push-webchat requer o React@“^16.8.3”. Existe alguma maneira de resolver essa discrepância sem recorrer a npm install push-webchat --force, considerando que isso pode resultar em bugs potenciais? Além disso, um downgrade no projeto não é viável devido às dependências necessárias para a versão atual. Existe uma alternativa viável para integrar o webchat?

Além disso, o próximo passo no README solicita a implementação da seguinte função:

import { Widget } from 'push-webchat';

function CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"https://socket.push.al"}
      title={"Title"}
    />
  )
}

Essa função parece estar gerando um erro. Qual seria a melhor abordagem para corrigi-lo? Talvez algo como:

import { Widget } from 'push-webchat';

function CustomWidget() {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"https://socket.push.al"}
      title={"Title"}
    />
  );
}

ou


import { Widget } from 'push-webchat';

const CustomWidget = () => {
  return (
    <Widget
      initPayload={"/get_started"}
      socketUrl={"https://socket.push.al"}
      title={"Title"}
    />
  );
}

Agradeço pela atenção.

Larissa

2 curtidas
2

A versão do npm para o Weni Web Chat não é compatível com o projeto mas ainda é possível utilizar o canal web da seguinte maneira:

  1. Crie um novo componente para o webchat (ex: webchat.js)
  2. Adicione o seguinte código ao componente:
  'use client'
  import { useEffect } from 'react';
  export default function WeniWebChat() {
    useEffect(() => {
      if (window && document) {
        <INSIRA O CÓDIGO PARA O SCRIPT AQUI>
      }
    }, []);
  }
  1. Insira o código para o seu script no lugar de <INSIRA O CÓDIGO PARA O SCRIPT AQUI>
    1. Para obter o código do script acesse a Plataforma Weni e vá para o módulo de Aplicações > Meus Aplicativos > Clique no aplicativo do Weni Web Chat desejado > Código Script
    2. Copie o código e cole no lugar de <INSIRA O CÓDIGO PARA O SCRIPT AQUI>
    • Caso não possua o aplicativo instalado vá para o módulo de Aplicações > Descoberta > Weni Web Chat > Instalar > Meus Aplicativos > Clique no aplicativo do Weni Web Chat desejado > Configure um título para o Chat > Clique em Salvar > Após salvar acesse o Código Script
  2. Adicione o componente ao seu projeto
  3. Customizações podem ser aplicadas na aba de aparência do aplicativo instalado, como cor, imagem de avatar e CSS customizado caso deseje aplicar
2 curtidas