Embed Chat Into A ReactJS SPA

New Member

So, is there an embed pattern to embed/integrate the chatbot into my reactJS SPA ? I couldn'y find an example or even an npm module for the chatbot. Is there a clean integration pattern for this into react ? Please share details.

4 Replies 4
Highlighted
HubSpot Moderator

Hi @amjadg,

 

I haven't done this myself but I've been doing some searching around our forums. Here's an example from a while back where someone added the tracking code to a React app: https://community.hubspot.com/t5/APIs-Integrations/Tracking-code-for-a-single-page-application-made-.... If you look at the bottom response there, the user built a page listener component. Maybe that would help with what you're trying to do?

 

I also found this: https://community.hubspot.com/t5/CMS-Development/Chat-integration-issue-with-React/m-p/275219 while doing a search, but I see you've already tried posting to that thread. Maybe we can get @Rajesh16 's attention here, and see if they've made any progress.

 

Also, maybe bumping this thread back to the top will get some more eyes on it.

Leland Scanlan

HubSpot Developer Support
Reply
0 Upvotes
Highlighted
Regular Contributor

Any updates on this?

I tried these methods:

1. Add the script in "index.html"
2. Append the script to the "body" element in a "useEffect" Hook defined in the top-level "App" component

None worked (with React 16.11.0). Unfortunately, this is a showstopper, forcing me to go find another live chat product.

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://js.hs-scripts.com/MY_ID.js" async></script>
</body>
React.useEffect(() => {
  (function loadHubSpot() {
    const d = document;
    const s = d.createElement("script");

    s.src="https://js.hs-scripts.com/MY_ID.js";
    s.async = true;
    d.getElementsByTagName("body")[0].appendChild(s);
  })();
}, [])

 

Reply
0 Upvotes
Highlighted
New Contributor

Have same issue here, any updates?

Reply
0 Upvotes
Highlighted
New Member

Try adding <script .... /> to the <head></head> component instead of <body></body>

I've added to index.html this way and it's working for me

Reply
0 Upvotes