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.
- Next.js: loading and optimising scripts
Official documentation
Checked
- StrongPrivacy custom-site installation guide
Product documentation
Checked
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.