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.
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
Your app has two stages, selected purely by the file suffix on the script URL — there's no query parameter to remember:
| 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 staging or test site at the Preview URL to check your changes before they go live:
<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.
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