HubSpot Form Embedding

I followed this post to embed a HubSpot form, but I stuck at _app.js which I don't have in my project folder.

I use Prismic Nextjs Starter for my project.

Any help is appreciated!

I am still confused about embedding the script in the Slice Richtext in this post.

In the Slice Richtext

      __html: <PrismicRichText field={slice.primary.formembed} />,

[object Object]

You're very close my friend... I just:

  1. Created a hubspot account
  2. Created a form
  3. Copied the embed code
  4. Created a Slice Called HubSpot
  5. Tested
  6. Success!

import { Content, asText } from '@prismicio/client'
import { SliceComponentProps } from '@prismicio/react'

 * Props for `HubSpot`.
export type HubSpotProps = SliceComponentProps<Content.HubSpotSlice>

 * Component for "HubSpot" Slices.
const HubSpot = ({ slice }: HubSpotProps): JSX.Element => {
  return (
        dangerouslySetInnerHTML={{ __html: asText(slice.primary.hubspot) }}

export default HubSpot


It works! But the form loads very slowly and sometimes it doesn't load at all. Did it happen to you?

Also, can this setup be used for Stripe embed as well?

@solution.stack99 ,

I believe you could use this solution for just about any custom embed you need to make.

I didn't experience the slowness you speak of. However, I didn't do much beyond a proof of concept. I have avoided using 3rd party forms when possible in favor of custom forms that post to services through APIs.

I'm glad this got you going in the right direction.

1 Like

Thank you so much!

I will try it with Stripe and I will post it if I run into an issue.

1 Like