# React.js HubSpot Live ChatBot

**URL:** <https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975>\
**Category:** APIs & Integrations\
**Created:** [July 14, 2022, 1:10pm UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975 "2022-07-14T13:10:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![AaBa15](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@AaBa15](https://community.hubspot.com/u/AaBa15)\
**Post date:** [July 14, 2022, 1:10pm UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/1 "2022-07-14T13:10:47Z")

</div>

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](https://demo.pixyle.ai/results%20)

Please help.

 ![AaBa15_1-1657803337773.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/5/c5ffcd8efd3ffbd76673c56561f659b4e683e0c6.png)

Here is the website:[https://demo.pixyle.ai/](https://demo.pixyle.ai/)

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [July 15, 2022, 4:12pm UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/2 "2022-07-15T16:12:34Z")

</div>

Hi, @AaBa15 👋 Let’s see if we can get the conversation started for you. Hey, [@Mark\_Ryba](https://community.hubspot.com/t5/user/viewprofilepage/user-id/138856) @kierana @assi, have you dealt with this issue when using react.js and embedding a HubSpot chatbot?

Thank you very much! — Jaycee

---

<div class="post-metadata">

**Author:** ![assi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/assi/32/25699_2.png) [@assi](https://community.hubspot.com/u/assi)\
**Post date:** [July 21, 2022, 1:36am UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/3 "2022-07-21T01:36:17Z")

</div>

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](https://developers.hubspot.com/docs/api/conversations/open-to-chatflow)

Conversations SDK might be also helpful: [Accounts Dashboard | HubSpot](https://developers.hubspot.com/docs/api/conversation/chat-widget-sdk)

---

<div class="post-metadata">

**Author:** ![MLozano88](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mlozano88/32/66880_2.png) [@MLozano88](https://community.hubspot.com/u/MLozano88)\
**Post date:** [December 8, 2022, 8:17pm UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/4 "2022-12-08T20:17:31Z")

</div>

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](https://share.vidyard.com/watch/9HqTpVfsaUUfvvSqVXsVQX?)

Can you help me please?

---

<div class="post-metadata">

**Author:** ![AaBa15](https://avatars.discourse-cdn.com/v4/letter/a/2acd7d/32.png) [@AaBa15](https://community.hubspot.com/u/AaBa15)\
**Post date:** [December 9, 2022, 10:13am UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/5 "2022-12-09T10:13:19Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [December 9, 2022, 5:43pm UTC](https://community.hubspot.com/t/react-js-hubspot-live-chatbot/60975/6 "2022-12-09T17:43:09Z")

</div>

Thanks for sharing, @AaBa15 🙌