I want to embed a Flodesk inline form in this React project. Please follow these exact steps:
1. In the component where the form should appear, use a `useEffect` hook to load the Flodesk script in the `` of the document. This script should only be added once, even if multiple forms are used.
2. Also inside the `useEffect`, after the script loads, call the Flodesk form initializer to render the form in a specific container.
3. Include the container `
` with the correct ID inside the JSX return block.
:warning: Do not wrap the form in any extra layout or container. Do not add any Heading or text. Do not apply any styles. Keep Flodesk's original style.
:warning: Do not embed the form in any section already created.
Here is the full code structure you should follow:
```jsx
import { useEffect } from 'react';
export default function NewsletterForm() {
useEffect(() => {
// Inject Flodesk script into if not already present
const existingScript = document.querySelector('script[src*="flodesk"]');
if (!existingScript) {
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src = h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
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');
}
// Initialize the form
window.fd('form', {
formId: '6a9695d2d9fdc2fcbeea4588',
containerEl: '#fd-form-6a9695d2d9fdc2fcbeea4588'
});
}, []);
return (
);
}
And make sure to import and use it in src/pages/Index.tsx
