For whoever runs the website.

A contractor takes estimate requests through FL Permit Pay and wants the form on their site. The job is a line or two of code.

The form on a page

Two lines, pasted together where the form should appear: a placeholder, then the script that names the same form. The contractor has the real code, with their form’s code in it, under Leads > Edit forms > Share > Put it on your website.

<div data-pp-form="YOUR-FORM-CODE" style="min-height:900px"><a href="https://flpermitpay.com/e/YOUR-FORM-CODE">Request an estimate</a></div>
<script src="https://flpermitpay.com/embed/v1.js" data-form="YOUR-FORM-CODE" async></script>

The placeholder holds 900 px of room while the form loads. Its link to the request page is for a visitor whose browser blocks the script (a site’s security policy, an ad blocker); the script takes the link out when it puts the form in: full width up to 760 px, then sized to the form’s height as it changes, never past 4,000 px. What sits below the form moves once, when that height arrives. The script loads from https://flpermitpay.com, so the form always runs on that address. It fills only a placeholder whose form a script on the page names, so markup posted elsewhere on the site (a comment, a review) cannot pull in a different form. Two forms on one page take two pairs.

Settings on the placeholder and the script

data-pp-form

On the placeholder: the form's code. The form appears inside it, but only when a script on the page names the same code in data-form.

data-form

On the script: the form's code. Without data-mode it fills the placeholder with that code; with data-mode it makes the floating button or opens from your own links.

data-mode

With data-form: button adds a floating button that opens the form in a sheet. link adds nothing visible and opens the sheet from your own links.

data-label

The floating button's words, up to 60 characters. Default: Get a free estimate.

data-color

Optional. The floating button's color as #rgb or #rrggbb, for example the company's own. Anything else, or nothing, gives a plain dark button with text picked to read on it.

<script src="https://flpermitpay.com/embed/v1.js" data-form="YOUR-FORM-CODE" data-mode="button" async></script>

Open it from your own links

Any link on the same site to #estimate, or any element with data-pp-open, opens the form in a sheet: a bottom sheet on phones, a side sheet on wider screens. Esc and the close button shut it.

<a href="#estimate">Free estimate</a>
<script src="https://flpermitpay.com/embed/v1.js" data-form="YOUR-FORM-CODE" data-mode="link" async></script>

Or open it from your own script:

window.PermitPay && window.PermitPay.open(); // true when the form opened

Count sent requests as conversions

When a request is sent, the script fires permitpay:sent on window, once. Its detail is empty: no name, phone, email or answer.

window.addEventListener("permitpay:sent", function () {
  // A request was sent. Fire your own conversion tag here.
});

When the builder boxes scripts

Some builders (Wix’s Embed HTML is one) run pasted code inside their own fixed-size frame. There, use the form’s address in a frame and size the builder’s box so the form has no scroll bar. It will not grow on its own.

<iframe src="https://flpermitpay.com/e/YOUR-FORM-CODE?pp_embed=1" title="Request a free estimate" style="width:100%;height:100%;border:0"></iframe>

For visitors with JavaScript off, a plain link to the same form:

<noscript><a href="https://flpermitpay.com/e/YOUR-FORM-CODE">Request a free estimate</a></noscript>

Good to know

What it passes

The form’s address gets the page’s host and path (never its query or hash), the referring site, any utm_* tags and any gclid, fbclid or msclkid on the page.

What it keeps

The script sets no cookies or storage. One global, window.PermitPay. Running the script twice does not add a second form or a second button.

Content-Security-Policy

If the site sends one, allow https://flpermitpay.com in script-src and frame-src.

Check it

Open the published page, not the builder's preview. Send a request through it and it lands in the contractor's Leads.

It shows on your live site, and the editor preview may not show it. Open the published page to check it.

Steps for one builder, in its own menu words.

All website builders