Show GDPR Cookie Consent Message with jQuery

The Cookie Bubble is an open source plugin for jQuery to show GDPR cookie consent message to your website users. It creates modal popup to the left or right bottom corner of the webpage to show cookies agreement with EU laws.

The plugin can be highly customize with CSS & with its available options. You can also use your custom message in popup box.

Plugin Overview

Plugin: Cookie Bubble
Author: João Pereira
Licence: MIT Licence
Published: June 7, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 101 KB

How to Make GDPR Cookie Consent Message Popup

1. To getting started with Cookie Bubble, first of all load the jQuery and cookie bubble plugin’s CSS and JavaScript file into your webpage.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Cookie Bubble CSS -->
<link rel="stylesheet" href="css/cookieBubble.min.css">

<!-- Cookie Bubble Js -->
<script src="js/cookieBubble.min.js"></script>

Note: You don’t need to build any HTML structure for modal popup. The plugin will create everything dynamically.

2. Initialize the plugin with the following script to show GDPR cookie consent message popup.

<script>
   (function ($) {
      $.cookieBubble();
   })(jQuery);
</script>

Advance Configuration Options for Cookie Bubble

The following are some advance configuration options to create / customize “cookie bubble”.

Option Description, Default, Type
cookieMaxAge

The maximum age of cookie. Default: 30, Type: Number.

$.cookieBubble({
   cookieMaxAge: 30,
});
messageText

This option define the custom message for cookie consent. Default: “We use cookies to personalize your experience.
By continuing to visit this website you agree to our use of cookies.”, Type: String.

$.cookieBubble({
   messageText: "Your custom message.",
});
messageTextColor

Define the text color of message. Default: “#000”, Type: String.
Available Option: Any HTML color in HEX or RGB between quotation.

$.cookieBubble({
   messageTextColor: "#313131",
});
messageFontSize

Define the font size for the message text. Default: “18px”, Type: String.
Available Option: Any font size value (in px, em or rem) between string.

$.cookieBubble({
   messageFontSize: "16px",
});
buttonText

This option is useful to set the cutom text for ok button. Default: “Got it”, Type: String.

$.cookieBubble({
   buttonText:"I understand",
});
buttonColor

Define the color for button. Default: “#00a4ff”, Type: String.

$.cookieBubble({
   buttonColor: "#e41b17",
});
buttonFontSize

Font size for button. Default: “18px”, Type: String.

$.cookieBubble({
   buttonFontSize: "18px",
});
iconVisibility

Decide weather to show cookies icon or not. Default: true, Type: Boolean.
Available Option: true or flase (true = show icon, false = hide icon).

$.cookieBubble({
   iconVisibility: true,
});
iconColor

It define the color for icon. Default: “#00a4ff”, Type: String.

$.cookieBubble({
   iconColor: "#e41b17",
});
cookiePolicyButtonText

Text for cookie policy button / link. Default: “Read Our Cookie Policy”, Type: String.

$.cookieBubble({
   cookiePolicyButtonText: "Read our cookies policy",
});
cookiePolicyButtonTextColor

Define the color for cookie policy button text. Default: “#000”, Type: String.

$.cookieBubble({
  cookiePolicyButtonTextColor: "#313131", 
});
cookiePolicyButtonUrl

The URL for cookie policy page. Default: “https://allaboutcookies.org”, Type: String / URL

$.cookieBubble({
   cookiePolicyButtonUrl: "/cookie-policy.html",
});
cookiePolicyButtonTarget

The value of target attribute for cookie policy page link. Default: “_blank”, Type: String.

$.cookieBubble({
   cookiePolicyButtonTarget: "_self",
});
boxAppearDelay

The time interval in milliseconds after that the cookie modal appear. Deafult: 1000, Type: Number.

$.cookieBubble({
   boxAppearDelay: 1500,
});
boxPosition

Define the position for cookie popup modal. Default: “bottom-left”, Type: String.

Available Options: ‘bottom-left’, ‘bottom-center’, ‘bottom-right’, ‘top-left’, ‘top-center’, or ‘top-right’

$.cookieBubble({
   boxPosition: "bottom-right",
});