Introduction

The Enzuzo Cookie Banner provides additional capabilities that can be configured manually, giving full control to the behaviour of the website. One of the main features is the ability to automatically block and categorize third party scripts.

Enabling Auto Blocking

Setting up the cookie banner is the same as usual with the following requirements:

the cookie banner script should be in the <head> section of the HTML and that it should be placed before any scripts that you want to block. The cookie banner cannot block scripts that are run before the cookie banner itself.
the script attribute auto-blocking="true" is added to the script tag. Here is an example.
```
<script auto-blocking="true" src="https://app.enzuzo.com/apps/enzuzo/static/js/__enzuzo-cookiebar.js?uuid=c4b59d26-1d9c-11ed-bef4-6b8ef0dd69e3"></script>
```
all the scripts loaded after this point on will be blocked by default.

Categorizing Third-Party Scripts

For each script, you can define their category, description, and translations. The following is a list of attributes that can be defined for each script.

Attribute Name	Description
ez-type	The type - should always be "cb" for the cookie banner.
ez-cb-id	Script ID - can be anything unique
ez-cb-cat	The category of the script. Should be one of "functional", "marketing", "analytics", or "preferences". We may support additional categories in the future.
ez-cb-desc	The description for this script
ez-cb-desc-{{locale}}	Locale specific description, such as ez-cb-desc-fr for French.

Here are is an example of loading Google Analytics.

<script async ez-type="cb" ez-cb-id="ga" ez-cb-cat="analytics" ez-cb-desc="Google Analytics is a web analytics service offered by Google that tracks and reports website traffic" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic.

Running JS code on consent

You can configure the cookie banner to run custom JS code after a user takes a consent action, by adding a script before our cookie banner is loaded. The following script is an example of this feature:

<script>
  window.__enzuzo = window.__enzuzo ?? {}; 
  window.__enzuzo.callbacks = { 
     acceptAll: (c) => { console.log('acceptAll:', c); }, 
     acceptSelected: (c) => { console.log('acceptSelected:', c); },
     decline: (c) => { console.log('decline:', c); }, 
  } 
</script>

The c argument passed to each callback contains information about the categories consented to by the user, in the following structure:

{
  functional: boolean | undefined
  analytics: boolean | undefined
  preferences: boolean | undefined
  marketing: boolean | undefined
}

Custom button configurations based on banner mode

Using the following script, you will be able to configure the consent button options depending on the banner consent mode. The script must be included before the cookie banner embed code. You can define what buttons to hide based on which consent mode. The following script will hide the accept and decline buttons when the consent mode is set to opt-out or don't show.

<script> 
    window.__enzuzo = window.__enzuzo ?? {}; 
    window.__enzuzo.hideButtons = window.__enzuzo.hideButtons ?? {};
    window.__enzuzo.hideButtons = { accept: ['optout', 'dontshow'], decline: ['optout', 'dontshow'] }; 
</script>

Custom cookie preferences button

Adding the data-ez-show-preferences attribute to a DOM element will open the cookie preferences when that element is clicked.

<div class="btn btn-primary" ez-show-preferences>
  Show Preferences
</div>