Embedding
Embedding a funnel
Three steps: list the domains the funnel may answer on, publish it, then paste one line into the page where it should appear. The embed script is 21.8 KB gzipped, loads asynchronously, and adds nothing to the global scope of the page hosting it.
List the domains
On the funnel’s Connect tab, add every site that will embed it — including staging. A funnel only answers on domains you list. A funnel with an empty list would go live and answer nobody, so we refuse the publish and name the field instead.
Publish the funnel
The runtime serves published versions only. A draft is invisible to the embed, so a change reaches your visitors when you publish it and not before.
Paste one line
Put the mount point where the funnel should appear and the script anywhere on the page. One script, no stylesheet, no font fetch.
<!-- Paste where the funnel should appear --> <div data-leadgible-funnel="fnl_your_funnel_id" data-mode="inline"></div> <script src="https://cdn.leadgible.com/v1/embed.js" data-api="https://api.leadgible.com" async></script>
Replace the funnel id with your own. Keep the async attribute; without it the script blocks your page from painting. The data-api attribute tells the script where to send answers, and it is not optional — the runtime is served from a different host than the API.
On a domain you have not listed
Domain allowlist.
Add every site that will embed the funnel — including staging — or the funnel returns nothing there, with no error the visitor or the page can see. It is the first thing to check when an embed renders blank.
| Rule | What happens |
|---|---|
| Hostnames per funnel | Up to 50. Every entry counts, including localhost. |
| What is stored | A bare hostname. Paste a URL, a port or mixed case and it is normalised — https://RedwoodCivil.com/enquire is stored as redwoodcivil.com. |
| Wildcards | Not supported. *.redwoodcivil.com is refused on save. |
| Subdomains | Listed separately. www.redwoodcivil.com and redwoodcivil.com are two entries. |
| Local development | localhost is accepted like any other hostname, and it counts toward the 50. |
| An empty list | Answers no website, deliberately — the fail-closed direction, and why publishing asks for a domain first. The funnel’s own hosted page still takes submissions; unpublishing is what stops it answering at all. |
The two modes
Two ways a funnel reaches a respondent. Only the first is a data-mode; the second is a page we serve, and no script is involved.
| Mode | What it does | When to use it |
|---|---|---|
| Inline · data-mode="inline" | The funnel renders in your mount point, at the width of its container, in the flow of your page. | Most embeds. It sits in the page like any other block. |
| Hosted · a URL, not a mode | The funnel is served from its own Leadgible page. Nothing is pasted into your site; you link to it. | Anywhere you cannot add a script tag — an email, a QR code, a social profile. |
https://cdn.leadgible.com/f/fnl_your_funnel_id
What inherit theming reads
In inherit mode the funnel takes three things from your page and nothing else. Everything else — the ground, the dividers, the ink — stays at the funnel's own values, so a page it cannot read cannot make it unreadable.
| Property | Read from | Fallback |
|---|---|---|
| Font family | The font your page already gives the element the funnel mounts into. | The system stack — never DM Sans, which is the Leadgible brand and not yours. |
| Accent colour | Your page’s accent-color, if it sets one. Failing that, the colour of your first link — unless it is the same colour as your body text, which is text and not an accent. | #0F62CB |
| Control radius | The radius your page gives its own first button, input, select or textarea. Capped at the card radius, so a page with pill buttons does not turn the funnel’s option cards into stadiums. | 10px |
There is no --leadgible-accent and no --leadgible-radius.
Setting a custom property does nothing. The funnel reads what your page already declares.