How to add Hubspot Form to Gatsbyjs website?

Question

I'm trying to add the hubspot form to my gatsbyjs website. They have given below embed code but I wonder how to add the same to the gatsbyjs?

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "21773256",
    formId: "b01e1fed-a1f4-4683-bf86-8b4c6ee1ea67"
});
</script>

Answer 1

Use React Helmet and add your Hubspotcode on top like this

<Helmet>
   <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
</Helmet>

And then use React componentDidMount() and initialize the code. Add a target attribute to your form so that it will render in that space

componentDidMount() {
  this.initializeHubspotForm();
}
initializeHubspotForm() {
    if ('hbspt' in window) {
        window.hbspt.forms.create({
        region: "na1",
        portalId: "21773256",
        formId: "b01e1fed-a1f4-4683-bf86-8b4c6ee1ea67",
        target: "#formContainer"
      });
    } else {
      setTimeout(this.initializeHubspotForm, 500)
   }
 }