Skip to content
Lightning CMP

Quickstart

Get a compliant banner live in about a minute. First, choose the tag setup that matches your site in Choose your setup or use the Lightning configurator. The final lightning("init", …) line depends on that choice.

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”

The head block depends on who owns Google Consent Mode. When you use a Google bridge, the bridge supplies the default and the snippet stays smaller. Choose the setup before you paste it:

Use this when your tags are managed in GTM. Replace GTM-XXXXXXX with your container ID, then configure each tag’s Consent Settings in GTM.

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


<!-- 2. Async queue stub. The configured Google bridge owns Consent Mode. -->
<script>
  !(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", { bridges: { google: { tagId: "GTM-XXXXXXX" } } });
</script>

  1. Paste your selected snippet at the very top of <head>, before any site-hosted Google tag or other tracker. Replace YOUR_LICENSE_KEY and the example tag ID with your values. Bridge tabs omit the inline default because the bridge owns it.

  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 for the path you selected. 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 for site-hosted Google tags. Bridge installs omit it because the Google bridge pushes the default before it loads its 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”