Chatbot button appearing twice
# 🤝helpc
cold-balloon-17868
02/10/2024, 3:19 PMI am using react for my website and am trying to integrate botpress into it. However, the chatbot button appears twice on my pages. I followed the react tutorial in the Botpress documentation.
g
glamorous-guitar-39983
02/10/2024, 5:24 PMCould you write down the code (without your personal information from the bot script)
c
cold-balloon-17868
02/10/2024, 5:46 PM Copy code
import React, { useEffect } from 'react'
const Chatbot = () => {
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://cdn.botpress.cloud/webchat/v1/inject.js'
script.async = true
document.body.appendChild(script)
script.onload = () => {
window.botpressWebChat.init({
botId: '',
hostUrl: 'https://cdn.botpress.cloud/webchat/v1',
messagingUrl: 'https://messaging.botpress.cloud',
clientId: '',
})
}
}, [])
return <div id="webchat"/>
}
export default Chatbotcold-balloon-17868
02/10/2024, 5:47 PMthen in my app.jsx file, i imported the chatbot
cold-balloon-17868
02/10/2024, 5:48 PMand put a simple div with the chatbot in it
cold-balloon-17868
02/10/2024, 5:48 PM Copy code
<div>
<Chatbot/>
</div>g
glamorous-guitar-39983
02/10/2024, 7:44 PMI don't really know how to use React code, I personally edit everything directy in an html code
c
cold-balloon-17868
02/11/2024, 7:47 AMOk i fixed it myself. Here is the modified code for anyone who needs it. Just change the useEffect to the following:
cold-balloon-17868
02/11/2024, 7:48 AM Copy code
useEffect(() => {
const existingScript = document.getElementById('botpress-webchat-script');
if (!existingScript) {
const script = document.createElement('script');
script.id = 'botpress-webchat-script';
script.src = 'https://cdn.botpress.cloud/webchat/v1/inject.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
window.botpressWebChat.init({
botId: '',
hostUrl: 'https://cdn.botpress.cloud/webchat/v1',
messagingUrl: 'https://messaging.botpress.cloud',
clientId: 'd590412c-38c5-4946-87cc-4e8e3f9ef4fd',
});
};
}
}, []);