HubSpot Form Embedding

Developing with Prismic
, ,
1

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!

2

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

In the Slice Richtext

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

Output
[object Object]

3

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!

image
image691×445 12.7 KB

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 (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <div
        dangerouslySetInnerHTML={{ __html: asText(slice.primary.hubspot) }}
      />
    </section>
  )
}

export default HubSpot

Screenshot
image

4

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?

5

@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
6

Thank you so much!

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

1 Like