Cài đặt hiển thị thanh thông báo Cookie Bar cho Website

Điểm mạnh của đoạn mã này là thông báo chỉ hiển thị duy nhất một lần. Khi người dùng nhấn “Đồng ý“, thanh thông báo sẽ tự động ẩn đi và không xuất hiện lại khi họ chuyển sang các trang khác, từ đó không gây khó chịu cho trải nghiệm người dùng.

Để thêm thanh cookie cố định vào website, bạn chỉ cần chèn phần mã HTML và JavaScript bên dưới vào phần footer. Phần CSS có thể thêm trực tiếp trong mục Giao diện > Tùy biến > CSS. Nếu chưa rõ cách thêm CSS, bạn có thể tham khảo bài viết hướng dẫn tại đây.

Code HTML

<section class="cookie-bar">
    <div class="cookie-notice container">
        <p class="cookie-para">Trang web của chúng tôi sử dụng cookie để cải thiện và cá nhân hóa trải nghiệm của bạn, đồng thời hiển thị quảng cáo (nếu có). Trang web của chúng tôi cũng có thể bao gồm cookie của các bên thứ ba như Google Adsense, Google Analytics, YouTube. Bằng cách sử dụng trang web này, bạn đồng ý với việc sử dụng cookie. Chúng tôi đã cập nhật Chính sách quyền riêng tư, vui lòng nhấp vào nút bên cạnh để kiểm tra Chính sách quyền riêng tư của chúng tôi.</p>
        <a href="javascript:;" class="cookie-btn">Ok</a>
        <a href="#" class="cookie-btn secondary">Chính sách bảo mật</a>
    </div>
</section>

Code JS cho vào website

<script>
jQuery(document).ready(function($) {
    // Function to read a cookie
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    // Function to create a cookie
    function createCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    // Show or hide the cookie bar based on the cookie
    if (readCookie("cookie_accepted") == "1") {
        $(".cookie-bar").hide();
    } else {
        $(".cookie-bar").show();
        $('body').addClass('cookie-space');
    }

    // Handle the cookie bar button click
    $('.cookie-btn').click(function() {
        $('body').removeClass('cookie-space');
        $('.cookie-bar').fadeOut();
        createCookie("cookie_accepted", 1, 365);
    });

    // Additional functions (optional)
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    jQuery(document).ready(function($) {
        var advMedium = getParameterByName('advm');
        if (advMedium != null) {
            $('input[name=advm]').val(advMedium);
            createCookie('advm', advMedium, 1);
        } else {
            advMedium = readCookie('advm');
            $('input[name=advm]').val(advMedium);
        }
        var nodeCount = document.getElementsByName('ft').length;
        for (var count = 0; count < nodeCount; count++) {
            document.getElementsByName('ft')[count].value = window.location.href;
        }
    });
});
</script>

Code CSS

.cookie-bar{ position: fixed; bottom: 0px; padding:10px 15px; width: 100%; display: none; z-index: 15; background-color:black; font-family: "Poppins", sans-serif; }
.cookie-para { color: white; font-size: 12px; font-weight: normal; display: inline-block;margin-bottom: 8px;display: block;
}

.cookie-space { padding-bottom: 45px; }
.cookie-btn{ font-size:14px; color: #ffffff; background: red; padding: 2px 15px; border-radius: 4px; 
  display: inline-block; }
.cookie-btn.secondary {color:#ffffff; background: #008000;}  
  
@media (max-width: 767px) {
  .cookie-bar{ padding:10px 15px 40px 15px; }
}

Ngoài code trên, nếu bạn sử dụng mã nguồn WordPress thì có thể sử dụng 1 số plugin nếu cần, từ khoá để tìm đó là Cookie Bar plugin.

Chúc bạn thành công !