Issue while integrating with React js
# 🤝help
i
I am trying to integrate bot with React js but is shows me two logos instead of one... here is the code :- // import logo from './logo.svg'; // import './App.css'; import React, { useEffect } from 'react'; function App() { useEffect(() => { const script = document.createElement('script'); script.type = 'text/javascript'; script.src = process.env.BOT_URL; script.async = true; script.onload = () => { window.botpressWebChat.init({ "botId": process.env.BOT_ID, "hostUrl": process.env.HOST_URL, "messagingUrl": "https://messaging.botpress.cloud", "clientId": process.env.CLIent_ID, "botName": "Dashboard Bot", "phoneNumber": "+91 456789", "termsConditions": "https://abcd.com/terms", "privacyPolicy": "https://abcd.com/privacy", "emailAddress": "abcd@gmail.com", "website": "abcd@gmail.com", "useSessionStorage": true, "showPoweredBy": true, }); window.botpressWebChat.onEvent(() => { window.botpressWebChat.sendEvent({ type: 'show' }); }, []); } document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []); return ( ); } export default App; Can somebody help me with this issue ???
a
are both logos clickable?
i
yes
a
interesting. I don't know too much about react, maybe @acceptable-gold-88171 does?
r
@incalculable-application-24116 That's because you are running React in Strict Mode, which effectively runs your useEffect twice. https://legacy.reactjs.org/docs/strict-mode.html
You can use
useEffect
to check if the webchat has been initiated already (or even checking if the botpress webchat already exists in the DOM before inserting it)
i
@rich-battery-69172 Thanks... The issue is solved now...
64 Views