Script Tag Integration

The script tag is the universal way to add 1Consent. It works on any website regardless of stack — no build step, no package install. Paste one <script> into your <head> and the CMP (consent banner + preference center) loads on every page.

TCF is a dashboard preview

During the public beta, publish GDPR or US Privacy releases on your website. You can configure, save and interact with real IAB TCF drafts in the authenticated dashboard, but TCF cannot be installed on a website or published to Live or Staging on any plan. Public preview URLs do not provide TCF access. Publication is coming soon.

Choose a setup

Decide how third-party scripts get gated behind consent:

	Automatic Setup	Performance Setup
Best for	Quick start	Core Web Vitals
Effort	Just add the script	Mark third-party scripts with `<template>`
Trade-off	Adds runtime processing to detect and block scripts	Minimal runtime overhead

Automatic Setup — the Autoblocker detects and blocks known third-party scripts at runtime by pattern-matching against a database of known services. No changes to your existing HTML.
Performance Setup — you wrap third-party scripts in <template> tags so they never load until consent. Recommended if you care about Core Web Vitals.

Installation

Add the script

Copy the snippet from the Installation tab in your dashboard and paste it into the <head> of your site, before any other scripts:

<script src="https://web.cmp.1consent.app/id/YOUR_APP_ID.js"></script>

Replace YOUR_APP_ID with the App ID from your dashboard. This alone gives you the consent banner and — with Automatic Setup — runtime script blocking.

The 1Consent script must load first, before any third-party scripts you want to gate. Otherwise those scripts may run before consent is resolved.

Gate third-party scripts (Performance Setup)

For the performance-optimized path, replace each third-party <script> with a <template> carrying the service's tag name:

Before

<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>

After

<template data-1c-service-tag="google-analytics">
  <script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>
</template>

The data-1c-service-tag value must match a service tag configured in your dashboard — find your tags on the Services page. The wrapped script stays inert until the visitor consents to that service, and is released the moment they do.

Async loading

GDPR-only apps using the Performance Setup can safely add async to the script tag, so it never blocks HTML parsing:

<script src="https://web.cmp.1consent.app/id/YOUR_APP_ID.js" async></script>

Apps with a framework that requires synchronous signalling — TCF or US/CCPA — must load the script synchronously (no async), and the Automatic Setup must also stay synchronous so it can gate scripts before they run.

Preview before going Live

For GDPR and US Privacy, the file suffix selects the preview or published configuration:

Stage	Script URL	What it serves
Preview	`…/id/YOUR_APP_ID.preview.js`	Your latest unpublished edits, for testing
Live	`…/id/YOUR_APP_ID.js`	What your visitors see (your published config)

Point your test site at the Preview URL to check GDPR or US Privacy changes before they go live. TCF drafts must use the private dashboard preview instead:

<script src="https://web.cmp.1consent.app/id/YOUR_APP_ID.preview.js"></script>

When you're happy, publish in the dashboard and use the plain Live URL (…/id/YOUR_APP_ID.js) on your production site.

The Install tab in your dashboard has a Preview / Live switch that generates the exact URL for each stage — copy it from there. Pro plans also get a Staging stage (…/id/YOUR_APP_ID.staging.js) for an extra promotion step before Live.

Match the website's theme

The loaded CMP exposes a browser API for appearance changes:

window.__1consent.setThemeMode('dark');
window.__1consent.setThemeMode('light');
window.__1consent.setThemeMode('auto'); // Resolve from the device preference

Publish a Light & Dark theme in the dashboard so both palettes are available. Call setThemeMode whenever your site's resolved appearance changes. It updates an open banner or preference center and also applies to views opened later, without changing the visitor's consent choices.

The website owns its saved preference. Reapply it on every page load after window.__1consent becomes available; the bootstrap loads the runtime in a separate script, so the bootstrap's own load event alone does not guarantee API readiness. For a website with a System option, forward its resolved 'light' or 'dark' value again whenever the device preference changes. This also keeps the page and CMP aligned when another tab changes the saved website preference.

Next steps

WordPress Integration — the official plugin injects the script for you
React Integration — typed service names and parse-time gating for React, Next.js, Vite, Remix, and Astro

On this page