reactjschatgatsbyhubspot

How do I add HubSpot chat to react js app?

I'm trying to add our HubSpot chat to our website we have created using React and Gatsby, and we were asked to insert the following to the body tag in the index.html file:

<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/insertnumbers"></script>

The issue is that we don't upload our public folder to the website. The HTML file is in the public folder.

How can we come around this? I was thinking about a React component, but I'm not sure where to start. Can you help?

Solution

  • 2022 update

    Since the release of the Script Gatsby component (powered by Partytown) it's much easier adding third-party scripts. Just:

    import React from "react"
import { Script } from "gatsby"

function YourPage() {
  return <Script src="https://my-example-script" />
}

export default YourPage

    Use <Helmet> component. Everything that is wrapped inside is placed into the <head> tag, in this case, will work for your use-case despite not being in the <body>.

    const YourPage= props => {
  return <Layout>
    <Helmet>
      <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/insertnumbers"/>
    </Helmet>
  </Layout>;
};

export default YourPage;