Skip to content
Lapis
Esc
navigateopen⌘Jpreview
On this page

Webflow

Install the Lapis pixel in Webflow custom code and capture the click ID in forms or app links.

Webflow sites fall into two conversion patterns: native Webflow forms (lead gen) and links out to a separate app (SaaS). Both start with the same pixel install.

1. Install the pixel

In Webflow, go to Site Settings → Custom Code → Footer Code:

<script
  src="https://cdn.trylapis.com/pixel/v1/lapis-pixel.js"
  data-key="pk_YOUR_PIXEL_KEY"
></script>

Publish the site to all domains.

2a. Lead-gen pattern: hidden form field

For Webflow forms, add a hidden field and populate it from the cookie. In the Designer, add an Embed element inside the form:

<input type="hidden" name="lapis_click_id" id="lapis-click-id-field" />

Then in Footer Code, below the pixel:

<script>
(function () {
  var cookie = document.cookie.split("; ").find(function (entry) {
    return entry.indexOf("lapis_sid=") === 0;
  });
  if (!cookie) return;
  try {
    var session = JSON.parse(
      decodeURIComponent(cookie.split("=").slice(1).join("="))
    );
    var field = document.getElementById("lapis-click-id-field");
    if (session.sid && field) field.value = session.sid;
  } catch (e) {}
})();
</script>

The click ID now arrives with every form submission: in the Webflow form notification, or in the webhook if you pipe submissions to Zapier, Make, or your own backend. Send lead_created from wherever the submission lands. See the lead gen events guide.

If conversions happen in a separate app, use the link-decoration script from the Framer guide. It is identical for Webflow: put it in Footer Code and set APP_HOSTS to your app domain.

Webflow-specific notes

  • Footer Code applies site-wide. If you want the pixel on only some pages, use per-page custom code instead. But remember that conversions can start anywhere, so site-wide is almost always right.
  • Webflow Ecommerce: the order confirmation page can fire window.lapis("purchase", {...}) browser-side, but prefer server-side order_created via a Webflow order webhook. See the ecommerce events guide.
  • Custom code requires a paid Webflow site plan.

Was this page helpful?