Press "Enter" to skip to content

Simple Cross-Browser Cookie Consent Plugin In Vanilla JavaScript | cookieconsent

Cookie Consent is a lightweight, gdpr compliant cookie consent plugin written in plain javascript. An “all in one” solution that also allows you to write your own cookie policy inside without the need for a dedicated page.

cookie consent javascript library, cross domain cookie consent, cookie consent popup javascript, symfony cookie consent, cookie consent code html, cookie consent static website

Key features

  • Lightweight
  • Cross-browser support (IE8+)
  • Standalone (no external dependecies needed)
  • GDPR compliant
  • Support for multi language
  • WAI-ARIA compliant
  • Allows you to define different cookie categories with opt in/out toggle
  • Allows you to define custom cookie tables if you want to clarify the cookies you use

How to make use of it:

1. Insert the JavaScript file cookieconsent.js into the HTML doc.

<script src="./dist/cookieconsent.js"></script>

2. Initialize the library and show the cookie consent popup on the web page load.{
  "cc_autorun" : true,
  "cc_website_name" : "Web Code Flow",
  "cc_website_url" : "",       
  "cc_theme_css" : "./src/cookieconsent.css" // path to theme CSS

3. Customize the cookie consent popup with the next options.{

  // parent contianer
  cc_container : "body", 

  // auto language detection
  cc_auto_language: false,

  // or set language here
  cc_current_lang : "en",               
  cc_default_lang : "en",

  // auto display on page load
  cc_autorun: false, 

  // delay in ms
  cc_delay: 20,

  // website name
  cc_website_name : null,   

  // website URL
  cc_website_url: null,

  // enable console log
  cc_enable_verbose: true, 
  // 30 days
  cc_cookie_expires : 30, 
  // cookie name
  cc_cookie_name: "cc_cookie",

  // theme css
  cc_theme_css: "/public/assets/css/cookieconsent.css"

4. API strategies.

// show the cookie consent popup;

// hide the cookie consent popup

// clear cookies

All available options

Below is a table that sums up all of the available options (must be passed to the .run() method).

autorunbooleantrueIf enabled, show the cookie consent as soon as possible (otherwise you need to manually call the .show() method)
delaynumber0Number of milliseconds before showing the consent-modal
cookie_expirationnumber182Number of days before the cookie expires (182 days = 6 months)
cookie_pathstring“/”The path where the cookie will be set
cookie_domainstringlocation.hostnameSpecify your domain (which will be grabbed by default) or a subdomain
cookie_same_sitestring“Lax”SameSite attribute
theme_cssstringSpecify the path to the .css file
force_consentbooleanfalseEnable if you want to block page navigation until user action (check faq for a proper implementation)
current_langstringSpecify one of the languages you have defined (can also be dynamic): 'en''de' …
auto_languagebooleanfalseAutomatically grab the language based on the user’s browser language, if language is not defined => use specified current_lang
autoclear_cookiesbooleanfalseEnable if you want to automatically delete cookies when the user opts out of a specific category inside cookie settings
page_scriptsbooleanfalseEnable if you want to easily manage existing <script> tags. Check manage third-party scripts
remove_cookie_tablesbooleanfalseEnable if you want to remove the HTML cookie tables (and still want to make use of autoclear_cookies)
gui_optionsobjectCustomization option which allows choosing layout, position, and transition. Check layout options & customization
onAcceptfunctionMethod runs once either when:
1. The moment the cookie consent is accepted
2. After each page load (if cookie consent has already been accepted)
onChangefunctionMethod run whenever preferences are modified (and only if cookie consent has already been accepted)
languagesobjectCheck below for configuration

Stylish Multilingual Cookie Consent Popup, cookieconsent2, gdpr cookie consent

See Demo And Download

Official Website(orestbida): Click Here

This superior jQuery/javascript plugin is developed by orestbida. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.