Platform guide

Cookie consent in a Next.js or React application.

A single script tag in the document head, plus the browser API for anything your own code loads conditionally. Client-side routing is the one thing that behaves differently from a server-rendered site.

Install
Script tag in the document head
API
window.StrongPrivacy
Events
ready, change, script-load, error
Watch
Client-side route changes

Adding the runtime

Put the snippet in the document head so it is present on first paint rather than after hydration. In Next.js that means the root layout’s head, or the framework’s script component with a strategy that loads before interactive content.

Document head

<script
  src="https://strongprivacy.com/embed/v1.js"
  data-site-id="YOUR_SITE_ID"
  data-api-base="https://strongprivacy.com"
  data-privacy-url="/privacy"
  data-platform="custom"
  defer
></script>

Gating your own code

For scripts your application loads itself, use the browser API rather than a conditional render. Register the script against a category and the runtime creates it only when that category is allowed, which is the difference between not loading something and loading it invisibly.

Connecting once the runtime is ready

let stopListening = () => {};

function connectStrongPrivacy() {
  const api = window.StrongPrivacy;
  if (!api) return;

  api.registerScript({
    id: 'support-widget',
    category: 'functional',
    src: 'https://widget.example.com/widget.js',
    async: true
  });

  stopListening = api.onChange((consent) => {
    updateApplicationState(consent);
  });
}

if (window.StrongPrivacy?.isReady) {
  connectStrongPrivacy();
} else {
  window.addEventListener('strongprivacy:ready', connectStrongPrivacy, {
    once: true
  });
}

// Call stopListening() when your component is disposed.

Listen for `strongprivacy:change` to react when a visitor changes their mind mid-session: tearing down a map, stopping a poller, or re-rendering a placeholder.

Client-side navigation

The runtime initialises once, not per route

On a client-routed application there is no second page load, so anything that assumes a fresh document on navigation will be wrong. Consent state persists across route changes, and gated scripts stay gated, but your own per-route analytics calls need to check the current state rather than the state at mount.

Common questions

Does the runtime work with server-side rendering?

Yes. It is a browser runtime and does not participate in rendering, so server-rendered markup is unaffected. Keep the banner out of your own SSR output and let the runtime render it.

How do I avoid a flash of unblocked content?

Load the consent runtime early, but do not rely on `defer` or head placement as a gate. Optional scripts, iframes, images and stylesheets must be absent or inert until the applicable condition is met. Early initialisation controls registered loaders; it cannot retract markup that already started a request.

Sources and verification

Verified on . Product-behaviour statements were checked against the current implementation and tests. The links below are the verification basis recorded for this article. They support the stated facts, not a legal conclusion for every site or configuration; recheck changing vendor behaviour before relying on it in production.

See what your own site is loading

A browser scan reports the requests and storage it observed during the sampled journey. Use configured workspace scans to compare the states and pages that matter to your implementation.