Lightweight Cookie Consent Bar (PHP + JavaScript)

This lightweight cookie consent bar is perfect when you just want a simple cookie banner on your PHP site without loading huge third-party scripts or complicated configuration.

It shows a slim bar at the bottom of the page, remembers the visitor’s choice in a cookie, and then disappears on future page views. Everything is in one small PHP file with a bit of inline JavaScript and CSS.

Features

• Single PHP include you can drop into any page
• No external libraries or remote calls
• Uses a cookie to remember consent for a configurable number of days
• Optional “Learn more” link to your privacy or cookie policy
• Clean, minimal design you can restyle in seconds

1) Create cookie-consent.php

Save the following as cookie-consent.php in your site root (or any folder you like, just adjust the include path later).

<?php
// cookie-consent.php
// Lightweight Cookie Consent Bar (PHP + JavaScript)

// ── SETTINGS — EDIT THESE ─────────────────────────────────────────────
$cookieName   = 'vs_cookie_consent';  // name for the consent cookie
$cookieValue  = '1';                  // value to store once accepted
$cookieDays   = 180;                  // how many days to remember consent

$message     = 'We use cookies to improve your experience. By using this site, you accept cookies.';
$buttonLabel = 'Got it';
$linkText    = 'Learn more';
$linkHref    = '/privacy-policy.php'; // set your URL or leave empty for no link
// ──────────────────────────────────────────────────────────────────────

// If cookie already set, do nothing
if (isset($_COOKIE[$cookieName]) && $_COOKIE[$cookieName] === $cookieValue) {
    return;
}
?>
<style>
/* Cookie bar layout */
#vs-cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  background: rgba(0, 0, 0, 0.9);
  color: #f9f9f9;
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.4;
  transition: opacity 0.3s ease-out;
}

#vs-cookie-bar .vs-cookie-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#vs-cookie-bar .vs-cookie-text {
  flex: 1 1 auto;
}

#vs-cookie-bar .vs-cookie-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#vs-cookie-bar .vs-cookie-link {
  color: #9ad1ff;
  text-decoration: underline;
  font-size: 12px;
}

#vs-cookie-bar .vs-cookie-link:hover {
  color: #c5e5ff;
}

#vs-cookie-bar .vs-cookie-button {
  border: 0;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  background: #4caf50;
  color: #fff;
  font-weight: 600;
}

#vs-cookie-bar .vs-cookie-button:hover {
  background: #3d8b40;
}

/* Small screens: stack nicely */
@media (max-width: 600px) {
  #vs-cookie-bar .vs-cookie-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

<div id="vs-cookie-bar">
  <div class="vs-cookie-inner">
    <span class="vs-cookie-text">
      <?php echo htmlspecialchars($message, ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <div class="vs-cookie-actions">
      <?php if (!empty($linkHref)): ?>
        <a href="<?php echo htmlspecialchars($linkHref, ENT_QUOTES, 'UTF-8'); ?>"
           class="vs-cookie-link"
           target="_blank" rel="noopener">
          <?php echo htmlspecialchars($linkText, ENT_QUOTES, 'UTF-8'); ?>
        </a>
      <?php endif; ?>
      <button type="button"
              class="vs-cookie-button"
              id="vs-cookie-accept">
        <?php echo htmlspecialchars($buttonLabel, ENT_QUOTES, 'UTF-8'); ?>
      </button>
    </div>
  </div>
</div>

<script>
(function () {
  var bar = document.getElementById('vs-cookie-bar');
  var btn = document.getElementById('vs-cookie-accept');
  if (!bar || !btn) return;

  var cookieName  = <?php echo json_encode($cookieName); ?>;
  var cookieValue = <?php echo json_encode($cookieValue); ?>;
  var cookieDays  = <?php echo (int)$cookieDays; ?>;

  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var d = new Date();
      d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + d.toUTCString();
    }
    document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
  }

  btn.addEventListener('click', function () {
    setCookie(cookieName, cookieValue, cookieDays);
    bar.style.opacity = "0";
    setTimeout(function () {
      if (bar && bar.parentNode) {
        bar.parentNode.removeChild(bar);
      }
    }, 400);
  });
})();
</script>

2) Include it on your pages

Once cookie-consent.php is uploaded, include it near the top of your page output (ideally just inside <body>) on any page where you want the cookie bar to appear:

<?php include $_SERVER['DOCUMENT_ROOT'] . '/cookie-consent.php'; ?>

You can place this include in a global header file or template so the cookie consent bar automatically appears across your whole site.

3) Customize the text, colors and policy link

Inside cookie-consent.php you can tweak a few lines to match your site:

• $message – the full cookie message shown in the bar
• $buttonLabel – the text on the accept button
• $linkText and $linkHref – for your privacy or cookie policy
• $cookieDays – how long to remember a visitor’s consent

If you prefer a different color scheme, just adjust the CSS in the <style> block: background color, button color, font size, and so on.

4) Notes and disclaimers

This script gives you a lightweight cookie consent bar, but it’s your responsibility to make sure your use of cookies and tracking scripts complies with any laws or policies that apply to you (GDPR, ePrivacy, CCPA, etc.).

Always keep backups and test on a staging or low-traffic page before rolling it out across an entire site.