Skip to content
Lapis
Esc
↑↓navigate↵open⌘Jpreview
On this page

Framer

Install the Lapis pixel via Framer custom code and hand the click ID off to your app domain.

Framer sites are usually the marketing half of a SaaS: the pixel lives on the Framer site, and the conversion happens on a separate app domain. The integration has three parts: the pixel in custom code, link decoration to carry the click ID across domains, and a server event from your app backend.

1. Install the pixel

In Framer, go to Site Settings → General → Custom Code → “End of <body> tag”:

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

Publish the site. Custom code only ships on publish.

Add this below the pixel script, in the same custom code block. It appends lapis_click_id to every link that points at your app:

<script>
(function () {
  var APP_HOSTS = ["app.yourdomain.com"]; // your app domain(s)

  function getLapisClickId() {
    var cookie = document.cookie.split("; ").find(function (entry) {
      return entry.indexOf("lapis_sid=") === 0;
    });
    if (!cookie) return null;
    try {
      var session = JSON.parse(
        decodeURIComponent(cookie.split("=").slice(1).join("="))
      );
      return session.sid || null;
    } catch (e) { return null; }
  }

  var clickId = getLapisClickId();
  if (!clickId) return; // organic visitor, so never invent a click id

  document.addEventListener("click", function (e) {
    var link = e.target && e.target.closest && e.target.closest("a[href]");
    if (!link) return;
    try {
      var url = new URL(link.href);
      if (APP_HOSTS.indexOf(url.hostname) !== -1 && !url.searchParams.has("lapis_click_id")) {
        url.searchParams.set("lapis_click_id", clickId);
        link.href = url.toString();
      }
    } catch (err) {}
  }, true);
})();
</script>

3. Store and convert in your app

In your app, read lapis_click_id from the URL at signup, store it on the account record, and send the conversion from your backend once it is confirmed. See the SaaS events guide for the full pattern and the Conversion API for the payload.

Framer-specific notes

  • Custom code applies site-wide automatically, so no per-page work is needed.
  • Framer’s default CSP is permissive. If you have customized your headers, allow cdn.trylapis.com (script) and api.trylapis.com (connect).
  • If your CTA buttons are Framer components rather than plain links, the click-capture decorator still works. It runs in the capture phase, before Framer’s navigation.
  • Browser-visible conversions on the Framer site itself (for example, a newsletter form) can call window.lapis("lead") directly. See Lapis Pixel.

Was this page helpful?