Cookie Notice Banner using cookieconsent.js

This tutorial provides the steps to set up a cookie notice banner using cookieconsent.js on any website.

You can check the available demos on Osano Official.

Prerequisite:

None.

STEP 1

Download the cookieconsent.css and cookieconsent.js file and place it under the respective folder. We are using a modified version.

/css/cookieconsent.min.css
/js/cookieconsent.min.js

STEP 2

Enqueue the styles and scripts using the following code:

for HTML

<link rel="stylesheet" id="cookieconsent.min-css" href="css/cookieconsent.min.css" type="text/css" media="all" />
<script type='text/javascript' src='js/cookieconsent.min.js' id='cookieconsent.min-js'></script>

for Plugin

//* Load custom styles and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {

   // cookieconsent.min.css
   wp_enqueue_style( 'cookieconsent-style', plugin_dir_url( __FILE__ ) . '/css/cookieconsent.min.css' );

  // cookieconsent.min.js
  wp_enqueue_script( 'custom-script', plugin_dir_url( __FILE__ ) . '/js/cookieconsent.min.js', array('jquery'), '1.0.0', false );

  // init.js
  //wp_enqueue_script( 'init-script', plugin_dir_url( __FILE__ ) . '/js/init.js', array('jquery'), '1.0.0', true );
}

for WordPress

//* Load custom styles and scripts
add_action( 'wp_enqueue_scripts', 'load_custom_styles_scripts' );
function load_custom_styles_scripts() {

    // cookieconsent.min.css
    wp_enqueue_style( 'cookieconsent-style', get_stylesheet_directory_uri() . '/css/cookieconsent.min.css' );

    // cookieconsent.min.js
    wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/cookieconsent.min.js', array('jquery'), '1.0.0', false );
    
    // init.js
    //wp_enqueue_script( 'init-script', get_stylesheet_directory_uri() . '/js/init.js', array('jquery'), '1.0.0', true );
}

OR You can use a CDN for a quick test:

for HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.js"></script>

for WordPress

//* Add external style and scripts.
add_action( 'wp_enqueue_scripts', 'external_style_script', 20 );
function external_style_script() {
 
  //* cookieconsent
  wp_enqueue_style( 'cookieconsent-css', 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css', array(), '1.0.0', 'all' );
  wp_enqueue_script( 'cookieconsent-js', 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.js', array(), '1.0.0', false );

}

STEP 3

Init the cookieconsent script using the following code: You can customize it visually on the Osano site.

Here is the basic one, you can start from.

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#237afc"
    },
    "button": {
      "background": "#fff",
      "text": "#237afc"
    }
  },
  "theme": "classic",
  "position": "bottom-left"
});

OR with maximum options available.

window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#111111",
      "text": "#ffffff"
    },
    "button": {
      "background": "#ffffff",
      "text": "#111111"
    }
  },
  "theme": "classic",
  "position": "bottom-left",
  "type": "opt-out",
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Allow cookies",
    "deny": "Decline",
    "link": "Learn more",
    "href": "https://www.cookiesandyou.com"
  }
});

You will need to make additional changes when you give option to opt-out for cookies. You can check the example code. Here is the working script you can use to add Analytics.

You can init the script directly inline in HTML or can use the wp_footer function in WordPress.

//* init
add_action( 'wp_footer', 'init_script', 15 );
function init_script() {
?>
// paste your code here


<?php 
  
}

Make sure to close the code with <script> tag when used inline.

OR create a new init.js file under the /js/ folder and add the code excluding the <script> tag. Make sure HTML is matched according to the same.

Enqueue the file.

for HTML

<script type='text/javascript' src='js/init.js' id='init-js'></script>

for WordPress

Enqueue it using the code in STEP 2. Just add the extra line with the name and file path or delete the commented out // as per the code.

done.