window.Moelleux client API

The embed exposes a JavaScript API on window.Moelleux to drive consent from your site’s code. The API is frozen and versioned (semver via Moelleux.version).

Guard: wait until the API is ready

The embed loads asynchronously. Never call window.Moelleux directly on page load: use the MoelleuxOnReady queue, which works whether your code runs before or after the embed.

<script>
  window.MoelleuxOnReady = window.MoelleuxOnReady || [];
  window.MoelleuxOnReady.push(function (M) {
    // M === window.Moelleux, garanti prêt
    console.log(M.getConsent());
  });
</script>

Once the embed is loaded, you can also use Moelleux.ready(cb).

API surface

Methods and properties available on window.Moelleux:

Method	Description
`version`	Embed version (string).
`ready(cb)`	Calls cb(Moelleux) as soon as the API is ready.
`getConsent()`	Returns {choices, policyVersion, consentId, timestamp} or null if no consent.
`hasConsent(category)`	Returns true/false for a category (analytics, marketing, functional, preferences, essential).
`acceptAll() / rejectAll()`	Accept all / reject all (required categories stay active).
`setConsent({...})`	Sets several categories at once (unknown keys are ignored).
`acceptCategory(cat) / denyCategory(cat)`	Accepts / denies a single category.
`openPreferences()`	Opens the preferences modal.
`reset()`	Clears the stored consent.
`on(event, cb)`	Subscribe to the event bus; returns an unsubscribe function. Events: consent.given, consent.changed, consent.reset, language.changed.
`getLanguage() / setLanguage('fr'\|'en')`	Reads / changes the UI language (re-renders the banner; both locales are already embedded).
`getJurisdiction()`	Returns the served jurisdiction (e.g. qc-loi25). Read-only (see below).
`showBadge() / hideBadge()`	Shows / hides the floating preferences pill (#mx-float).

The floating pill appears automatically after consent. To disable it entirely, set banner_config.floatButton = false (you then trigger preferences via your own link + openPreferences()). showBadge() forces the display even if the flag is false.

DOM event (recommended for integration)

On every consent given or changed, the embed dispatches a CustomEvent on document — listenable without depending on load order.

document.addEventListener('moelleux:consent', function (e) {
  // e.detail = {choices, consentId, policyVersion, timestamp}
});

e.detail contains: {choices, consentId, policyVersion, timestamp}.

State CSS classes (cssClasses option)

When the cssClasses option is enabled in the banner config, the embed sets on the <html> element the classes mx-consent-{cat} (category granted) and mx-consent-no-{cat} (denied), plus mx-consent-ready. Classes are set from init (from the cookie) to avoid any content flash.

.mx-consent-no-marketing .promo-marketing { display: none; }
.mx-consent-analytics    .badge-analytics  { display: inline; }

Example: hide a promo block if marketing is denied, show a badge if analytics is granted.

Jurisdiction: read-only

getJurisdiction() reads the served jurisdiction, but you do not change jurisdiction at runtime: the served script is jurisdiction-specific (categories, consent model and policy differ). For another jurisdiction, load the dedicated URL cdn.moelleux.ca/c/{site_key}-{jurisdiction}.js.

Copy-paste recipes

1. Grant a category in JavaScript

For example, on an “enable video” button that requires the preferences category.

Moelleux.acceptCategory('preferences');

2. Persist the state to your backend

Listen to the event and send the detail to your server. The consentId acts as an idempotent key.

document.addEventListener('moelleux:consent', function (e) {
  fetch('/mon-backend/consentement', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(e.detail) // {choices, consentId, policyVersion, timestamp}
  });
});

3. Gate custom code on consent

Initialize your code on load if consent already exists, and react to future changes.

Moelleux.ready(function (M) {
  if (M.hasConsent('analytics')) initMonAnalytics();
});
document.addEventListener('moelleux:consent', function (e) {
  if (e.detail.choices.analytics) initMonAnalytics();
});

4. Show / hide via CSS

With the cssClasses option enabled, you control display without a single line of JavaScript.

/* config bannière : cssClasses = true */
.mx-consent-no-analytics .analytics-widget { display: none; }
.mx-consent-marketing    .promo-banner     { display: block; }

Stability

The API is additive and versioned. No existing method is removed without a documented major version bump.