Docs

Guide: cookie banner

From one script tag to a fully custom integration — three paths, pick the one that fits.

Option 1 — One script tag (30 seconds)

Add one tag before </body>. The banner appears automatically, records every choice, and populates the cookie declaration table from your last scan.

<script src="https://tripticonsent.tripticode.com/cmp.js"
        data-tc-api-key="pk_live_…"></script>
  • data-tc-locale="es" — force a language instead of detecting the browser’s
  • data-tc-auto-show="false" — load silently and call window.tripticonsent.show() yourself
  • Reopen preferences from any link: onclick="window.tripticonsentPreferences()"
You need at least one published purpose and a pk_ key with your domain on its allowlist before the banner shows — see the Quickstart.

Option 2 — Google Tag Manager (no code)

  1. In GTM: Tags → New → Discover more tag types in the Community Template Gallery → search Tripticonsent CMP.
  2. Enter your publishable key and choose a layout (bar, box, modal, or wall).
  3. Set the trigger to Consent Initialization — All Pages.
  4. Publish the container.
GTM injects the script programmatically via window.__tcConfig instead of data-* attributes. The banner behaves identically to option 1.

Option 3 — Custom integration (full control)

Use this when you need to match an existing design system or drive the banner from your own UI framework. Uses the SDK — about 30 lines.

  • Publish the purposes you’ll ask about — e.g. analytics, marketing (see Consent statements).
  • Create a publishable key (pk_…) and add your domain to its allowlist.

Step 1 — Create the client

import { TripticonsentClient } from '@tripticonsent/sdk';

const tc = new TripticonsentClient({ apiKey: 'pk_live_…' });

// Identify the anonymous visitor by a first-party cookie you set yourself.
const visitor = 'cookie_id:' + getOrCreateVisitorCookie();

Step 2 — Render the banner from your purposes

Don’t hard-code the copy — pull the exact published wording so the record matches what was shown.

const { purposes } = await tc.getPurposes({ locale: navigator.language });

for (const p of purposes) {
  //  p.key            -> "analytics"
  //  p.text.title     -> "Usage analytics"
  //  p.text.body      -> "Helps us see which features get used…"
  //  p.defaultState   -> "denied"  (regional rules — always respect this)
  renderToggle(p);
}

Step 3 — Save the choice

async function onSave(choices /* { analytics: true, marketing: false, … } */) {
  await tc.recordConsentBatch(
    Object.entries(choices).map(([purpose, ok]) => ({
      subject: visitor,
      purpose,
      state: ok ? 'GRANTED' : 'DENIED',
      locale: navigator.language,
      channel: 'cookie_banner',
    })),
    { idempotencyKey: crypto.randomUUID() },
  );
  tc.notifyConsentChanged();
}

Step 4 — Gate your tags

tc.gate(visitor, ['analytics'], () => {
  loadGoogleAnalytics();
});
Using Google tags? tc.applyConsentMode(visitor, gtag) translates the state into a Consent Mode v2 gtag("consent","update",…) call for you.
When the visitor signs in, carry their choices over with a merge — see anonymous → identified.
PreviousJavaScript SDK