Welcome to Cookie Consent

Free Cookie Consent Notice Banner to comply with GDPR and ePrivacy Directive.

By TermsFeed Privacy Policy Generator.

On this page:

  1. Build your Cookie Consent
  2. How to implement Cookie Consent
  3. How to tag your JavaScript scripts
  4. Cookie Consent levels and categories
  5. Cookie Consent screenshots
  6. Cookie Consent video tutorials
  7. Cookie Consent FAQs
  8. Cookie Consent documentation

Cookie Consent Solution

NEW! Try the new and advanced Cookie Consent solution: user consent log, geolocation detection (ie. show notice banner only when required) and more customization options. Try Privacy Consent today.

Step 1 Choose your compliance preference

Enter a name for the script (ie. Google Analytics), select the cookie consent level (ie. Tracking) and copy-paste the script code.

Step 4 Copy your Cookie Consent code

You're done. Copy your Cookie Consent code below.

Place the code right after <body>.

Preview Consent Bar

How to tag your JavaScript scripts

Tag any JavaScript <script> that you're using by changing type="text/javascript" to type="text/plain".

Then add the corresponding consent level for each tagged <script>. For example: data-cookie-consent="functionality".

That's it.

Here's an example from Google Analytics and a Login Session script that's loaded with some necessary cookies:


<!-- Login Cookies -->
<script type="text/plain" data-cookie-consent="strictly-necessary" src="/js/login-session.js"></script>

<!-- Google Analytics -->
<script type="text/plain" data-cookie-consent="tracking">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_PROPERTY_ID_GOES_HERE, 'auto');
ga('send', 'pageview');
</script>

The following levels are available in our free Cookie Consent solution. Tag your JavaScript using any of the following levels.


Strictly necessary

For example, account login related cookies. Strictly necessary cookies are loaded automatically and cannot be disabled by the user.

<script type="text/plain" data-cookie-consent="strictly-necessary"></script>

Functionality

For example, remember users language preferences or remembering various choices.

<script type="text/plain" data-cookie-consent="functionality"></script>

Tracking and Performance

For example, analytics such as Google Analytics.

<script type="text/plain" data-cookie-consent="tracking"></script>

Targeting and Advertising

For example, Google AdSense/AdWords remarketing.

<script type="text/plain" data-cookie-consent="targeting"></script>

Our free Cookie Consent can help you comply with GDPR and ePrivacy Directive. This guide will help you go through the 5 easy steps to implement our free Cookie Consent notice banner.


Step 1 on how to implement the Cookie Consent
Step 1
Choose your compliance preferences

Start building your Cookie Consent today. Choose the preferred compliance type: ePrivacy Directive or GDPR+ePrivacy Directive.

Step 2 on how to implement the Cookie Consent
Step 2
Customize your Cookie Consent

Customize your Cookie Consent with your website name, the preferred color palette and the default language.

Step 13 on how to implement the Cookie Consent
Step 3
Add your JavaScript scripts

Copy-paste your JavaScript scripts on our Cookie Consent builder. Or you can tag your JavaScripts according to our instructions.

Step 4 on how to implement the Cookie Consent
Step 4
Copy the generated Cookie Consent code

You're done. The Cookie Consent banner notice code has been generated. Copy it.

Step 5 on how to implement the Cookie Consent
Step 5
Add your Cookie Consent code on your website

Copy the generated Cookie Consent on your website webpages in the <body> section.


Example of Cookie Consent with ePrivacy Directive consent preference

Example of Cookie Consent with ePrivacy Directive consent preference.

Example of Cookie Consent with GDPR consent preference

Example of Cookie Consent with GDPR consent preference.

Example of Cookie Consent notice banner in a different color palette

Example of Cookie Consent notice banner in a different color palette.

Example of Cookie Consent notice banner in a different language

Example of Cookie Consent notice banner in a different language.

Example of Cookie Consent notice banner in a different style for the banner

Example of Cookie Consent notice banner in a different style for the banner.


Video thumbnail: How to add a Free Cookie Consent

Learn how to add a Free Cookie Consent Notice banner using our Free Cookie Consent tool.

Play video

Video thumbnail: How to add a Free Cookie Consent

Learn how to integrate Google Analytics with the Free Cookie Consent Notice Banner tool to get consent before loading the Google Analytics code.

Play video

Video thumbnail: How to add a Free Cookie Consent

Learn how to block scripts before user consent with Free Cookie Consent.

Play video

Video thumbnail: How to add a Free Cookie Consent

How to add a button to allow visitors to open the Cookie Preferences when using the Free Cookie Consent notice banner.

Play video


What is Cookie Consent?

Cookie Consent (cookieconsent.com) is a free cookies management solution by TermsFeed that you can integrate on your website that helps you comply with the EU Cookies Directive and GDPR.

Start building your Cookie Consent today.

Do I need Cookie Consent?

The general rule is this: if you use cookies on your website, you need Cookie Consent. For example, if you use Google Analytics, you need Cookie Consent. If you have use JavaScript code on your website that may store or retrieve cookies, you may need Cookie Consent.

Is Cookie Consent free?

Yes, Cookie Consent is 100% free.

How can I create a Cookie Consent banner notice?

Your Cookie Consent banner notice can be created by going through the builder steps above. At Step 1, choose your consent preference type. At Step 2, customize the banner notice by adding your website name and choosing a preferred language for the Cookie Consent.

How can I implement Cookie Consent?

Once you have generated your Cookie Consent banner notice, begin to organize all your JavaScripts by tagging them correctly using the available consent levels: strictly-necessary, functionality, tracking, targeting.

How can I edit the text from the Cookie Consent notice banner?

In the current version (4.1.0) the notice banner cannot be modified as we support multiple translations. Modifying the text in English means you'll have to modify the text in 15+ languages. We're working on a new version of the Cookie Consent that would allow you to modify the text. Stay tuned!

Does the Cookie Consent include consent log functionality?

Upon giving consent, a new cookie named cookie_consent_user_consent_token is created. It includes a random string that can be used to identify the consent given.

We do not provide consents storage! We suggest to try out our paid Cookie Consent solution, called Privacy Consent, that includes automatic geo-location functionality, consent log functionality and storage (with downloadable CSV files) and more features for GDPR, CCPA.

You can also pass your own identifier string (instead on relying on Cookie Consent to automatically generate it) by inserting a new parameter in the config code: user_consent_token. Example: "user_consent_token": "STRING_GOES_HERE".

How can I use the Cookie Consent across multiple subdomains?

You can integrate Cookie Consent to work across multiple subdomains of the same root domain by inserting the domain parameter in the config code.

Example: "domain": "thisismydomain.com"

Please make sure you enter the correct domain when using this parameter. Otherwise, the Cookie Consent will not work properly.

How can I load the Cookie Consent only for EU (Europe) visitors?

Currently, our free Cookie Consent version 4.1.0 does not include any geo-location functionality. We suggest to try out our paid Cookie Consent solution, called Privacy Consent, that includes automatic geo-location (ie. notice banner loaded only for EU users or if you're based in the EU).

My app is SPA (single-page application). How can I open the Preferences Center?

For single-page applications (SPAs) you can open the Preferences Center using the openPreferencesCenter() method.

Example: <button onclick="cookieconsent.openPreferencesCenter();">Open Preferences Center</button>

Why do I see weird characters in the Cookie Consent notice banner when using different languages?

You may see weird characters in the Cookie Consent notice banner if your HTML page does not have the meta charset tag added.

You can fix this by adding the charset="UTF-8" parameter:

  1. In the head section of your webpages add: <meta charset="utf-8" />
  2. Add the generated Cookie Consent code in the body section of your webpages
  3. Modify the first line of the generated code to add a new charset="UTF-8" parameter: <script type="text/javascript" charset="UTF-8" src="//.....

You should also make sure that your code/text editor saves your webpages in UTF-8 and your web server (Apache, nginx) sets the correct encoding.


Installation

  1. Generate the Cookie Consent build configuration code by going through the steps above - Start building your Cookie Consent today.
  2. Copy the generated code on your website right after the <body> tag or before the </body>.

Usage

In order for the Cookie Consent tool to run correctly, you need to "tag" your JS scripts:

  1. For any <script> you want to tag, change type="text/javascript" to type="text/plain". If type="text/javascript" is not available, add type="text/plain".

  2. On the same <script>, add in the corresponding cookie level. For example: data-cookie-consent="functionality".

Here's an example:

<!-- Login Cookies -->
<script type="text/plain" data-cookie-consent="strictly-necessary" src="/js/login-session.js"></script>

<!-- Google Analytics -->
<script type="text/plain" data-cookie-consent="tracking">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_PROPERTY_ID_GOES_HERE, 'auto');
ga('send', 'pageview');
</script>

Design

You can apply your own style for the Cookie Consent by writing your own CSS to overwrite the CSS of Cookie Consent.

Use Developer Tools > Inspect Element to identify the element you want to customize and style differently. Then write your own CSS rules to overwrite the style of the element. For example, if you'd like to make the title of the notice banner red then:

.termsfeed-com---nb .cc-nb-title {
  color: red !important;
}

Methods

The following methods are available for the Cookie Consent:

Name Description

cookieconsent.run();

The run() method initiates the Cookie Consent. It accepts the configuration options (see below).

cookieconsent.openPreferencesCenter();

The openPreferencesCenter() can be used to open the Preferences Center if the classic method (naming the ID of the button/link in the configuration options) is not available. For example, in single-page applications (SPAs).

Configuration options

The following configurations are available for the Cookie Consent that can be used with the cookieconsent.run() method:

Name Type Default Values Description

consent_type

String

express
  • express
  • implied

Type of consent to apply.

implied will automatically load all tagged JS scripts on page load without waiting for consent.

express will not load any tagged JS scripts (except strictly necessary) until the user clicks "I Agree".

palette

String

light
  • light
  • dark

Color palette to apply.

language

String

en

Please see builder steps above for all available languages.

Language for the text inside the notice banner and Preferences Center.

notice_banner_type

String

headline
  • simple
  • headline
  • interstitial
  • standalone

Type of notice banner design to apply. Please see builder steps above for a preview of these banner types.

notice_banner_reject_button_hide

Boolean

false
  • true
  • false

Hides the "I Reject" (I Decline) button in the notice banner.

notice_banner_insert_legal_urls

Boolean

false
  • true
  • false

Appends the legal URLs (Privacy Policy and/or Impressum) in the notice banner text.

notice_banner_append

String

afterbegin
  • afterbegin
  • beforeend

Location where to insert the Cookie Consent HTML elements.

preferences_center_close_button_hide

Boolean

false
  • true
  • false

Hides the close button (top right) in Preferences Center.

page_load_consent_levels

Array

 
  • ["strictly-necessary", "functionality", "tracking", "targeting"]

Categories of tagged scripts to load on page load regardless of consent_type.

By default, the configuration code will insert only strictly-necessary if your consent_type is express.

open_preferences_center_selector

String

#open_preferences_center

 

The ID of the button/link to open the Preferences Center.

page_refresh_confirmation_buttons

Boolean

false
  • true
  • false

Refreshes the page once the user clicks "I Agree", "I Reject" or "Save" button from Preference Center.

website_privacy_policy_url

String

 

 

Sets the URL to the Privacy Policy.

It appears in the Preferences Center > More Information tab.

It would appear in the notice banner text only if notice_banner_insert_legal_urls is true.

website_impressum_url

String

 

 

Sets the URL to the Impressum page.

It would appear in the notice banner text only if notice_banner_insert_legal_urls is true.

user_consent_token

String

 

 

By default, Cookie Consent will generate a user consent token that you can use to retrieve an identifiable consent given by a user. Use user_consent_token if you'd like to set your own token for consent given.

We suggest to try out our paid Cookie Consent solution, called Privacy Consent, that includes automatic geo-location functionality, consent log functionality and storage (with downloadable CSV files) and more features for GDPR, CCPA.

cookie_domain

String

 

 

Sets the domain when creating the cookies necessary for Cookie Consent to run properly. If cookie_domain is set, the Cookie Consent can run on subdomains.

Do not set cookie_domain if you'd like Cookie Consent to run separately and independenly on each subdomain you install it on.

cookie_duration

Integer

365

 

Sets the number of days when the cookies set by Cookie Consent expire.

Default is 365 days. Maximum value is 400 (capped by web browsers, see Chrome release M104 in Aug 2022).