Add hubspot chatflow to React application

.web_HbsptChatFlow.md

#This Gist reveals how to add the HubSpot to your react application

In The App.js file add these lines to embed the form to your web application -----App.js The whole code snipet of Chatflow lies on -----ChatBot.js

File hierarchy hook .......chatBot.js

App.js

import useHubspotChat from "./hooks/chatBot";


export default function App() {
  useHubspotChat();
  return (
    <div>
        <div>
         
          <Navbar />
          <div className="App ">
        /// --------------------
          </div>
        </div>
      )}
    </div>
  );
}

chatBot.js

import React  from 'react';
// Create a hook to seperate out logic.
const useHubspotChat = () => {
  const [ hasLoaded, setHasLoaded ] = React.useState(false);
  const [ activeConversation, setActiveConversation ] = React.useState(false);
  const eventRef = React.useRef(null);
  
  React.useEffect(() => {
    console.log('hey')
    
    // Add event listener.
    window.hsConversationsOnReady = [() => {
      setHasLoaded(true);
    }];
   
    // Create script component.
    let script = document.createElement('script');
    //add your portalId below to get the embeded chatBot
    
    script.src=`//js.hs-scripts.com/23220584.js`;
    script.async = true;
    
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
      window.hsConversationsOnReady = [];
    }
    
  }, []);
  
  // Subscripe to conversation events.
  React.useEffect(() => {
    eventRef.current = (payload) => {
      setActiveConversation(payload.conversation.conversationId);
    }
   
  
  }, [hasLoaded]);
  
  const openHandler = React.useCallback(() => {
    if (hasLoaded) {
      window.HubSpotConversations.widget.open();
    }
  }, [hasLoaded]);
  
  const closeHandler = React.useCallback(() => {
    if (hasLoaded) {
      window.HubSpotConversations.widget.close();
    }
  }, [hasLoaded])
  
  return {
    hasLoaded, 
    activeConversation,
    openHandler,
    closeHandler
  };
}

export default useHubspotChat;