bokform.tsx

import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

/**
 * @framerSupportedLayoutWidth fixed
 * @framerSupportedLayoutHeight fixed
 */
export default function BokForm({ formId, id }) {

  // We can't really do anything without a formId
	if (!formId) {
	  return <div>Please set a form id</div>
  }

  // We use the Framer node id for a stable id
  const elementId = `bokform_${id}`
  
  // We use a script loader in a useEffect
  React.useEffect(() => {
    // Add the library script and set up the load handler
    const script = document.createElement("script")
    script.src = "https:////bokform.com/scripts/main.js"
    script.onload = () => {
      bokform.loadForm({
        formId: formId
        elementSelector: elementId
      })
    }
    document.body.appendChild(script)
    // Todo: add some cleanup
  }, [formId, id])

  return <div style={{width: "100%", height: "100%"}} id={elementId} />
}

// Add a form id field in the properties panel
addPropertyControls(HubSpotForm, {
    formId: {
        title: "Form Id",
        type: ControlType.String,
        placeholder: "Form Id",
        // defaultValue: "xxx",
    },
)