How to add a HubSpot form to NextJS? or How to load a script into the head from a client component?

Question

Hi, I am trying to load a HubSpot form into my app but I can't figure out the best way to do this.

I found a solution for react that utilizes the Helmet component, so I tried to replicate that using the Head component but it doesnt seem to be outputting the hubspot script when I try it. I assume it is not outputting to head because its a client component? I am not sure, let me know.

Here is the code I was trying

'use client'

import { useEffect } from "react";
import Head from 'next/head'
import Script from 'next/script'

export default function HSform({portalId,formId,target}){

    useEffect(() => {
        if (window.hbspt) {
            window.hbspt.forms.create({
                portalId: portalId,
                formId: formId,
                target: target
            });
        }
    },[]);

    return (
        <>
            <Head>
                <Script src="//js.hsforms.net/forms/v2.js" />
            </Head>
            <div id={target}></div>
        </>
    )

}

How to add a HubSpot form to NextJS? or How to load a script into the head from a client component?

0 Replies