JavaScript API

Programmatically control the consent banner and respond to consent changes using the Cookient JavaScript API.

Overview

The Cookient JavaScript API provides methods to control the consent banner, read consent state, and listen for consent changes. This is useful for:

•Creating custom "Manage Cookies" links in your footer
•Conditionally loading scripts based on consent
•Building custom consent UIs while using Cookient as the backend
•Tracking consent analytics in your own systems

Availability

The API is available after the Cookient script has loaded. Use thecookient:ready event or check window.cookient existence.

Global Object

All API methods are available on the window.cookient global object.

Checking API Availability

// Option 1: Check if object exists
if (window.cookient) {
  window.cookient.showPreferences();
}

// Option 2: Wait for ready event
document.addEventListener('cookient:ready', function() {
  console.log('Cookient API is ready');
  console.log(window.cookient.getConsent());
});

Methods

`showPreferences()`

Opens the consent preferences modal, allowing users to change their choices.

// Open preferences modal
window.cookient.showPreferences();

// Example: Footer link
document.getElementById('cookie-settings').addEventListener('click', function(e) {
  e.preventDefault();
  window.cookient.showPreferences();
});

`hideBanner()`

Programmatically hides the consent banner.

window.cookient.hideBanner();

`showBanner()`

Shows the consent banner, even if the user has already made a choice.

window.cookient.showBanner();

`getConsent()`

Returns the current consent state as an object.

const consent = window.cookient.getConsent();
console.log(consent);
// {
//   f: true,   // Functional (always true)
//   p: false,  // Personalization
//   a: true,   // Analytics
//   m: false,  // Marketing
//   s: true    // Security (always true)
// }

`acceptAll()`

Accepts all cookie categories and closes the banner.

window.cookient.acceptAll();

`rejectAll()`

Rejects all optional categories (keeps Functional and Security) and closes the banner.

window.cookient.rejectAll();

`setConsent(categories)`

Sets consent for specific categories programmatically.

// Accept only analytics
window.cookient.setConsent({
  p: false,  // Personalization
  a: true,   // Analytics
  m: false   // Marketing
});

`revokeConsent()`

Revokes all consent, removes cookies, and shows the banner again.

window.cookient.revokeConsent();

This also clears localStorage items associated with blocked scripts.

Events

Cookient dispatches custom events on the document object that you can listen to.

Event	Fired When
cookient:ready	Cookient script has fully loaded and initialized
cookient:consent	User has made or updated their consent choice
cookient:accept	User clicked "Accept All"
cookient:reject	User clicked "Reject All"
cookient:revoke	Consent was revoked programmatically

Listening to Events

document.addEventListener('cookient:consent', function(e) {
  console.log('Consent updated:', e.detail);
  // e.detail contains the consent object
  // { f: true, p: false, a: true, m: false, s: true }

  if (e.detail.a) {
    // Analytics was accepted - initialize your analytics
    initializeAnalytics();
  }
});

Reading Consent State

You can check consent state at any time using getConsent()or by reading from localStorage directly.

Category IDs

ID	Category	Required
f	Functional	Yes (always true)
p	Personalization	No
a	Analytics	No
m	Marketing	No
s	Security	Yes (always true)

Check Specific Category

// Check if analytics is allowed
function canUseAnalytics() {
  const consent = window.cookient?.getConsent();
  return consent?.a === true;
}

// Conditional script loading
if (canUseAnalytics()) {
  loadGoogleAnalytics();
}

Examples

Footer "Cookie Settings" Link

<!-- HTML -->
<a href="#" id="manage-cookies">Cookie Settings</a>

<!-- JavaScript -->
<script>
document.getElementById('manage-cookies').addEventListener('click', function(e) {
  e.preventDefault();
  if (window.cookient) {
    window.cookient.showPreferences();
  }
});
</script>

Load Chat Widget After Consent

document.addEventListener('cookient:consent', function(e) {
  // Personalization category accepted
  if (e.detail.p) {
    loadIntercom();
  }
});

function loadIntercom() {
  // Your Intercom initialization code
  window.Intercom('boot', { app_id: 'your-app-id' });
}

Track Consent in Your Analytics

document.addEventListener('cookient:consent', function(e) {
  // Send consent choice to your own analytics
  fetch('/api/analytics/consent', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      consent: e.detail,
      timestamp: new Date().toISOString()
    })
  });
});

React Hook Example

import { useState, useEffect } from 'react';

function useCookieConsent() {
  const [consent, setConsent] = useState(null);

  useEffect(() => {
    // Initial state
    if (window.cookient) {
      setConsent(window.cookient.getConsent());
    }

    // Listen for changes
    const handleConsent = (e) => setConsent(e.detail);
    document.addEventListener('cookient:consent', handleConsent);

    return () => {
      document.removeEventListener('cookient:consent', handleConsent);
    };
  }, []);

  return consent;
}

// Usage
function MyComponent() {
  const consent = useCookieConsent();

  if (consent?.a) {
    return <AnalyticsWidget />;
  }
  return null;
}

← Google Consent Mode v2 Privacy Signals →