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: January 19, 2024
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",

2 thoughts on “Show GDPR Cookie Consent Message with jQuery”

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link