I made a 1 KB alternative to Cookie Notice WordPress Plugin

Cookie

Recently one of the members of our Facebook Group asked this:

So which one is the fastest cookie notice plugin?

I couldn’t find a good one. Most of the cookie consent WordPress plugins will slow down your site. They’re bloated with too many features and unwanted CSS and JavaScript.

So I built one, a code snippet for cookie notice in WordPress without a plugin!

  • Less than 1 KB in size (~500 bytes gzipped)
  • No CSS or JavaScript files (everything inlined)
  • No jQuery dependency
  • No database queries needed
  • Responsive
  • Fully customizable

Here is how it looks:

On mobile:

Easily customize to match your theme:

Code

<p id="cookie-notice">This website uses cookies to ensure you get the best experience on our website<br><button onclick="acceptCookie();">Got it!</button></p>

<style>#cookie-notice{color:#fff;font-family:inherit;background:#596cd5;padding:20px;position:fixed;bottom:10px;left:10px;width:100%;max-width:300px;box-shadow:0 10px 20px rgba(0,0,0,.2);border-radius:5px;margin:0px;visibility:hidden;z-index:1000000;box-sizing:border-box}#cookie-notice button{color:inherit;background:#3842c7;border:0;padding:10px;margin-top:10px;width:100%;cursor:pointer}@media only screen and (max-width:600px){#cookie-notice{max-width:100%;bottom:0;left:0;border-radius:0}}</style>

<script>function acceptCookie(){document.cookie="cookieaccepted=1; expires=Thu, 18 Dec 2030 12:00:00 UTC; path=/",document.getElementById("cookie-notice").style.visibility="hidden"}document.cookie.indexOf("cookieaccepted")<0&&(document.getElementById("cookie-notice").style.visibility="visible");</script>

Adding it to WordPress

I didn’t make it as a WordPress plugin because it’s so easy to integrate. Also creating it as a WordPress plugin will require database calls to query the text, colour etc.

In order to add it to your WordPress site, go to your Appearance -> Theme Editor -> Theme Footer (footer.php) (from the right side) and paste the above code just before </body>.

Customization

The text can be easily changed in the <p> tag. You can insert links or anything as you wish.

To edit the background colour, search for #596cd5 and replace it with yours. For the button’s background colour search for #3842c7 and replace it.

Comment below if you’ve any queries or feedback. I read and reply to each of them within 8 hours!

Comments are closed.

You May Also Like