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="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.
$.cookieBubble({
messageText: "Your custom message.",
});
|
messageTextColor |
Define the text color of message. Default: “#000”, Type: String.
$.cookieBubble({
messageTextColor: "#313131",
});
|
messageFontSize |
Define the font size for the message text. Default: “18px”, Type: 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.
$.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.
$.cookieBubble({
boxPosition: "bottom-right",
});
|
Similar Code Snippets:
- Internet Speed Test Using JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.
Hi is there a way to call the popup with a button click? =)
Hi
Yes, you can call the popup on a button click. To do so, initialize the plugin in the click function.
$('button').on('click', function(){ $.cookieBubble(); });