Skip to content
Lightning CMP

Quickstart

Get a compliant banner live in about a minute. Everything else in these docs is either a per-stack version of this exact snippet or an optional refinement.

Before you start

Section titled “Before you start”

You need three things — see Prerequisites for detail:

  • A license key (k=8f3c…). It’s baked into the script URL and carries your siteId, so you usually don’t set siteId in init().
  • Your domains registered against the site. The SDK only runs on authorised hosts; everywhere else it’s a harmless no-op (localhost is allowed for testing).
  • Access to <head> — ideally as the first thing in it.

Install

Section titled “Install”

  1. Paste the snippet at the very top of <head>, before any Google tag or other tracker. Replace YOUR_LICENSE_KEY with your key.

    index.html — top of <head>
    <!-- 1. Warm up the first backend round-trip. -->
    <link rel="preconnect" href="https://cmp.lightning-consent.io" />
    

    <!-- 2. Consent Mode v2 defaults + async queue stub. MUST be first. -->
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        ad_user_data: "denied",
        ad_personalization: "denied",
        wait_for_update: 500,
      });
      !(function (c) {
        c.lightning =
          c.lightning ||
          function () {
            (c.lightning.q = c.lightning.q || []).push(arguments);
          };
      })(window);
    </script>
    

    <!-- 3. Load the CMP async (never render-blocking). -->
    <script
      async
      src="https://cmp.lightning-consent.io/v1/cmp.js?k=YOUR_LICENSE_KEY"
    ></script>
    <script>
      lightning("init", { theme: "light" });
    </script>

  2. Load the page and open its console. Run:

    LightningCMP.debug();

    You’ll see the resolved regulation, the Consent Mode signals, and a table of any scripts the CMP is gating. If that prints, you’re installed.

That’s a complete, compliant install. The banner shows (or doesn’t) according to the visitor’s region, resolved at the edge.

What each part does

Section titled “What each part does”

A one-line tour — the line-by-line explainer goes deeper.

Part Why it’s there
preconnect Warms the TLS connection to the edge so the first config round-trip is fast. Pure performance.
gtag('consent','default', …) The Consent Mode default. Tells every Google tag “assume denied until I say otherwise.” Must run before any Google tag.
The lightning() queue stub Lets you load cmp.js async and still call lightning('init', …) immediately — calls are queued and replayed on load.
cmp.js?k=… The SDK (~12 KB gzipped), async, never render-blocking. The ?k= key authorises backend calls and carries your siteId.
lightning('init', { … }) Boots the banner with your config.

lightning(...) vs LightningCMP.*

Section titled “lightning(...) vs LightningCMP.*”

Two ways to call the CMP, for two moments:

  • lightning('method', args) — the queue-safe dispatcher. Use it in the initial page markup (like lightning('init', …) above), before the SDK has finished loading.

  • window.LightningCMP.* — the real API, available once loaded. Call it from event handlers and app code, e.g. a footer “Cookie settings” link:

    <button onclick="LightningCMP.openPreferences()">Cookie settings</button>

Next steps

Section titled “Next steps”