Error “ReferenceError: hbspt is not defined” with embed code for SCA form

Scenario:

When we want to embed a script to add a form on the SCA website to connect with hubspot, Error “ReferenceError: hbspt is not defined” is showing in console.

<script charset=”utf-8″ type=”text/javascript” src=”//js.hsforms.net/forms/embed/v2.js“></script>
<script>
  hbspt.forms.create({
    region: “na1”,
    portalId: “23130323”,
    formId: “22b95edc-a15c-4996-af4c-d32d6650a3a5”
  });
</script>

Solution:

Loading the script dynamically will solve the issue.

Use in the below given format.

<script>
  (() => {
    const script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.src = "https://js.hsforms.net/forms/embed/v2.js";

    script.addEventListener("load", () => {
      hbspt.forms.create({
       region: "na1",
       portalId: "23130323",
       formId: "22b95edc-a15c-4996-af4c-d32d6650a3a5"
      });
    });

    document.head.append(script);
  })();
</script>