I’m deploying botpress in react js project using the configurable script so that i could customize it. when i reload the page the bot appears for 1 sec then dissapears , i wonder what causes that ?
another issue is that i get 2 divs with the same id =“bp-web-widget-container” when i inspect the code, the second div got this element inside the iframe: it basicaly refers to the stylesheet url, why is that ?
here is my code :
function TestBot() {
useEffect(() => {
const script = document.createElement(“script”);
script.src = “https://cdn.botpress.cloud/webchat/v0/inject.js”;
script.async = true;
script.onload = () => {
window.botpressWebChat.init({
botId: ‘7b5b44b9-8…83c0b5c’,
hostUrl: ‘https://cdn.botpress.cloud/webchat/v0’,
messagingUrl: ‘https://messaging.botpress.cloud’,
clientId: ‘7b5b44b9-8…2383c0b5c’,
botName: ‘TicketBot’,
stylesheet: ‘https://style-git-mai…a.vercel.app/bot.css’,
hideWidget: true,
disableAnimations: true,
enableConversationDeletion: true,
containerWidth: ‘65%25’,
layoutWidth: ‘100%25’,
});
window.botpressWebChat.onEvent(() => {
window.botpressWebChat.sendEvent({ type: ‘show’ });
}, [‘LIFECYCLE.LOADED’]);
}
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, );
return null;
}