Subscribe — Theresa Papa

  
    I want to embed a Flodesk popup form in this React + TypeScript project. Please follow these steps exactly:

1. Create a component that uses the `useEffect` hook to:
   - Inject the Flodesk script into the document head if it's not already present.
   - Initialize the Flodesk popup form using `window.fd('form', { formId })`.

2. Make sure TypeScript is satisfied by:
   - Declaring `window.fd` and `window.FlodeskObject`.
   - Casting the created script elements to `HTMLScriptElement`.

3. This popup does not need to render anything, so return `null`.

4. ⚠️ Do not wrap the component in layout elements, headings, or apply any extra styles.

Use this code structure:

```tsx
import { useEffect } from 'react';

declare global {
  interface Window {
    FlodeskObject?: string;
    fd?: (...args: any[]) => void;
  }
}

export default function FlodeskPopup() {
  useEffect(() => {
    const existingScript = document.querySelector('script[src*="flodesk"]');
    if (!existingScript) {
      (function (w: any, d: Document, t: string, h: string, s: string, n: string) {
        w.FlodeskObject = n;
        const fn = function () {
          (w[n].q = w[n].q || []).push(arguments);
        };
        w[n] = w[n] || fn;

        const f = d.getElementsByTagName(t)[0];
        const v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;

        const sm = d.createElement(t) as HTMLScriptElement;
        sm.async = true;
        sm.type = 'module';
        sm.src = h + s + '.mjs' + v;
        f.parentNode?.insertBefore(sm, f);

        const sn = d.createElement(t) as HTMLScriptElement;
        sn.async = true;
        sn.noModule = true;
        sn.src = h + s + '.js' + v;
        f.parentNode?.insertBefore(sn, f);
      })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
    }

    window.fd?.('form', {
      formId: '6920de2ab4a6c94096b1cfcd',
    });
  }, []);

  return null;
}
  