NEW
Upgrade to TermsFeed Privacy Consent

Privacy Consent adapts the consent banner to the location of each visitor and honors Global Privacy Control (GPC) and “Do Not Sell or Share”. Privacy Consent holds back embedded content and records every answer in a consent log.

Choose your consent tool

TermsFeed offers 2 consent tools: the free Cookie Consent banner you build on this page, and TermsFeed Privacy Consent, a managed consent platform. Privacy Consent adapts the consent banner to the location of each visitor and records every answer in a consent log.

Free cookie consent banner

Cookie Consent

Free · self-configured JavaScript snippet

Cookie Consent is a free JavaScript snippet that shows a cookie consent banner on your website. Cookie Consent stores the choice of the visitor in cookies and loads the scripts you tagged for each accepted category.

Cookie Consent suits small websites that use a single consent model for every visitor and tag their own scripts.

Managed consent platform

Privacy Consent

Premium plan · from $10/mo · managed in TermsFeed

Privacy Consent is a consent management platform (CMP) that you manage in the TermsFeed app. You paste a single script tag, and every change to vendors, appearance, and settings goes live without an edit to your website.

Privacy Consent suits businesses with visitors in the EU, the UK, or US states with privacy laws, and businesses that need proof of consent.

Cookie ConsentPrivacy Consent
Setup and changes
You edit the settings in the snippet and paste the code again after every change.
You paste a single script tag once, and every change you make in the TermsFeed app goes live on your website.
Consent model
You pick a single model for every visitor: express consent (opt-in) or implied consent (opt-out).
Privacy Consent asks for opt-in consent in the EU, the European Economic Area (EEA), the UK, Switzerland, and certain US states and Canadian provinces, and uses opt-out elsewhere.
Global Privacy Control
Cookie Consent ignores the Global Privacy Control (GPC) signal.
Privacy Consent honors GPC in every region, overrides an earlier consent, and records the opt-out in the consent log.
“Do Not Sell or Share” opt-out
Cookie Consent has no opt-out for the sale or sharing of personal information.
Privacy Consent shows US visitors a “Do Not Sell or Share” section, a link in the consent banner, and a floating button.
What visitors choose
Visitors accept or decline 4 categories: strictly-necessary, functionality, tracking, and targeting.
Visitors accept or decline 5 vendor categories and each vendor, with its country, purposes, and Privacy Policy.
Controlling scripts
You tag each script on your pages with the data-cookie-consent attribute.
Privacy Consent runs the vendor tags of a vendor only after the visitor accepts that vendor.
Embedded content
Cookie Consent has no blocking for embedded videos, maps, or widgets.
Embed banners hold back videos, maps, and widgets until the visitor accepts the vendor.
Proof of consent
Cookie Consent keeps no record, and the choice stays only in the cookies of the visitor.
Privacy Consent records every answer with a consent ID in the consent log, and paid plans add CSV export.
Asking again
Cookie Consent asks again once the consent cookie expires, after 365 days (12 months) by default.
Privacy Consent asks again on a re-consent date you set and after you add a vendor.
Look and feel
Cookie Consent offers 4 consent banner layouts in a light or dark theme.
Privacy Consent shows a consent banner and a Preferences Center in light, dark, or brand colors.
Languages
Cookie Consent supports 36 languages and shows a language picker to the visitor.
Privacy Consent supports 21 languages and picks the language from the browser and the location of the visitor.
Choose Cookie Consent for a Free Consent Banner

Cookie Consent fits a website that needs a free consent banner with a single consent model for every visitor. You tag the scripts yourself, and Cookie Consent keeps no record of who consented.

Build your free Cookie Consent
Choose Privacy Consent to Prove Consent

Privacy Consent fits a business with visitors in the EU, the UK, or US states with privacy laws. Privacy Consent honors GPC and “Do Not Sell or Share”, and the consent log keeps proof of every answer.

Try Privacy Consent
Privacy Consent · How it works

Privacy Consent runs each third-party tool only after the visitor allows it. You add each tool once in the TermsFeed app, and Privacy Consent holds back videos, maps, and widgets until the visitor accepts.

01

Add Vendors in the Vendors Manager

Every third-party tool on your website is a vendor, from analytics to chat. Visitors see each vendor under its vendor category and decide which vendors run.

1
Name itEnter the vendor name and a link to its Privacy Policy, which visitors see in the Preferences Center.
2
Categorize itPick 1 of 5 vendor categories: Essential, Functionality, Analytics, Advertising, or Marketing.
3
Paste its codePaste the snippet the vendor gives you as a vendor tag, which runs only after consent.
4
SaveSave the vendor, and the change goes live with no edit to your website.
02

Hold Embedded Content Until the Visitor Accepts

Privacy Consent blocks videos, maps, and other embeds until the visitor agrees. Nothing loads from the vendor before the visitor accepts.

1 · Add the vendor

Add YouTube as a vendor once, then mark where each video sits on your page.

2 · Before consent

An embed banner takes the place of the video, and nothing loads from YouTube.

3 · After consent

A click on I Agree or Accept this vendor loads the video in place, with no page reload.

Every embed banner answer is saved and logged. Privacy Consent saves the answer at once and records it in the consent log.
Visitors accept a single vendor or every vendor. Accept this vendor allows only YouTube, and I Agree allows every vendor category.
Embed banners work for any embed. Privacy Consent holds back videos, maps, images, and widgets from any vendor you add.

Implement the Cookie Consent banner in 5 steps, from choosing your consent type to pasting the code on your website. The ePrivacy Directive and the General Data Protection Regulation (GDPR) require consent before non-essential cookies load, and Cookie Consent collects that consent.


Step 1 on how to implement Cookie Consent
Step 1

Choose the consent type for your website: ePrivacy Directive or GDPR + ePrivacy Directive. Start with the Cookie Consent builder.

Step 2 on how to implement Cookie Consent
Step 2

Add your website name, then pick a consent banner layout, a color palette, and a default language.

Step 3 on how to implement Cookie Consent
Step 3

Paste your JavaScript scripts into the Cookie Consent builder. To tag the scripts on your pages instead, follow How to Tag Your JavaScript Scripts.

Step 4 on how to implement Cookie Consent
Step 4

The builder generates the Cookie Consent code. Copy the code from Step 4 of the builder.

Step 5 on how to implement Cookie Consent
Step 5

Paste the generated Cookie Consent code into the <body> section of every page on your website.


Cookie Consent banner with the ePrivacy Directive consent type

The Cookie Consent banner uses the ePrivacy Directive consent type.

Cookie Consent banner with the GDPR + ePrivacy Directive consent type

The Cookie Consent banner uses the GDPR + ePrivacy Directive consent type.

Cookie Consent banner in the dark color palette

The Cookie Consent banner uses the dark color palette.

Cookie Consent banner in another language

The Cookie Consent banner shows its text in another language.

Cookie Consent banner in another layout

The Cookie Consent banner uses another layout.


Video thumbnail: How to add a Free Cookie Consent

Watch how to add the free Cookie Consent banner to your website.

Play video

Video thumbnail: How to integrate Google Consent Mode v2

Watch how to integrate Google Consent Mode v2 with Cookie Consent.

Play video

Video thumbnail: How to block scripts until the visitor consents

Watch how to block scripts until the visitor consents, with Cookie Consent.

Play video

Video thumbnail: How to add a button that opens the Preferences Center

Watch how to add a button that opens the Cookie Consent Preferences Center for visitors.

Play video

How to Tag Your JavaScript Scripts

Tag each script by changing type="text/javascript" to type="text/plain" and adding a data-cookie-consent attribute with its category. The browser skips a script with type="text/plain", and Cookie Consent runs the script once the visitor accepts its category.

Set the attribute to 1 of the 4 categories, for example data-cookie-consent="functionality".

The example below tags a login session script as strictly-necessary and a Google Analytics script as tracking.


<!-- 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>

Integrate Google Consent Mode v2 with Cookie Consent in 3 steps: deny consent by default, load Google Analytics, and update consent from a Cookie Consent callback. Google Consent Mode v2 tells Google tags (Google Analytics 4, Google Ads, Google Tag Manager) which storage the visitor allows, and Google tags adjust what they store.

Cookie Consent sends the choice of the visitor to Google through the user_consent_saved callback, which runs after every choice and on every later page load.

Here is how to set it up. Firstly, set the default consent states to denied before any Google tag loads.

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){
	dataLayer.push(arguments);
}
gtag('consent', 'default', {
	'ad_storage': 'denied',
	'ad_user_data': 'denied',
	'ad_personalization': 'denied',
	'analytics_storage': 'denied'
});
</script>

Secondly, load Google Analytics on your page without a Cookie Consent category. Google Analytics follows the denied consent states until the visitor accepts.

<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}

	gtag('js', new Date());
	gtag('config', 'TAG_ID');
</script>

Thirdly, add a callbacks parameter to your Cookie Consent config code. The user_consent_saved callback updates the consent states from the choice of the visitor.

"callbacks": {
	// Runs when the visitor answers (reason 'choice')
	// and on every later page load with the saved answer (reason 'page_load')
	"user_consent_saved": (details, reason) => {
		const analytics_status = (details['tracking'] === true) ? 'granted' : 'denied';
		const ads_status = (details['targeting'] === true) ? 'granted' : 'denied';

		gtag('consent', 'update', {
			'analytics_storage': analytics_status,
			'ad_storage': ads_status,
			'ad_user_data': ads_status,
			'ad_personalization': ads_status
		});
	}
}

The screenshot below shows the complete code after the 3 steps.

Final code of the Google Consent Mode v2 integration with Cookie Consent

Integrate Microsoft UET Consent Mode with Cookie Consent in 3 steps: load the UET tag, deny consent by default, and update consent from a Cookie Consent callback. Microsoft Universal Event Tracking (UET) Consent Mode tells Microsoft Advertising whether the visitor allows ad storage.

Cookie Consent sends the choice of the visitor to Microsoft through the user_consent_saved callback, which runs after every choice and on every later page load.

Here is how to set it up. Firstly, load the Microsoft UET script.

<script>
(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"TAG_ID", enableAutoSpaTracking: true};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");
</script>

Secondly, set the default consent state to denied.

<script>
window.uetq = window.uetq || [];
window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
});
</script>

Thirdly, add a callbacks parameter to your Cookie Consent config code. The user_consent_saved callback updates the ad_storage state from the choice of the visitor.

"callbacks": {
	// Runs when the visitor answers (reason 'choice')
	// and on every later page load with the saved answer (reason 'page_load')
	"user_consent_saved": (details, reason) => {
		window.uetq = window.uetq || [];
		window.uetq.push('consent', 'update', {
			'ad_storage': (details['targeting'] === true) ? 'granted' : 'denied'
		});
	}
}

The screenshot below shows the complete code after the 3 steps.

Final code of Microsoft UET Consent integration with Cookie Consent


What Is Cookie Consent?

TermsFeed Free Cookie Consent is a free cookie consent banner that asks visitors for consent before non-essential cookies load. Cookie Consent helps you meet the consent rules of the ePrivacy Directive and the General Data Protection Regulation (GDPR) on the website where you install it. Build your consent banner with the Cookie Consent builder.

Do I Need Cookie Consent?

Yes, you need Cookie Consent or another cookie consent banner if your website sets non-essential cookies for visitors in the EU or the UK. Firstly, the ePrivacy Directive and the UK Privacy and Electronic Communications Regulations (PECR) require consent before a website stores non-essential cookies on the device of a visitor. Secondly, analytics tools (Google Analytics, Hotjar, Microsoft Clarity) set non-essential cookies. Thirdly, advertising tools (Google Ads, Meta Pixel, Microsoft Advertising) set cookies that track visitors across websites.

Strictly necessary cookies, such as the login session cookie, need no consent. Tag those scripts as strictly-necessary, and Cookie Consent loads them on every page.

Is Cookie Consent Free?

Yes, Cookie Consent is free. Firstly, the builder and the generated code cost nothing. Secondly, Cookie Consent needs no account and no subscription. Thirdly, Cookie Consent sets no limit on page views, visitors, or websites.

What Is the Difference Between Cookie Consent and Privacy Consent?

Cookie Consent is a free consent banner that you configure in code, and TermsFeed Privacy Consent is a consent management platform (CMP) that you manage in the TermsFeed app. Cookie Consent applies a single consent model to every visitor, runs the scripts you tag, and stores the choice only in the cookies of the visitor.

Privacy Consent asks for consent based on the location of the visitor and honors Global Privacy Control (GPC) and “Do Not Sell or Share”. Privacy Consent holds back embedded content and keeps a consent log of every answer. Compare both tools in Cookie Consent vs. Privacy Consent, or try Privacy Consent.

How Can I Create a Cookie Consent Banner?

You can create a Cookie Consent banner with the 4 steps of the builder on this page. Step 1 sets the consent type. Step 2 sets your website name, the consent banner layout, the color palette, and the language. Step 3 adds your scripts, and Step 4 gives you the code to paste on your website. Start with the Cookie Consent builder.

How Can I Implement Cookie Consent?

You can implement Cookie Consent by pasting the generated code on every page and tagging your scripts with a category. Tag each script with type="text/plain" and a data-cookie-consent attribute set to strictly-necessary, functionality, tracking, or targeting. Copy a complete example from How to Tag Your JavaScript Scripts.

Does Cookie Consent Support Google Consent Mode v2?

Yes, Cookie Consent supports Google Consent Mode v2 through its callbacks. Firstly, you set every Google consent state to denied before Google tags load. Secondly, Google Analytics loads and follows the denied states until the visitor answers. Thirdly, the user_consent_saved callback of Cookie Consent updates the consent states from the choice of the visitor. Copy the full code from How to Integrate Google Consent Mode v2.

How Can I Edit the Text of the Cookie Consent Banner?

You can change which purposes the Cookie Consent banner lists with the notice_banner_purposes_levels parameter in the config code. The parameter sets which categories the consent banner text names as purposes and which tabs the Preferences Center shows. Set the parameter to an array of category IDs, for example ["strictly-necessary", "tracking"].

Does Cookie Consent Include a Consent Log?

No, Cookie Consent does not include a consent log. Firstly, Cookie Consent stores the choice only in cookies on the device of the visitor. Secondly, Cookie Consent sends no consent record to TermsFeed or to your server. Thirdly, the cookie_consent_user_consent_token cookie holds a random string that identifies the consent, and you store that string yourself to keep a record.

Set your own identifier with the user_consent_token parameter in the config code, for example "user_consent_token": "STRING_GOES_HERE".

TermsFeed Privacy Consent keeps a consent log of every answer with the country of the visitor, and paid plans export the log as CSV files. Keep proof of consent with Privacy Consent.

How Can I Use Cookie Consent Across Multiple Subdomains?

You can use Cookie Consent across the subdomains of a root domain with the cookie_domain parameter in the config code. Set the parameter to the root domain with a leading dot, for example "cookie_domain": ".example.com". Enter the exact root domain of your website, because the browser rejects the consent cookies for a domain that does not match, and Cookie Consent then asks again on every page.

How Can I Load Cookie Consent Only for EU (Europe) Visitors?

Cookie Consent has no location detection, so the Cookie Consent banner appears to every visitor. TermsFeed Privacy Consent detects the location of each visitor and asks for opt-in consent in the EU, the European Economic Area (EEA), the UK, and Switzerland. Privacy Consent asks every visitor for opt-in consent when your company is based in one of these regions.

Visitors in other regions see no consent banner, and Privacy Consent runs your vendors until the visitor opts out. Show the consent banner by location with Privacy Consent.

How Can I Open the Preferences Center in a Single-Page Application (SPA)?

You can open the Preferences Center in a single-page application (SPA) with the cookieconsent.openPreferencesCenter() method. Call the method from any button or link on your page, for example <button onclick="cookieconsent.openPreferencesCenter();">Open Preferences Center</button>.

Why Do I See Weird Characters in the Cookie Consent Banner in Other Languages?

Weird characters appear in the Cookie Consent banner because your HTML page has no meta charset tag. The browser then reads the translated text of the consent banner in the wrong character encoding, as the screenshot below shows.

Weird characters in the Cookie Consent banner

Here is how to fix it. Firstly, add <meta charset="utf-8" /> in the head section of your pages. Secondly, add the generated Cookie Consent code in the body section. Thirdly, add charset="UTF-8" to the first line of the generated code, for example <script type="text/javascript" charset="UTF-8" src="//......

Save your pages in UTF-8 in your code editor, and confirm that your web server (Apache, nginx) sends the UTF-8 encoding.


This page covers the main Cookie Consent options. Read every Cookie Consent option and guide in the TermsFeed Cookie Consent documentation.

How to Install Cookie Consent

Install Cookie Consent in 2 steps. Firstly, generate the Cookie Consent code with the builder on this page. Secondly, paste the generated code right after the opening <body> tag or right before the closing </body> tag. Start with the Cookie Consent builder.

How to Make Cookie Consent Control Your Scripts

Cookie Consent controls only the scripts you tag, so tag every script that sets non-essential cookies. Here is how to tag a script. Firstly, change type="text/javascript" to type="text/plain" on the <script> tag, or add type="text/plain" to a script with no type. Secondly, add the category to the same <script> tag, for example data-cookie-consent="functionality".

The example below tags a login session script and a Google Analytics script.

<!-- 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>

How to Style the Cookie Consent Banner With CSS

Style the Cookie Consent banner with your own CSS rules that override the built-in Cookie Consent CSS. Open the developer tools of your browser, inspect the element you want to change, and write a CSS rule for its class.

Add !important to each declaration, because the built-in CSS rule otherwise takes precedence. The rule below turns the title of the consent banner red.

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

Cookie Consent JavaScript Methods

Cookie Consent has 2 JavaScript methods: run() and openPreferencesCenter().

Name Description

cookieconsent.run();

The run() method starts Cookie Consent and takes the options listed in Cookie Consent Configuration Options.

cookieconsent.openPreferencesCenter();

The openPreferencesCenter() method opens the Preferences Center from your own code. Use the method in single-page applications (SPAs) and on pages where a button ID in open_preferences_center_selector does not work.

Cookie Consent Configuration Options

Pass these configuration options to the cookieconsent.run() method.

Name Type Default Values Description

consent_type

String

express

  • express
  • implied

consent_type sets the type of consent.

implied loads every tagged script on page load, before the visitor answers.

express loads only strictly-necessary scripts until the visitor clicks "I agree".

palette

String

light

  • light
  • dark

palette sets the color palette of the consent banner and the Preferences Center.

language

String

en

Pick 1 of the 36 languages in Step 2 of the builder.

language sets the language of the consent banner and the Preferences Center.

notice_banner_type

String

headline

  • simple
  • headline
  • interstitial
  • standalone

notice_banner_type sets the layout of the consent banner. Preview each layout in Step 2 of the builder.

notice_banner_reject_button_hide

Boolean

false

  • true
  • false

notice_banner_reject_button_hide hides the "I decline" button in the consent banner.

notice_banner_insert_legal_urls

Boolean

false

  • true
  • false

notice_banner_insert_legal_urls adds the links to your Privacy Policy and your Impressum page to the consent banner text.

notice_banner_append

String

afterbegin

  • afterbegin
  • beforeend

notice_banner_append sets where Cookie Consent inserts its HTML elements: at the start of <body> (afterbegin) or at the end of <body> (beforeend).

notice_banner_purposes_levels

Array

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

notice_banner_purposes_levels sets the categories that the consent banner text lists as purposes and that the Preferences Center shows as tabs.

preferences_center_close_button_hide

Boolean

false

  • true
  • false

preferences_center_close_button_hide hides the close button in the top right corner of the Preferences Center.

page_load_consent_levels

Array

 

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

page_load_consent_levels sets the categories of tagged scripts that load on page load, whatever the consent_type.

The builder adds only strictly-necessary to this option for the express consent type.

open_preferences_center_selector

String

#open_preferences_center

 

open_preferences_center_selector sets the CSS selector of the button or link that opens the Preferences Center.

page_refresh_confirmation_buttons

Boolean

false

  • true
  • false

page_refresh_confirmation_buttons reloads the page after the visitor clicks "I agree", "I decline", or "Save my preferences".

website_privacy_policy_url

String

 

 

website_privacy_policy_url sets the URL of your Privacy Policy.

The Preferences Center shows the link in the "More information" tab.

The consent banner text shows the link only if notice_banner_insert_legal_urls is true.

website_impressum_url

String

 

 

website_impressum_url sets the URL of your Impressum page.

The consent banner text shows the link only if notice_banner_insert_legal_urls is true.

user_consent_token

String

 

 

user_consent_token sets your own identifier for the consent of a visitor. Cookie Consent generates a random token by default and stores the token in the cookie_consent_user_consent_token cookie.

Keep a consent log of every answer with TermsFeed Privacy Consent.

cookie_domain

String

 

 

cookie_domain sets the domain of the cookies that Cookie Consent creates. Set the option to share a single consent choice across the subdomains of a root domain.

Leave cookie_domain unset to keep a separate consent choice on each subdomain.

cookie_duration

Integer

365

 

cookie_duration sets the number of days before the Cookie Consent cookies expire.

The default is 365 days (12 months), and the maximum is 400 days (about 13 months), the cookie lifetime cap that Chrome applies since Chrome 104 in August 2022.

callbacks

 

You can use callbacks to integrate additional logic with Cookie Consent.

Supported events are:

  • notice_banner_loaded (when the notice banner has loaded)
  • i_agree_button_clicked (when user has clicked on "I Agree" button)
  • i_decline_button_clicked (when user has clicked on "I Decline" button)
  • change_my_preferences_button_clicked (when user has clicked on "Change Preferences" button)
  • scripts_specific_loaded (when scripts from a specific category have loaded)
  • user_consent_saved (when user consent preference is updated)

Example of callbacks code:


You can use function names instead of code to fire your own functions:

"callbacks": {
    "scripts_specific_loaded": "my_function_for_scripts_specific_loaded"
}

Callbacks are fired only if tagged scripts are found on page. Otherwise, to fire callbacks when consent category is accepted without any tagged scripts on page, add callbacks_force as true.

callbacks_force

Boolean

false

  • true
  • false

callbacks_force fires callbacks on pages with no tagged scripts, once the visitor accepts a category.