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=""></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.

   (function ($) {

Advance Configuration Options for Cookie Bubble

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

Option Description, Default, Type

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

   cookieMaxAge: 30,

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.

   messageText: "Your custom message.",

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

   messageTextColor: "#313131",

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.

   messageFontSize: "16px",

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

   buttonText:"I understand",

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

   buttonColor: "#e41b17",

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

   buttonFontSize: "18px",

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

   iconVisibility: true,

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

   iconColor: "#e41b17",

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

   cookiePolicyButtonText: "Read our cookies policy",

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

  cookiePolicyButtonTextColor: "#313131", 

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

   cookiePolicyButtonUrl: "/cookie-policy.html",

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

   cookiePolicyButtonTarget: "_self",

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

   boxAppearDelay: 1500,

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’

   boxPosition: "bottom-right",

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.