IntegrationsEmbed Guides
Embed in React
Integrate GenZform forms into React applications using iframe components with proper script loading and event handling.
GenZform forms can be embedded in React applications using iframe components. This guide covers component patterns, script loading, and event handling for form submissions.
Basic Iframe Component
Create a reusable component for embedding GenZform forms:
interface GenZformEmbedProps {
formId: string;
height?: number | string;
className?: string;
locale?: string;
}
export function GenZformEmbed({
formId,
height = 500,
className,
locale = 'en',
}: GenZformEmbedProps) {
return (
<iframe
data-genz-form={formId}
data-embed-style="standard"
src={`https://genzform.com/f/${formId}?locale=${locale}`}
style={{
width: '100%',
height: typeof height === 'number' ? `${height}px` : height,
border: 'none',
}}
className={className}
title="GenZform"
/>
);
}Usage:
<GenZformEmbed formId="your-form-id" height={600} />With Auto-Height Script
For automatic height adjustment, load the GenZform embed script:
import { useEffect, useRef } from 'react';
interface GenZformEmbedProps {
formId: string;
minHeight?: number;
className?: string;
locale?: string;
}
export function GenZformEmbed({
formId,
minHeight,
className,
locale = 'en',
}: GenZformEmbedProps) {
const scriptLoaded = useRef(false);
useEffect(() => {
// Load embed script once
if (scriptLoaded.current) return;
const existingScript = document.querySelector(
'script[src="https://genzform.com/embed-v1.js"]'
);
if (!existingScript) {
const script = document.createElement('script');
script.src = 'https://genzform.com/embed-v1.js';
script.async = true;
document.body.appendChild(script);
}
scriptLoaded.current = true;
}, []);
return (
<iframe
data-genz-form={formId}
data-embed-style="standard"
data-min-height={minHeight}
src={`https://genzform.com/f/${formId}?locale=${locale}`}
style={{ width: '100%', height: '500px', border: 'none' }}
className={className}
title="GenZform"
/>
);
}Popup Component
Create a button that opens the form in a popup modal:
import { useEffect, useRef } from 'react';
interface GenZformPopupProps {
formId: string;
children: React.ReactNode;
width?: number;
darkOverlay?: boolean;
className?: string;
}
export function GenZformPopup({
formId,
children,
width = 450,
darkOverlay = true,
className,
}: GenZformPopupProps) {
const scriptLoaded = useRef(false);
useEffect(() => {
if (scriptLoaded.current) return;
const existingScript = document.querySelector(
'script[src="https://genzform.com/embed-v1.js"]'
);
if (!existingScript) {
const script = document.createElement('script');
script.src = 'https://genzform.com/embed-v1.js';
script.async = true;
script.onload = () => {
// Register popup buttons after script loads
(window as any).GenZEmbed?.registerPopups?.();
};
document.body.appendChild(script);
} else {
// Script already loaded, register new buttons
(window as any).GenZEmbed?.registerPopups?.();
}
scriptLoaded.current = true;
}, []);
return (
<button
data-genz-form={formId}
data-embed-style="popup"
data-width={width}
data-dark-overlay={darkOverlay}
className={className}
>
{children}
</button>
);
}Usage:
<GenZformPopup formId="your-form-id" darkOverlay={true}>
Get a Quote
</GenZformPopup>Programmatic Popup Control
Open popups programmatically using the GenZEmbed API:
import { useEffect, useCallback } from 'react';
export function useGenZformPopup() {
useEffect(() => {
// Ensure script is loaded
const existingScript = document.querySelector(
'script[src="https://genzform.com/embed-v1.js"]'
);
if (!existingScript) {
const script = document.createElement('script');
script.src = 'https://genzform.com/embed-v1.js';
script.async = true;
document.body.appendChild(script);
}
}, []);
const openPopup = useCallback((formId: string, options?: {
popupWidth?: number;
isDarkOverlay?: boolean;
}) => {
(window as any).GenZEmbed?.createPopup?.(formId, {
popupWidth: options?.popupWidth || 450,
isDarkOverlay: options?.isDarkOverlay ?? true,
});
}, []);
return { openPopup };
}Usage:
function MyComponent() {
const { openPopup } = useGenZformPopup();
return (
<button onClick={() => openPopup('your-form-id', { popupWidth: 500 })}>
Open Contact Form
</button>
);
}Full Page Embed
For forms that should take the entire viewport:
export function GenZformFullPage({ formId, locale = 'en' }: {
formId: string;
locale?: string;
}) {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<iframe
data-genz-form={formId}
data-embed-style="full_page"
src={`https://genzform.com/f/${formId}?locale=${locale}`}
style={{ width: '100%', height: '100%', border: 'none' }}
title="GenZform"
/>
</div>
);
}TypeScript Declarations
Add type declarations for the GenZEmbed global:
// types/genzform.d.ts
declare global {
interface Window {
GenZEmbed?: {
init: () => void;
registerEmbeds: () => void;
registerPopups: () => void;
createPopup: (formId: string, options?: {
popupWidth?: string | number;
isDarkOverlay?: boolean;
}) => void;
version: string;
};
}
}
export {};Frequently Asked Questions
Do I need to load the script for basic iframe embeds?
The script is optional for basic embeds but enables auto-height adjustment. Without the script, you'll need to set a fixed height on the iframe.
Can I use the components with Next.js?
Yes. See the Next.js guide for server component considerations and best practices.
How do I style the popup button?
Pass a className prop to the component and style it with your CSS framework (Tailwind, styled-components, etc.). The button is a regular HTML button element.
Will the embed work with React strict mode?
Yes. The components use refs to prevent duplicate script loading in strict mode's double-render behavior.