Widget Integration

Technical guide for embedding the LeadFloAgent chat widget on any website.

This guide covers technical integration of the LeadFloAgent chat widget. For platform-specific setup instructions, see the Installing the Widget guide.

Standard Embed

Paste this snippet before the closing </body> tag on every page where you want the widget to appear:

<script src="https://leadfloagent.com/widget.js?key=YOUR_WIDGET_KEY" defer></script>

The defer attribute ensures the widget loads after the page's main content, so it does not affect page load performance.

In your dashboard, go to your website, then Appearance → Embed Code. Your widget key is the alphanumeric string in the key query parameter. Keep this key confidential — anyone with the key can load the widget. Restrict it to your domain via Settings → Allowed Domains.

Real Estate Lead Form Fields

The widget is pre-configured with lead fields tailored to real estate. These appear automatically in the lead capture form — no extra configuration is needed.

Field	Type	Required	Notes
Name	Text	Yes	First and last name
Email	Email	Yes	Primary contact and used for notifications
Phone	Tel	No	Displayed in lead details
Intent	Select	No	Options: Buy / Sell / Rent
Time Frame	Select	No	Shown after Intent; options: ASAP / 1–3 mo / 3–6 mo / 6+ mo

Platform Integration Examples

WordPress

Plugin method (recommended):

Install "Insert Headers and Footers" from the WordPress plugin directory. Go to Settings → Insert Headers and Footers and paste the script into the footer scripts field.

Manual theme edit:

// In footer.php, before </body>
<script src="https://leadfloagent.com/widget.js?key=YOUR_WIDGET_KEY" defer></script>

Next.js (App Router)

Use Next.js's built-in Script component with strategy="afterInteractive" to load the widget after the page becomes interactive:

// src/app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://leadfloagent.com/widget.js?key=YOUR_WIDGET_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Squarespace

Settings → Advanced → Code Injection → Footer — paste the script tag.

Wix

Settings → Custom Code → Add Custom Code. Set placement to Body - end and scope to All Pages.

Webflow

Project Settings → Custom Code → Footer Code — paste the script tag. Publish after saving.

Custom HTML / IDX Broker

Paste the script tag before </body> in your site's main template file. In IDX Broker, look for a "Footer Scripts" or "Custom Code" field in your template settings.

Content Security Policy (CSP)

If your site uses Content Security Policy headers, add these directives to allow the widget to load and communicate:

script-src 'self' https://leadfloagent.com;
connect-src 'self' https://leadfloagent.com;

Without these entries, the widget script will be blocked by the browser.

Allowed Domains Restriction

To prevent your widget key from being used on sites you do not control, configure allowed domains:

Go to Dashboard → Settings → Allowed Domains.
Add your domain (e.g., yourbrokerage.com).
Add any subdomains separately if needed (e.g., listings.yourbrokerage.com).

Once set, the widget checks the current page's window.location.hostname against the allowed list at load time. The widget will not render on any unlisted domain.

Verifying the Integration

After embedding the snippet:

Open your website in an incognito browser window.
The chat bubble should appear in the bottom-right corner within 1–2 seconds of page load.
Click the bubble and send a test message.
In your LeadFloAgent dashboard, go to Conversations to confirm the session is being recorded.

If the widget does not appear, check:

The snippet is placed before </body>, not inside <head>
Your widget key is correct (no extra spaces)
The current domain is listed under Allowed Domains (if restriction is enabled)
No browser extensions are blocking third-party scripts
The browser console does not show a CSP error

Performance Notes

The widget script is loaded with defer, which means it does not block HTML parsing or page rendering. The script itself is lightweight (under 50 KB gzipped). Conversations and lead data are sent to the LeadFloAgent API asynchronously and do not affect page performance.

Widget Integration