Code for a browser cookie banner

Here is a basic example of code for a browser cookie banner that notifies users that your website uses cookies and asks for their consent:

HTML code: 

<div id="cookie-banner">
  <p>This website uses cookies to ensure you get the best experience on our website. By continuing to use this site, you consent to our use of cookies. For more information, please see our <a href="#">Cookie Policy</a>.</p>
  <button id="accept-cookies">I accept</button>


CSS code: 

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  border-top: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  font-size: 14px;

#accept-cookies {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;

JavaScript code:

const cookieBanner = document.querySelector('#cookie-banner');
const acceptCookiesBtn = document.querySelector('#accept-cookies');

function hideCookieBanner() { = 'none';
  localStorage.setItem('cookieAccepted', true);

if (localStorage.getItem('cookieAccepted') === 'true') { = 'none';
} else {
  acceptCookiesBtn.addEventListener('click', hideCookieBanner);

This code creates a banner at the bottom of the page that informs the user about the use of cookies and provides a button to accept them. When the user clicks the button, the banner is hidden and a cookie is stored in the user's browser to remember their consent. If the user has already accepted cookies, the banner is not displayed.

Note that this is just a basic example, and you may need to customize the code to fit the specific needs of your website and comply with applicable privacy regulations.

Related Articles

- All From ChatGPT