JavaScript SDK

Reference for the client-side ConsentTrustee API and events.

Global Object

Once the ConsentTrustee script loads, it exposes a global window.ConsentTrusteeobject that you can use to interact with the consent banner programmatically.

// Check if ConsentTrustee is loaded
if (window.ConsentTrustee) {
  console.log('ConsentTrustee is ready');
}

Methods

ConsentTrustee.getConsent()

Returns the current consent state for all categories.

Returns

{
  necessary: true,    // Always true
  preferences: false,
  statistics: true,
  marketing: false
}

Example

const consent = window.ConsentTrustee.getConsent();
if (consent.statistics) {
  // User has consented to statistics
  loadGoogleAnalytics();
}
ConsentTrustee.hasConsent(category)

Check if consent has been given for a specific category.

Parameters

category (string) - One of: necessary, preferences, statistics, marketing

Example

if (window.ConsentTrustee.hasConsent('marketing')) {
  loadFacebookPixel();
}
ConsentTrustee.showBanner()

Programmatically show the consent banner.

Example

// Add a "Manage Cookies" button
document.getElementById('manage-cookies').onclick = () => {
  window.ConsentTrustee.showBanner();
};
ConsentTrustee.showPreferences()

Open the preferences modal directly, allowing users to customize their consent.

Example

// Footer link to manage cookie preferences
<a href="#" onclick="window.ConsentTrustee.showPreferences(); return false;">
  Cookie Settings
</a>
ConsentTrustee.acceptAll()

Programmatically accept all cookie categories.

ConsentTrustee.rejectAll()

Programmatically reject all optional cookie categories (necessary remains true).

ConsentTrustee.setConsent(categories)

Set consent for specific categories programmatically.

Example

window.ConsentTrustee.setConsent({
  preferences: true,
  statistics: true,
  marketing: false
});
ConsentTrustee.resetConsent()

Clear all consent and show the banner again. Useful for testing.

ConsentTrustee.setLanguage(lang)

Change the banner language dynamically. If the banner is visible, it re-renders with the new language.

Parameters

lang (string) - Language code: en, de, fr, es, it, nl, pl, pt, uk

Example

// Integrate with your language switcher
function onLanguageChange(newLang) {
  window.ConsentTrustee.setLanguage(newLang);
}
ConsentTrustee.getLanguage()

Get the current active language of the consent banner.

Returns

"en" | "de" | "fr" | "es" | "it" | "nl" | "pl" | "pt" | "uk"

Dynamic Language Support

ConsentTrustee automatically detects language changes on multi-language websites and updates the banner accordingly.

Language Detection Priority

  1. data-ct-lang attribute on the script tag (highest priority)
  2. Programmatic setLanguage() API call
  3. <html lang="..."> attribute (auto-detected via MutationObserver)
  4. Browser language (navigator.language)
  5. Default: English

Automatic Detection

When your website changes the <html lang> attribute, the banner automatically updates:

// Your existing language switcher
function switchToGerman() {
  document.documentElement.lang = 'de';
  // ConsentTrustee banner updates automatically!
}

Force Language via Script Attribute

<script
  src="https://api.consenttrustee.com/runtime/consenttrustee.js"
  data-ct-slug="your-domain-slug"
  data-ct-lang="de"
  async>
</script>

Events

ConsentTrustee dispatches custom events that you can listen to for integrating with your application.

ct:ready

Fired when ConsentTrustee has finished loading and is ready to use.

document.addEventListener('ct:ready', () => {
  console.log('ConsentTrustee is ready');
  const consent = window.ConsentTrustee.getConsent();
});
ct:consentChanged

Fired whenever the user changes their consent preferences.

document.addEventListener('ct:consentChanged', (event) => {
  const { categories, action } = event.detail;
  console.log('Consent changed:', action);
  console.log('Categories:', categories);

  // React to consent changes
  if (categories.statistics) {
    enableAnalytics();
  } else {
    disableAnalytics();
  }
});

Event Detail

{
  action: "accept_all" | "reject_all" | "custom",
  categories: {
    necessary: true,
    preferences: boolean,
    statistics: boolean,
    marketing: boolean
  }
}
ct:bannerShown

Fired when the consent banner is displayed to the user.

document.addEventListener('ct:bannerShown', () => {
  // Track banner impression
  analytics.track('consent_banner_shown');
});
ct:bannerHidden

Fired when the consent banner is hidden (after user action).

Script Blocking

ConsentTrustee automatically manages script execution based on user consent. Here's how it works:

How Script Blocking Works

  1. Scripts with type="text/plain" are ignored by the browser
  2. ConsentTrustee reads the data-ct-category attribute
  3. When consent is given, the script type is changed to text/javascript
  4. For external scripts, data-ct-src is moved to src
  5. The script then executes normally

Inline Scripts

<script type="text/plain" data-ct-category="statistics">
  // This code runs only after statistics consent
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

External Scripts

<script
  type="text/plain"
  data-ct-category="marketing"
  data-ct-src="https://connect.facebook.net/en_US/fbevents.js">
</script>

IFrames

<iframe
  data-ct-category="marketing"
  data-ct-src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315">
</iframe>

Callback Functions

For more complex integrations, you can register callbacks that run when specific consent is given.

// Register a callback for when statistics consent is given
window.ConsentTrustee.onConsent('statistics', () => {
  // Initialize analytics
  gtag('config', 'GA_MEASUREMENT_ID');
});

// Register a callback for when marketing consent is given
window.ConsentTrustee.onConsent('marketing', () => {
  // Initialize marketing pixels
  fbq('init', 'PIXEL_ID');
});

// Callback runs immediately if consent already given
// Otherwise, runs when user gives consent

Script Attributes

Configure ConsentTrustee behavior using data attributes on the script tag.

AttributeRequiredDescription
data-ct-slugYesYour domain slug from the dashboard
data-ct-langNoForce a specific language (en, de, fr, etc.)
data-ct-auto-showNoSet to "false" to prevent auto-showing banner
data-ct-debugNoEnable debug logging in console
<script
  src="https://api.consenttrustee.com/runtime/consenttrustee.js"
  data-ct-slug="your-domain-slug"
  data-ct-lang="de"
  data-ct-auto-show="true"
  async>
</script>

Best Practices

Do:

  • Load the script as early as possible in <head>
  • Use the async attribute for non-blocking load
  • Block all non-essential scripts until consent
  • Provide a way to manage preferences in footer
  • Test in incognito mode regularly

Don't:

  • Load tracking scripts before ConsentTrustee
  • Auto-accept consent without user interaction
  • Hide or make the reject button hard to find
  • Store consent preferences on your own server only
  • Ignore the necessary category for essential cookies