Cloudflare Docs
Zaraz
Cloudflare Docs
Zaraz
GitHub icon
Visit Zaraz on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Zaraz
  3. Consent management
  4. Consent API

Consent API

​​ Background

The Consent API allows you to programmatically control all aspects of the Consent Management program. This includes managing the modal, the consent status, and obtaining information about your configured purposes.

Using the Consent API, you can integrate Zaraz Consent preferences with an external Consent Management Platform, customize your consent modal, or restrict consent management to users in specific regions.

​​ Events

It can be useful to know when the Consent API is fully loaded on the page so that code interacting with its methods and properties is not called prematurely.


document.addEventListener("zarazConsentAPIReady", () => {
  // do things with the Consent API

});

​​ Properties

The following are properties of the zaraz.consent object.

  • modal boolean

    • Get or set the current visibility status of the consent modal dialog.

  • purposes object read-only

    • An object containing all configured purposes, with their ID, name, description, and order.

  • APIReady boolean read-only

    • Indicates whether the Consent API is currently available on the page.

​​ Methods

​​ Get


zaraz.consent.get(purposeId);
  • get(purposeId) : boolean | undefined

Get the current consent status for a purpose using the purpose ID.

  • true: The consent was granted.
  • false: The consent was not granted.
  • undefined: The purpose does not exist.

​​ Parameters

  • purposeId string

    • The ID representing the Purpose.

​​ Set


zaraz.consent.set(consentPreferences);
  • set(consentPreferences) : undefined

Set the consent status for some purposes using the purpose ID.

​​ Parameters

  • consentPreferences object

    • a { purposeId: boolean } object describing the purposes you want to set and their respective consent status.

​​ Get All


zaraz.consent.getAll();
  • getAll() : { purposeId: boolean }

Returns an object with the consent status of all purposes.

​​ Set All


zaraz.consent.setAll(consentStatus);
  • setAll(consentStatus) : undefined

Set the consent status for all purposes at once.

​​ Parameters

  • consentStatus boolean

    • Indicates whether the consent was granted or not.

​​ Get All Checkboxes


zaraz.consent.getAllCheckboxes();
  • getAllCheckboxes() : { purposeId: boolean }

Returns an object with the checkbox status of all purposes.

​​ Set Checkboxes


zaraz.consent.setCheckboxes(checkboxesStatus);
  • setCheckboxes(checkboxesStatus) : undefined

Set the consent status for some purposes using the purpose ID.

​​ Parameters

  • checkboxesStatus object

    • a { purposeId: boolean } object describing the checkboxes you want to set and their respective checked status.

​​ Set All Checkboxes


zaraz.consent.setAllCheckboxes(checkboxStatus);
  • setAllCheckboxes(checkboxStatus) : undefined

Set the checkboxStatus status for all purposes in the consent modal at once.

​​ Parameters

  • checkboxStatus boolean

    • Indicates whether the purposes should be marked as checked or not.

​​ Send queued events


zaraz.consent.sendQueuedEvents();
  • sendQueuedEvents() : undefined

If some Pageview-based events were not sent due to a lack of consent, they can be sent using this method after consent was granted.

​​ Examples

You can combine multiple features of Zaraz to effectively disable Consent Management for some visitors. For example, if you would like to use it only for visitors from the EU, you can disable the automatic showing of the consent modal and add a Custom HTML tool with the following script:


<script>
document.addEventListener("zarazConsentAPIReady", () => {
  if ({{system.device.location.isEUCountry}} === 1) {
    zaraz.consent.modal = true
  } else { 
    zaraz.consent.setAll(true)
    zaraz.consent.sendQueuedEvents()
  }

});



</script>

By letting this Custom HTML tool to run without consent requirements, the modal will appear to all EU consent, while for other visitors consent will be automatically granted. The {{ system.device.location.isEUCountry }} property will be 1 if the visitor is from an EU country and 0 otherwise. You can use any other property or variable to customize the Consent Management behavior in a similar manner, such as {{ system.device.location.country }} to restrict consent checks based on country code.