The banner installs with one script tag. It loads banner.js from the TruePrivacy CDN, reads your published configuration using your site’s public key, and renders the banner according to the visitor’s region and consent state.
Installation snippet and setup instructions in the dashboard

​
The script tag

Place this in your site’s <head>, before any analytics or marketing scripts: 
<script
  src="https://cdn.trueprivacy.io/banner.js"
  data-trueprivacy-key="pk_live_xxxxxxxxxxxx"
  async
></script>
Your public key is shown under Cookie Banner → Installation in the dashboard. The script is a few kilobytes, served from a global CDN, and loads asynchronously so it never blocks page rendering.
Configuration is fetched from GET /v1/public/consent/{publicKey}/config and cached at the CDN edge, so banner load adds minimal latency.
For opt-in compliance, tracking scripts must not execute before consent. TruePrivacy uses the standard type="text/plain" blocking pattern: 
<!-- Before: executes immediately -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

<!-- After: blocked until the visitor consents to Statistics -->
<script
  type="text/plain"
  data-trueprivacy-category="statistics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"
></script>
Inline scripts work the same way: 
<script type="text/plain" data-trueprivacy-category="marketing">
  fbq('init', '1234567890');
  fbq('track', 'PageView');
</script>
When the visitor grants the named category, banner.js rewrites the script to type="text/javascript" and executes it — without a page reload. Valid category slugs are shown on the Categories screen (defaults: necessary, preferences, statistics, marketing).
Browsers ignore type="text/plain" scripts entirely, so a typo in the category slug means the script never runs for anyone. Test each blocked script after installation.

​
Single-page applications

The banner supports SPAs (React, Vue, Angular, Next.js client routing) out of the box:
  • The script detects history-API navigation and keeps consent state consistent across route changes.
  • Use the JavaScript API to integrate with your app:
// Open the preference center from your own UI
window.TruePrivacy.showPreferences();

// Read current consent state
const consent = window.TruePrivacy.getConsent();
// => { necessary: true, statistics: false, marketing: false, preferences: true }

// React to consent changes
window.addEventListener("trueprivacy:consent", (e) => {
  if (e.detail.statistics) initAnalytics();
});

​
Testing your installation

1

Load your site in a private window

The banner should appear on first visit with no prior consent state.
2

Reject all, then inspect cookies

Open DevTools → Application → Cookies. Only Necessary cookies should exist.
3

Accept all, then re-inspect

Blocked scripts should execute and their cookies appear.
4

Run a scan to confirm

A cookie scan verifies from the outside what actually loads on your pages.