Foresite Design Logo - Responsive Website Design

Admin - 5 june 2023

Foresite Design Logo - Responsive Website Design

Bootstrap 5 GDPR Cookie Consent Message Popup with jQuery:
A Step-by-Step Tutorial

In today's digital world, privacy and data protection are of utmost importance.
To comply with GDPR (General Data Protection Regulation) and other privacy regulations, it's essential to inform your website visitors about your cookie usage and obtain their consent.
One effective way to do this is by creating a GDPR cookie consent message popup on your website using Bootstrap 5 and jQuery.
In this tutorial, we'll walk you through the process step by step, and we'll show you all the code needed to create and style the popup.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
Bootstrap 5 installed in your project.
jQuery library included in your project.

Step 1: Setup HTML Structure
Let's begin by setting up the HTML structure for our GDPR cookie consent message popup.
Create an HTML file and add the following code: 

<!DOCTYPE html>

            <html lang="en">

            <head>

                <meta charset="UTF-8">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Your Website Title</title>

                <!-- Include Bootstrap CSS -->

                <link rel="stylesheet" href="path/to/bootstrap.css">

                <!-- Include your custom CSS styles -->

                <link rel="stylesheet" href="styles.css">

            </head>

            <body>

                <!-- Your website content goes here -->

                <!-- GDPR Cookie Consent Popup -->

                <div id="cookieConsent" class="alert alert-info cookiealert" role="alert">

                    <div class="cookie-container">

                        <span class="cookie-title">Cookies & Privacy</span>

                        <p>This website uses cookies to ensure you get the best experience on our website. <a href="privacy-policy.html" target="_blank">Learn more</a></p>

                    </div>

                    <div class="cookie-buttons">

                        <button class="btn btn-primary btn-sm acceptcookies">Accept</button>

                    </div>

                </div>

                <!-- Include jQuery and Bootstrap JS -->

                <script src="path/to/jquery.js"></script>

                <script src="path/to/bootstrap.js"></script>

                <!-- Include your custom JavaScript -->

                <script src="script.js"></script>

            </body>

            </html>

In this code, we've created a simple HTML structure for the GDPR cookie consent popup within the <div id="cookieConsent"> element.

Step 2: Styling with CSS
Now, let's style the GDPR cookie consent popup. Create a CSS file (e.g., styles.css) and add the following styles: 

/* styles.css */


            .cookiealert {

                position: fixed;

                bottom: 0;

                width: 100%;

                background-color: #333;

                color: #fff;

                z-index: 999;

            }

            .cookie-container {

                display: flex;

                justify-content: space-between;

                align-items: center;

                padding: 10px;

            }

            .cookie-title {

                font-weight: bold;

            }

            .cookie-buttons {

                padding: 10px;

            }

            .acceptcookies {

                background-color: #007bff;

                border: none;

                color: #fff;

            }

            .acceptcookies:hover {

                background-color: #0056b3;

            }

This CSS code styles the popup container, title, and buttons to make it visually appealing.

Step 3: JavaScript Functionality
Next, let's add JavaScript functionality to show and hide the cookie consent popup. Create a JavaScript file (e.g., script.js) and add the following code: 

// script.js


            $(document).ready(function () {

                if (localStorage.getItem("cookieConsent") === null) {

                    $("#cookieConsent").fadeIn(200);

                }

                $(".acceptcookies").click(function () {

                    localStorage.setItem("cookieConsent", "true");

                    $("#cookieConsent").fadeOut(200);

                });

            });

This JavaScript code checks if the user has previously accepted the cookie consent by checking the localStorage.
If not, it shows the popup.
When the user clicks the "Accept" button, it sets a flag in localStorage and hides the popup.

Step 4: Testing
Now that you've set up the HTML, CSS, and JavaScript, it's time to test your GDPR cookie consent popup.
Open your HTML file in a web browser, and you should see the popup displayed at the bottom of the page.
After clicking the "Accept" button, the popup should disappear, and the consent will be stored in localStorage.

Conclusion

Creating a GDPR cookie consent message popup with Bootstrap 5 and jQuery is a crucial step in ensuring your website complies with privacy regulations.
In this tutorial, we've provided you with the HTML, CSS, and JavaScript code to create and style the popup.
Remember to customize the content and styles to match your website's design and privacy policy.

By following these steps, you can enhance the privacy and user experience on your website while staying compliant with GDPR and other data protection laws.

Previous page