Implementation guide · Developer-facing

Install the cookie consent engine

This is a static external script hosted at ComplyToolbox.xyz. It can control marked scripts and iframes on your website; it does not automatically discover or block unmarked trackers.

1. Install the script before optional tags

<script defer src="https://complytoolbox.xyz/consent/ct-consent.js"
  data-ct-site="Example Store"
  data-ct-policy-url="/privacy/"
  data-ct-version="1"
  data-ct-accent="#07756a"></script>

Put this in <head>. The privacy policy URL must resolve on your own site. Change data-ct-version when you materially change the consent purposes or vendor list so visitors choose again.

2. Prevent execution before consent

Replace each optional vendor’s script element; do not leave its original executable script elsewhere on the page. For externally hosted analytics:

<script type="text/plain" data-ct-category="analytics"
  data-ct-src="https://example.net/analytics.js"></script>

For inline scripts, omit data-ct-src and place the inline code inside the inert script element. A strict CSP may require nonces or other changes. A marketing iframe can be gated as follows:

<iframe title="Marketing video" data-ct-category="marketing"
  data-ct-src="https://video.example/embed/123"></iframe>

Supported categories: functional, analytics and marketing. Necessary scripts should not be tagged as optional. Identify categories truthfully from your actual vendor inventory.

3. Use the API after the script loads

// Read browser-local preference data (null before a choice)
window.ComplyToolboxConsent.getConsent();
// Only your own optional code can use the appropriate category
window.ComplyToolboxConsent.hasConsent('analytics');
window.ComplyToolboxConsent.openPreferences();
// For dynamic script/iframe elements added after first page load
window.ComplyToolboxConsent.refresh();
window.addEventListener('ct:consent-change', (event) => {
  console.log(event.detail.consent); // do not upload without privacy review
});

Preferences are stored per browser origin using localStorage for up to 180 days, including selected categories, consent policy version and a timestamp. Browser storage can be blocked or cleared; this is not a reliable server-side consent archive.

4. Validate the integration

  1. Open a new private window and use Developer Tools → Network. Confirm no optional requests fire before a choice.
  2. Press Reject optional. Confirm optional tags remain inert even on reload.
  3. Press Accept all and confirm only the expected vendor tags activate.
  4. Open Cookie preferences and withdraw previously granted permission. The page reloads to avoid re-running marked scripts, but already-set vendor cookies may remain.
  5. Test keyboard controls, small screens, strict Content Security Policy, iframe embeds, tag managers and all third-party services.
An embed banner is not an automatic blocker for scripts that run before this library, through other integrations or through server-side requests. For strict CSP, allow the external JS and CSS URLs explicitly; do not weaken a strong CSP indiscriminately. See limitations.

Build a customized snippet → · Open the demo