Free Cookie Consent 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.
Important! This is version 3.0, the latest version is Cookie Consent 4.2
-
Load the Cookie Consent from TermsFeed domain.
<script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/3.0.0/cookie-consent.js" charset="UTF-8"></script> -
Append the config code.
-
Add the code after the
<body>tag or before the</body>tag on your web pages. Example:<script type="text/javascript" src="//www.termsfeed.com/public/cookie-consent/3.0.0/cookie-consent.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { cookieconsent.run({ "notice_banner_type": "headline", "cookies_policy_url": "http://www.termsfeed.com/", "consent_type": "express", "palette": "light", "website_name": "TermsFeed Cookie Consent", "language": "en", "change_preferences_selector": "#changePreferences" }); }); </script>
-
Copy the
cookie-consent.jsfromdist/folder. -
Append the config code.
-
Add the code after the
<body>tag or before the</body>tag on your web pages. Example:<script type="text/javascript" src="cookie-consent.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { cookieconsent.run({ "notice_banner_type": "headline", "cookies_policy_url": "http://www.termsfeed.com/", "consent_type": "express", "palette": "light", "website_name": "TermsFeed Cookie Consent", "language": "en", "change_preferences_selector": "#changePreferences" }); }); </script>
In order for the Cookie Consent tool to run correctly, you need to "tag" your JS scripts:
- Change
type="text/javascript"totype="text/plain". Iftype="text/javascript"is not available, addtype="text/plain". - On the same
<script>, add in the corresponding cookie level:cookie-consent="functionality".
Here's an example:
<!-- Login Cookies -->
<script type="text/plain" cookie-consent="strictly-necessary" src="/js/login-session.js"></script>
<!-- Google Analytics -->
<script type="text/plain" 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 below example includes the install + config code, the button to open Preferences Center and an example of JS script tagged.
<!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<script type="text/javascript" src="cookie-consent.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
cookieconsent.run({
"notice_banner_type": "headline",
"cookies_policy_url": "http://www.termsfeed.com/",
"consent_type": "express",
"palette": "light",
"website_name": "TermsFeed Cookie Consent",
"language": "en",
"change_preferences_selector": "#changePreferences"
});
});
</script>
<noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed</a></noscript>
<!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->
<!-- Below is the link that users can use to open Preferences Center to change their preferences. Do not modify the ID parameter. Place it where appropriate, style it as needed. -->
<button id="changePreferences">Change preferences</button>
<!-- Google Analytics -->
<script type="text/plain" 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 Credits Link must be kept in the HTML source code (see Example above) and inside the Preferences Center.
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:
.dark.cc_dialog button.cc_b_ok {
color: red !important;
}
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). |
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". |
notice_banner_type |
String | headline |
simple, headline, interstitial, standalone |
Type of notice banner design to apply. |
palette |
String | light |
light, dark |
Color palette to apply. |
language |
String | en |
See i18n/ folder |
Language for the text inside the notice banner and Preferences Center. |
change_preferences_selector |
String | #changePreferences |
The ID of the button/link to open the Preferences Center. | |
website_name |
String | The website name to appear in Preferences Center. | ||
cookies_policy_url |
String | Sets the URL to the Cookies Policy. It appears in the Preferences Center > More Information tab. | ||
demo |
Boolean | false |
true, false |
Demo mode will not save any cookies. |
debug |
Boolean | false |
true, false |
Debug mode will output Console message. |
Legal information is not legal advice, read the disclaimer.
The provided tool is informational purposes only and do not constitute legal advice.
The information provided here is not legal advice, does not constitute a lawyer referral service, and no attorney-client or confidential relationship is or will be formed by use of the tool.
Shield:
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
