For developers

Scripts

Load scripts based on CookieConsent settings
As soon as a visitor saves the CookieConsent settings or has already made a choice, scripts with the relevant settings are loaded.

Available data-cookieconsent values: analytics, marketing, functional, necessary.
Note that the script type is “text/plain”.

<script type="text/plain" data-cookieconsent="marketing" src="script.js"></script>

Iframes

Load iframes based on CookieConsent settings
As soon as a visitor saves the CookieConsent settings or has already made a choice, iframes with the relevant settings are loaded.

Available data-cookieconsent values: analytics, marketing, functional, necessary.
Note that “src” has been replaced with “data-src”.

<iframe data-src="iframe.html" data-cookieconsent="marketing"></iframe>

CSS classes

Show or hide elements based on CookieConsent settings
As soon as a visitor saves the CookieConsent settings or has already made a choice, elements with the relevant CSS classes are shown or hidden.

<div class="cookieconsent-optin">
   This element is displayed when at least one choice is selected
</div>

<div class="cookieconsent-optout">
   This element is displayed when no selection is selected
</div>

<div class="cookieconsent-optin-marketing">
   This element is displayed when marketing is selected
</div>

<div class="cookieconsent-optout-marketing">
   This element is displayed when marketing is not selected
</div>

<div class="cookieconsent-optin-analytics">
   This element is displayed when analytics is selected
</div>

<div class="cookieconsent-optout-analytics">
   This element is displayed when analytics is not selected
</div>

Events

There are 2 available events:

  • CookieConsentInitialize (always with initialization)
  • CookieConsentSaved (when saving)
<script type="text/javascript">
   document.addEventListener('CookieConsentInitialize', function(event) {
      console.log('init', event);
   }, false);

   document.addEventListener('CookieConsentSaved', function(event) {
      console.log('save', event);
   }, false);
</script>

Configure options using Google Tag Manager

You can configure certain options by adding query parameters to the source file. These options override the default value entered in the manager. The following options are available:

hidden
Hide or show the cookie consent. Possible values are ‘true’ or ‘false’.

backdrop
Hide or show the backdrop. Possible values are ‘true’ of ‘false’.

backdrop_color
Determine the color of the backdrop. Value must be a hexidecimal color code (for example #000000).

position
Determines the position of the cookie consent. Possible values are ‘top’, ‘center’ of ‘bottom’.

functional
Hide or show the option to activate ‘Functional cookies’.

analytics
Hide or show the option to activate ‘Statistics cookies’.

marketing
Hide or show the option to activate ‘Marketing cookies’.

google_consent_mode
Activate or deactivate Google Consent Mode.

<script type="text/javascript" src="uuid.js&hidden=false&backdrop=false&position=center&marketing=false&analytics=true&google_consent_mode=true"></script>

WordPress plugin

Download our official WordPress plugin with the link below:
https://wordpress.org/plugins/cookieconsent-io/

After installation of the plugin you can use the following short codes for adding functionality to your WordPress website:

SHOW LEGAL TEXT:
[cookie-consent-io-description]

SHOW DISCOVERED COOKIE TABLE
[cookie-consent-io-table]

SHOW COOKIE SETTINGS (LINK)
[cookie-consent-io-settings type=”link”]Show CookieConsent.io settings[/cookie-consent-io-settings]

SHOW COOKIE SETTINGS (BUTTON)
[cookie-consent-io-settings type=”button”]Show CookieConsent.io settings[/cookie-consent-io-settings]

FILTERS
The following filters are available:

render_cookie_consent_io_description
render_cookie_consent_io_table
render_cookie_consent_io_settings

Magento 2 Plugin

Step 1

Please add the GTM container script to the head of the Magento 2 design.  Please select Content > Design > Configuration from the Magento 2 admin and edit the active design configuration. Select HTML head and insert the Google Tag Manager installation script and press Save Configuration.

Change design configuration

Step 2
Select the privacy page and add the legal text, cookie table and cookie settings link. You can add these features by selecting the Custom Variables option.

Insert custom variable

Step 3
Please select System > Cache management and make sure you clear the Layouts, Blocks HTML output and Page Cache.

Clear cache

Step 4

View the privacy page and check if all the components are shown.

Privacy policy