React applications require special handling for external scripts due to their virtual DOM and component lifecycle. This guide shows you how to properly integrate Lead Booster Pro forms into your React application.
Quick start
The easiest way to add Lead Booster Pro to your React app is using our purpose-built component that handles script loading and initialization automatically.
Step 1: Create the component
Create a new file LeadBoosterProForm.tsx (or .jsx for JavaScript) in your components folder:
import { useEffect, useRef } from 'react';
// Global flag to track if the main script is loaded
declare global {
interface Window {
leadBoosterPro?: any;
leadBoosterScriptLoaded?: boolean;
}
}
interface LeadBoosterProFormProps {
formId: string;
type?: 'inline' | 'popup' | 'slide-in';
alignment?: 'left' | 'center' | 'right';
className?: string;
}
const LeadBoosterProForm = ({
formId,
type = 'inline',
alignment = 'center',
className = ''
}: LeadBoosterProFormProps) => {
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!containerRef.current) return;
// Clear any existing content
containerRef.current.innerHTML = '';
const initializeForm = () => {
// Create the initialization script
const script2 = document.createElement('script');
script2.type = 'text/javascript';
script2.innerHTML = `
leadBoosterPro.forms.create({
form: '${formId}',
type: '${type}',
alignment: '${alignment}'
})
`;
// Add the script to the container
if (containerRef.current) {
containerRef.current.appendChild(script2);
}
};
// Check if the script is already loaded
if (window.leadBoosterScriptLoaded && window.leadBoosterPro) {
// Script already loaded, just initialize the form
initializeForm();
} else {
// Check if script is already in DOM but not marked as loaded
const existingScript = document.querySelector('script[src="https://app.leadboosterpro.io/form/iframe.js"]');
if (existingScript) {
// Script exists, wait for it to load or check if already loaded
if (window.leadBoosterPro) {
window.leadBoosterScriptLoaded = true;
initializeForm();
} else {
// Add listener for when it loads
existingScript.addEventListener('load', () => {
window.leadBoosterScriptLoaded = true;
initializeForm();
});
}
} else {
// Create and load the script for the first time
const script1 = document.createElement('script');
script1.src = 'https://app.leadboosterpro.io/form/iframe.js';
script1.charset = 'utf-8';
script1.type = 'text/javascript';
script1.onload = () => {
window.leadBoosterScriptLoaded = true;
initializeForm();
};
script1.onerror = () => {
console.error('Failed to load LeadBoosterPro script');
};
// Add the first script to the document head (not container)
document.head.appendChild(script1);
}
}
return () => {
if (containerRef.current) {
containerRef.current.innerHTML = '';
}
};
}, [formId, type, alignment]);
return <div ref={containerRef} className={className} />;
};
export default LeadBoosterProForm;
Step 2: Use the component
Import and use the component anywhere in your React application:
import LeadBoosterProForm from './components/LeadBoosterProForm';
function ContactPage() {
return (
<div className="container">
<h1>Contact Us</h1>
<LeadBoosterProForm
formId="your-form-id-here"
type="inline"
alignment="center"
className="my-form-container"
/>
</div>
);
}
Usage examples
Basic usage
<LeadBoosterProForm formId="6826498813200c357a957452" />
With custom styling
<LeadBoosterProForm
formId="6826498813200c357a957452"
className="max-w-2xl mx-auto p-4"
/>
Multiple forms on one page
function MultiFormPage() {
return (
<>
<section id="contact">
<LeadBoosterProForm
formId="contact-form-id"
type="inline"
/>
</section>
<section id="demo">
<LeadBoosterProForm
formId="demo-form-id"
type="inline"
/>
</section>
</>
);
}
Conditional rendering
function MultiFormPage() {
return (
<>
<section id="contact">
<LeadBoosterProForm
formId="contact-form-id"
type="inline"
/>
</section>
<section id="demo">
<LeadBoosterProForm
formId="demo-form-id"
type="inline"
/>
</section>
</>
);
}
How it works
The component handles several React-specific challenges:
- Script loading: Dynamically loads the Lead Booster Pro script after the component mounts
- Duplicate prevention: Ensures the script is only loaded once, even with multiple forms
- Proper cleanup: Cleans up when the component unmounts
- Re-render safety: Handles React’s strict mode and re-renders gracefully
Conclusion
Integrating Lead Booster Pro with React is straightforward using our dedicated component. It handles all the complexity of script loading, initialization, and React’s lifecycle for you. Simply copy the component into your project, add your form ID, and you’re ready to start capturing more qualified leads.
If you encounter any issues or have questions not covered in this guide, please reach out to our support team. We’re here to help you maximize your lead conversion, regardless of your tech stack.
FAQ
Why doesn't the standard embed code work in React?
React’s virtual DOM doesn’t execute inline scripts from the standard embed code. Scripts need to be dynamically loaded after the component mounts, which is what our component handles automatically.
How do I test forms in development?
Lead Booster Pro forms work in development environments. Make sure your development URL (like http://localhost:3000) is added to your allowed domains in the Lead Booster Pro dashboard.
What about React Native?
This component is designed for React web applications. For React Native, you would need to use a WebView component to display Lead Booster Pro forms.
