React.js HubSpot Live ChatBot

[AaBa15]

Hello Developers Team,

Need help with adding chatbot on Website

My Website has been created in React.js and I added the tracking code in the end of body, which is given by the Hubspot on the website.

The chat flow is also Active, and we target where Chatbot to appear. We realized the Chatbot is appears only if we reload the page. We need to appears every time when the user is on the page - https://demo.pixyle.ai/results

Please help.

Here is the website: https://demo.pixyle.ai/

Thanks in advance!

[Jaycee_Lewis]

Hi, @AaBa15 Let’s see if we can get the conversation started for you. Hey, @Mark_Ryba @kierana @assi, have you dealt with this issue when using react.js and embedding a HubSpot chatbot?

Thank you very much! — Jaycee

[assi]

Hi @AaBa15 .

How about use this code in React Router?

window.history.pushState({}, 'hs_bot', '?hs_bot=true'); window.HubSpotConversations.widget.refresh({openToNewThread: true});"

This code comes from this document: Accounts Dashboard | HubSpot

Conversations SDK might be also helpful: Accounts Dashboard | HubSpot

[MLozano88]

Hey, I have a related question about this setup, so I did the same and installed the code, The chatbot appears on my website, but when I wanted to exclude some URLs, the chatbot is still showing.

I have a video that explains better what happened to me

Can you help me please?

[AaBa15]

Hello, the problem here is React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates, so my solution for this was to apply chatbot to the whole page, and in UseSatate add and remove class to hide.

Something like this :

useEffect(()=>{

if(document.getElementById(“hubspot-messages-iframe-container”)){

document.getElementById(“hubspot-messages-iframe-container”).classList.remove/add(‘hideChat’)

},[])

I hope this helps!

[Jaycee_Lewis]

Thanks for sharing, @AaBa15