For developers

Installation

You can add the CookieConsent.io consent popup by adding the script below between the <head> html tags. Replace the 000000000000-0000-0000-0000-000000000000 with the ID provided to you in the support e-mail.

<script type="text/javascript" src="https://edge.cookieconsent.io/prod/js/000000000000-0000-0000-0000-000000000000.js?hidden=false&backdrop=false&position=center&marketing=false&analytics=true&google_consent_mode=true"></script>

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’.

force
Always 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’.

font
Determine the font family of the consent. Font family must be made available in the browser (for example Verdana).

button1Color
Determine the color of the ‘Allow all’ button. Value must be a hexidecimal color code (for example #1ab530).

button2Color
Determine the color of the ‘Cookie settings’ button. Value must be a hexidecimal color code (for example #b1b3b1).

button3Color
Determine the color of the ‘Save settings’ button. Value must be a hexidecimal color code (for example #000000).

pillColor
Determine the color of the ‘Pill’ buttons when enabled. Value must be a hexidecimal color code (for example #000000).

consentHeight
Determine the consent height in pixels. Value must be an integer.

hiddenHorizontalRule
Hide the horizontal rule. Possible values are ‘true’ of ‘false’.

headerSize
Determine the font size of the header in pixels. Value must be an integer.

subheaderSize
Determine the font size of the subheader in pixels. Value must be an integer.

bodySize
Determine the font size of the body text in pixels. Value must be an integer.

alwaysActiveSize
Determine the font size of the ‘Always active label’ in pixels. Value must be an integer.

transformTitle
Transform the text formatting of the title. Possible values are none,  capitalize,  lowercase or uppercase.

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’.

functionalDefaultChecked
Default activate the ‘Functional cookies’ option.

analyticsDefaultChecked
Default activate the ‘Analytics cookies’ option.

marketingDefaultChecked
Default activate the ‘Marketing cookies’ option.

google_consent_mode
Activate or deactivate Google Consent Mode.

Installation Google Tag Manager

GTM installation - Step 1

To install our cookie consent popup on your website, you can easily add it as a tag within Google Tag Manager. To do this, click on the tags button and press “New”.

Installation GTM - Step 2

Give your tag a name (e.g. Cookieconsent.io – All pages). Then press the “Explore More Tag Types in the Community Template Gallery” button.

GTM Installation - Step 3

GTM Installation - Step 4

Then search for “cookieconsent.io”. Select CookieConsent.io and click “Add to Workspace”.

GTM Installation - Step 5

Then click the “Add” button.

GTM Installation - Step 6

In the next screen you will see all the settings of the tag. At CookieConsent.io ID, enter the ID that we have sent you by e-mail. Next, at Triggers, select the option “All pages”. That way the popup is shown on every page.

You can then configure your cookie consent popup. 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’ or ‘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’ or ‘bottom’.

font
Determine the font family of the consent. Font family must be made available in the browser (for example Verdana).

button1Color
Determine the color of the ‘Allow all’ button. Value must be a hexidecimal color code (for example #1ab530).

button2Color
Determine the color of the ‘Cookie settings’ button. Value must be a hexidecimal color code (for example #b1b3b1).

button3Color
Determine the color of the ‘Save settings’ button. Value must be a hexidecimal color code (for example #000000).

pillColor
Determine the color of the ‘Pill’ buttons when enabled. Value must be a hexidecimal color code (for example #000000).

consentHeight
Determine the consent height in pixels. Value must be an integer.

hiddenHorizontalRule
Hide the horizontal rule. Possible values are ‘true’ of ‘false’.

headerSize
Determine the font size of the header in pixels. Value must be an integer.

subheaderSize
Determine the font size of the subheader in pixels. Value must be an integer.

bodySize
Determine the font size of the body text in pixels. Value must be an integer.

alwaysActiveSize
Determine the font size of the ‘Always active label’ in pixels. Value must be an integer.

transformTitle
Transform the text formatting of the title. Possible values are none,  capitalize,  lowercase or uppercase.

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’.

functionalDefaultChecked
Default activate the ‘Functional cookies’ option.

analyticsDefaultChecked
Default activate the ‘Analytics cookies’ option.

marketingDefaultChecked
Default activate the ‘Marketing cookies’ option.

google_consent_mode
Activate or deactivate Google Consent Mode.

Once you are done, hit the Save button. In this way, the consent is saved and will be displayed on your website after publication of the workspace.

Google Tag Manager Datalayer

The current status can also be read via the DataLayer. The following variables are available within the data layer:

cookie_consent.necessary
cookie_consent.analytics
cookie_consent.functional
cookie_consent.marketing

Google Tag Manager Datalayer values

To read out a variable, select the menu option Variables in Google Tag Manager. Press new. Give the variable a logical name for example. CookieConsent.io – Marketing DataLayer variable.

Google Tag Manager - Datalayer Variable

Then choose at Variable Type for Data Layer variable. Enter at the value e.g. cookie_consent.marketing. Then press Save.

GTM create trigger

Next, within Google Tag Manager, click the Triggers button and then the “New” button.

Google Tag Manager Consent Trigger

Enter a title for the event (e.g. CookieConsent.io – Marketing consent). Choose as trigger type “Page view” and indicate that the trigger is only fired on some pages. At event choose the CookieConsent.io – Marketing DataLayer variable. Specify that the value must be equal to true.

Then press the save button. Then click on the Tags button and choose new tag.

Google Tag Manager - Custom html

As an example we make a custom HTML tag. This tag will show the message “Fired when marketing consent is given” as soon as you have agreed to place marketing cookies. At Triggering, choose the trigger “CookieConsent.io – Marketing consent”.

Then press Save. You have now created an HTML tag that will be displayed as soon as the visitor agrees to the placement of Marketing cookies.

Google Tag Manager Events

GTM create trigger

You can use events within Google Tag Manager to activate various types of tags. To do this, click on the Triggers button within Google Tag Manager and then on the ‘New’ know.

GTM - create marketing trigger

Enter a title for the event (e.g. CookieConsent.io – Marketing Event). Choose as trigger type ‘Custom event’. Enter ‘cookieconsent_marketing’ at Event name. This trigger may be fired at all custom events.

GTM - Create tag

Then click on the Tags button and choose new tag.

GTM marketing tag

As an example we make a custom HTML tag. This tag will display the message ‘Fired when marketing consent is given’ as soon as one has agreed to the placement of marketing cookies. At Triggering, choose the trigger ‘CookieConsent.io – Marketing Event’.

Then press Save. You have now created an HTML tag that will be displayed as soon as the visitor agrees to the placement of Marketing cookies.

You can create triggers for the following events in a similar way:

  • CookieConsentInitialize (always with initialization)
  • CookieConsentSaved (when saving)
  • CookieConsentAllowAllButtonClicked(allow all button clicked)
  • CookieConsentCookieSettingsButtonClicked (settings button clicked)
  • CookieConsentWhatAreCookiesButtonClicked (what are cookies button clicked)
  • CookieConsentSaveSettingsButtonClicked (save settings button clicked)
  • cookieconsent_necessary (necessary cookies may be processed)
  • cookieconsent_statistics (analytics cookies may be processed)
  • cookieconsent_functional (functional cookies may be processed)
  • cookieconsent_marketing (marketing cookies may be processed)

Google Tag Manager Import Basic Structure

A basic template is available to quickly import the above variables, triggers and tags into your container. You can download this container template here.

Google Tag Manager - Admin

You can then integrate this template into your own container. To do this, go to ‘Admin’ in Google Tag Manager and click on the Import Container button.

Import container

Select the container file you just downloaded. Choose the option merge and select the option ‘Rename conflicting tags, triggers and variables. Then click on confirm to implement all changes.

Change layout

To change the layout, you can add the CSS below to your style sheets. These are of course examples and can be adjusted as you see fit.

/* Change paragraph font size */
.cookie-consent-io-cookie-bar p {
  font-size: 12px !important;
}

/* Change button font size */
.cookie-consent-io-cookie-bar button {
   font-size: 12px !important;
}

/* Selection label font size */
.cookie-consent-io-option .infotext {
   font-size: 12px !important;
}

/* Change all titles */
.cookie-consent-io-cookie-bar h3 {
   font-size: 14px !important;
}

/* Main title */
.cookie-consent-io-cookie-bar h3.cookie-consent-io-title {
   font-size: 18px !important;
}

/* Change the background to blue */
#cookie-consent-shadow-bg {
   background-color: rgba(105,105,105,0.9) !important;
}

/* No background */
#cookie-consent-shadow-bg {
   background: transparent !important;
}

/* Add a logo on top of the window */
.cookie-consent-io-primary-logo, .cookie-consent-io-secondary-logo, .cookie-consent-io-tertiary-logo {
   width: 157px;
   height: 44px;
   background: url('https://edge.cookieconsent.io/prod/images/powered-by.png');
   background-size: contain;
   margin: 0 0 20px 0;
}

/* Change accept button to a blue color */
.cookie-consent-approve-all {
   background-color: #1a0dab !important;
}

/* Change cookie settings button to a green color */
.cookie-consent-cookie-settings {
   background-color: #228B22 !important;
}

/* Change more information to a yellow color */
.cookie-more-information-button {
   background-color: #FFFF00 !important;
   color: #000 !important;
}

/* Save settings in a blue color */
.cookie-consent-save-settings {
   background-color: #1a0dab !important;
}

/* Blue sliders */
.cookie-consent-io-slider {
   background-color: #1a0dab !important;
}

/* Grey pill in slider */
.cookie-consent-io-slider:before {
   background-color: grey !important;
}

/* Change size of center popup */
#cookie-consent-cookie-bar-center {
   width: 600px !important;
   height: 500px !important;
}

/* Change height op top popup */
#cookie-consent-cookie-bar-top {
   height: 400px !important;
}

/* Change height of bottom popup */
#cookie-consent-cookie-bar-bottom {
   height: 400px !important;
}

/* Change cookie table color */
#cookie-io-table th {
   background-color: black !important;
}

/* Change cookie table row color */
#cookie-io-table tr:nth-child(even) {
   background-color: #f2f2f2;
}

Javascript events

There are 6 available events that you can listen to via javascript. That way, you can take into account the form of consent given in your own scripts:

  • CookieConsentInitialize (always with initialization)
  • CookieConsentSaved (when saving)
  • CookieConsentAllowAllButtonClicked(allow all button clicked)
  • CookieConsentCookieSettingsButtonClicked (settings button clicked)
  • CookieConsentWhatAreCookiesButtonClicked (what are cookies button clicked)
  • CookieConsentSaveSettingsButtonClicked (save settings button clicked)
  • cookieconsent_necessary (necessary cookies may be processed)
  • cookieconsent_statistics (analytics cookies may be processed)
  • cookieconsent_functional (functional cookies may be processed)
  • cookieconsent_marketing (marketing cookies may be processed)
<script type="text/javascript">
   document.addEventListener('CookieConsentInitialize', function(event) {
      console.log('init', event);
   }, false);

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

   document.addEventListener('CookieConsentAllowAllButtonClicked', function(event) {
      console.log('Cookie consent allow all', event);
   }, false);

   document.addEventListener('CookieConsentCookieSettingsButtonClicked', function(event) {
      console.log('Cookie settings button clicked', event);
   }, false);

   document.addEventListener('CookieConsentWhatAreCookiesButtonClicked', function(event) {
      console.log('What are cookies button clicked', event);
   }, false);

   document.addEventListener('CookieConsentSaveSettingsButtonClicked', function(event) {
      console.log('Save settings button clicked', event);
   }, false);

   document.addEventListener('cookieconsent_necessary', function(event) {
      console.log('cookieconsent_necessary', event);
   }, false);

   document.addEventListener('cookieconsent_statistics', function(event) {
      console.log('cookieconsent_statistics', event);
   }, false);

   document.addEventListener('cookieconsent_functional', function(event) {
      console.log('cookieconsent_functional', event);
   }, false);

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

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>

You can embed YouTube video after consent with the code snippet below:

<iframe data-src="https://www.youtube.com/embed/Hp_Eg8NMfT0" data-cookieconsent="marketing"></iframe>
<p>Please <a href="javascript:cookieConsent.showCookieConsentSettings();">accept marketing-cookies</a> to watch this video.
<a href="javascript:cookieConsent.showCookieConsentSettings();">Change your consent</a>
</p>

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>

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

Download our free Magento 2 plugin with the link below:
https://marketplace.magento.com/abovo-cookie-consent-io.html

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

Wix integrations

Wix - Copy GTM ID

Cookieconsent.io can be integrated into your Wix website through Google Tag Manager. To integrate it all, you only need your Google Tag Manager ID. You can copy this ID from the Google Tag Manager Workspace overview in the top right corner.

Wix - Marketing integrations

Then choose “Marketing integrations” in your Wix dashboard. And click the connect button at the Google Tag Manager option.

WIX insert GTM id

Enter your Google Tag Manager ID and click the Save button.

Track opt-in ratios in Google Analytics

If you use Google Tag Manager you can easily analyze the opt-in ratios within Google Analytics. To start, create the following trigger within Google Tag Manager:

Google Analytics Cookie consent Marketing event

Repeat this process for the following events:

cookieconsent_necessary
cookieconsent_statistics
cookieconsent_functional
cookieconsent_marketing

Then create the following tag for each event above:

Google Tag Manager CookieConsent.io marketing tag

Once the container is published, you will see all opt-in events coming into Google Analytics.
To do this, click on the Behavior > Events > Overview option.

Google Analytics Cookie consent Marketing event

Facebook Server2Server import basic structure

A basic template is available to quickly import the above variables, triggers and tags into your container. You can download this container template here.

Google Tag Manager - Admin

You can then integrate this template into your own container. To do this, go to ‘Admin’ in Google Tag Manager and click on the Import Container button.

Import container

Select the container file you just downloaded. Choose the option merge and select the option ‘Rename conflicting tags, triggers and variables. Then click on confirm to implement all changes.