# Embed Chat Into A ReactJS SPA **URL:** \ **Category:** CMS Development\ **Tags:** design-manager\ **Created:** [June 18, 2019, 1:40pm UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838 "2019-06-18T13:40:30Z")\ **Posts on this page:** 14\ **Page:** 1

**Author:** ![amjadg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/amjadg/32/34870_2.png) [@amjadg](https://community.hubspot.com/u/amjadg)\ **Post date:** [June 18, 2019, 1:40pm UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838/1 "2019-06-18T13:40:30Z")

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. ---

**Author:** ![lscanlan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lscanlan/32/66262_2.png) [@lscanlan](https://community.hubspot.com/u/lscanlan)\ **Post date:** [June 25, 2019, 9:34pm UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838/2 "2019-06-25T21:34:33Z")

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-in-React/m-p/226513](https://community.hubspot.com/t5/APIs-Integrations/Tracking-code-for-a-single-page-application-made-in-React/m-p/226513). 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](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. ---

**Author:** ![PaulRBerg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/paulrberg/32/97207_2.png) [@PaulRBerg](https://community.hubspot.com/u/PaulRBerg)\ **Post date:** [December 9, 2019, 11:20am UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838/3 "2019-12-09T11:20:44Z")

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. ```auto

``` ```auto 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); })(); }, []) ``` ---

**Author:** ![alexlisong](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alexlisong/32/104913_2.png) [@alexlisong](https://community.hubspot.com/u/alexlisong)\ **Post date:** [January 12, 2020, 12:46am UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838/4 "2020-01-12T00:46:05Z")

Have same issue here, any updates? ---

**Author:** ![anitaernszt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anitaernszt/32/84335_2.png) [@anitaernszt](https://community.hubspot.com/u/anitaernszt)\ **Post date:** [March 25, 2020, 9:22pm UTC](https://community.hubspot.com/t/embed-chat-into-a-reactjs-spa/14838/5 "2020-03-25T21:22:48Z")

Try adding \` This is the provider: **HubspotConversationsProvider.tsx** `import { createStyles } from '@mantine/core';import React, { createContext, FC, useCallback, useContext, useEffect, useState,} from 'react';import ReactDOM from 'react-dom';import { useLocation } from 'react-router-dom';interface HubspotConversationsContextType { toggleWidget: () => void; isOpen: boolean; unreadMessagesCount: number;}const HubspotConversationsContext = createContext(null);const HUBSPOT_INLINE_EMBED_ELEMENT_ID = 'hubspot-conversations-inline-embed-selector';export const HubspotConversationsProvider: FC = ({ children }) => { const location = useLocation(); const [isReady, setIsReady] = useState(false); const [isOpen, setIsOpen] = useState(false); const [unreadMessagesCount, setUnreadMessagesCount] = useState(0); const { classes } = useStyles(isOpen); const user = useCurrentUser(); // This is for Visitor Identification API const hubspotToken = useHubspotConversationsToken(); const hideWidget = useCallback(() => { setIsOpen(false); }, []); const showWidget = useCallback(() => { if (!isReady) return; window.HubSpotConversations.widget.load(); window.HubSpotConversations.widget.open(); setIsOpen(true); }, [isReady]); const toggleWidget = useCallback(() => { if (isOpen) { hideWidget(); } else { showWidget(); } }, [hideWidget, isOpen, showWidget]); const onConversationsReady = useCallback(() => { setIsReady(true); }, []); useEffect( function init() { if (window.HubSpotConversations) { onConversationsReady(); } else { window.hsConversationsOnReady = [onConversationsReady]; } }, [onConversationsReady] ); useEffect( function updateSettingsAndLoadWidget() { if (hubspotToken.isFetched && hubspotToken?.data) { window.hsConversationsSettings = { ...window.hsConversationsSettings, identificationEmail: user?.email, identificationToken: hubspotToken.data.token, }; window.HubSpotConversations.widget.load(); } }, [hubspotToken.data, hubspotToken.isFetched, user?.email] ); useEffect( function addEventListeners() { if (!isReady) return; function listener(payload: { unreadCount: number }) { setUnreadMessagesCount(payload.unreadCount); } window.HubSpotConversations.on( 'unreadConversationCountChanged', listener ); return () => { window.HubSpotConversations.off( 'unreadConversationCountChanged', listener ); }; }, [isReady] ); useEffect( function refreshConversationsOnRouteChange() { if (!isReady) return; window.HubSpotConversations.widget.refresh(); }, [isReady] ); return ( {children} {ReactDOM.createPortal(

, document.body )} );};const useStyles = createStyles((theme, isOpen: boolean) => ({ chatWidgetContainer: { overflow: 'hidden', zIndex: 2147483647, // this is the max possible value position: 'fixed', top: 75, right: theme.spacing.xl, height: 500, width: 376, display: isOpen ? 'block' : 'none', borderRadius: theme.radius.md, backgroundColor: theme.white, boxShadow: '0 5px 20px rgb(0 0 0 / 10%)', '#hubspot-conversations-inline-parent': { width: '100%', height: '100%', }, '#hubspot-conversations-inline-iframe': { width: '100%', height: '100%', border: 'none', }, },}));export function useHubspotConversations() { const context = useContext(HubspotConversationsContext); if (context === null) { throw new Error( 'useHubspotConversations must be used within HubspotConversationsProvider' ); } return context;}declare global { interface Window { hsConversationsSettings: Record; hsConversationsOnReady: Array<() => void>; HubSpotConversations: { on: any; off: any; widget: { status: () => { loaded: boolean; pending: boolean }; load: (params?: { widgetOpen: boolean }) => void; remove: () => void; open: () => void; close: () => void; refresh: (openToNewThread?: boolean) => void; }; }; }}` And the usage can be something like that: `function App() { return ( );}function ChatWidgetButton() { const { toggleWidget } = useHubspotConversations(); return ;}`