Once you\u2019ve finished reading our guide, you\u2019ll know how to design an engaging, compliant cookie widget for your website.\u00a0<\/p>\n\n\n\n
<\/p>\n\n\n\n <\/p>\n\n\n\n We\u2019re all familiar with the \u201cthis website uses cookies\u201d message. But most of us press the Allow Cookies<\/strong> button without really knowing what we are giving explicit consent to. <\/p>\n\n\n\n Before we look at examples of cookie notices, we need to find out more about these notifications. <\/p>\n\n\n\n So, what are they? <\/p>\n\n\n\n Cookies are small text files containing data that a website stores on your user\u2019s computer upon their first visit. <\/p>\n\n\n\n These small files identify your users\u2019 computers as they use the network, remembering their information and browsing activity. <\/p>\n\n\n\n For web developers, cookies are handy because they make analyzing user behavior and traffic much easier. From this analytical data, developers can improve and personalize the user\u2019s experience. <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Since cookies collect your users\u2019 personal data, cookie messages often raise privacy concerns. That\u2019s why every cookie consent pop-up you see will provide users with a detailed privacy policy. <\/p>\n\n\n\n These policies inform users about the types of cookies a website employs and how developers use them. They also detail how users can alter their cookie preferences, allowing them to enable or disable certain cookies. <\/p>\n\n\n\n By providing such policies, you enable your users to make informed choices about their consent preferences. <\/p>\n\n\n\n But a cookie privacy policy doesn\u2019t just benefit the user – it benefits the entire business. <\/p>\n\n\n\n Cookie privacy policies are a legal requirement. The Cookie Law is a privacy law that requires websites to get consent from users before storing\/tracking personal data. So, in order to comply with global data protection laws, you must always provide cookie privacy policies. <\/p>\n\n\n\n This is where cookie notification banners enter the picture. <\/p>\n\n\n\n Cookie notification banners are popup notifications that allow you to legally and safely obtain your users\u2019 consent for cookies. <\/p>\n\n\n\n There are three things you absolutely need<\/strong> to include in your cookie banners. <\/p>\n\n\n\n As we mentioned earlier, there are many different types of cookies. For instance, you can use essential cookies that your website depends on to function correctly. Then, you have functional cookies, which enhance the website\u2019s performance by remembering users\u2019 preferences and cookie settings. <\/p>\n\n\n\n Regardless of the cookie categories you use, you must provide information about the ones your business intends to use. After all, how can your users consent to cookies that they know nothing about? <\/p>\n\n\n\n Cookie banners must allow users to customize their cookie consent preferences. <\/p>\n\n\n\n There are two forms of consent – explicit and implied. <\/p>\n\n\n\n Implied consent depends on the assumption that the user consents to the use of cookies based on their actions. An example of implied consent is when the user continues to browse after you\u2019ve notified them of your cookie usage. <\/p>\n\n\n\n Explicit consent occurs when your users actively give their consent through their actions. The best example is the simplest – when a user clicks the Accept Cookie <\/strong>button, they give their consent. <\/p>\n\n\n\n However, when your users give their consent, you must always provide an option for them to revoke it. For your users, revoking consent should be as straightforward as giving it in the first place. <\/p>\n\n\n\n You also need to provide a link to your privacy policy within your cookie banner. <\/p>\n\n\n\n Make it detailed and visible – your users must understand why you require their consent. <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n When looking into privacy laws, you probably came across the General Data Protection Regulation (GDPR)<\/a>. <\/p>\n\n\n\n Although the GDPR is a European Union regulation, it imposes its obligations upon businesses around the world. After all, it\u2019s likely that a large chunk of your user base resides in the EU. So, your cookies will also target EU-based users and must then comply with the GDPR. <\/p>\n\n\n\n To help you stay compliant, we\u2019ve provided a checklist for a GDPR cookie banner. <\/p>\n\n\n\n <\/p>\n\n\n\n Let\u2019s look at a cookie banner example that excels at GDPR compliance. <\/p>\n\n\n\n The image above this section is an example of a cookie banner from CookieYes. <\/p>\n\n\n\n As you can see, the banner is visible but not invasive. It also perfectly summarizes, in simple terms, what the user needs to know about cookie usage. <\/p>\n\n\n\n Along with a link to their privacy policy and consent options, CookieYes is a great example of GDPR compliance. <\/p>\n\n\n\n Speaking of cookie banner examples, it\u2019s time to look at some of the best. <\/p>\n\n\n\n Let\u2019s start by looking at some cookie banner policy examples.\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n It\u2019s easy to look at several cookie banners and talk about how they\u2019ve added links to their policies. But to maximize the usefulness of these banner links, you need to know what a good privacy policy looks like. <\/p>\n\n\n\n Nestl\u00e9 is a great example of a well-rounded cookie privacy policy. <\/p>\n\n\n\n Nestl\u00e9\u2019s privacy policy<\/a> starts by summarizing what the policy addresses so the user knows exactly what to look for. Scrolling down, Nestl\u00e9 goes into great detail about how they source and collect their users\u2019 personal data. <\/p>\n\n\n\n They also provide thorough explanations as to why and how they use certain types of cookies. Complete with details on data storage, transfers, and retention, Nestl\u00e9\u2019s privacy policy is exactly what it should be – comprehensive.\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Uber is another big-name brand that serves as a great example of a cookie policy. <\/p>\n\n\n\n Immediately, Uber lets its users know what cookies are and defines the meaning of each cookie category they use. It\u2019s a straightforward, jargon-free policy that all users can access and understand easily. <\/p>\n\n\n\n However, those characteristics, although crucial, aren\u2019t what landed Uber on our list. <\/p>\n\n\n\n As Uber\u2019s cookie policy<\/a> continues, you\u2019ll find an easily readable table. This table showcases the type, name, expiration date, and description of every cookie that Uber uses. By adding this table, Uber remains transparent with its users, establishing reliability, trust, and credibility. <\/p>\n\n\n\n Next up, we take a deep dive into cookie consent examples. <\/p>\n\n\n\n As we did with cookie policy examples, we\u2019ve explored some of the best cookie consent banner examples below.\u00a0\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n We praised CookieYes for displaying a visible, but not invasive, cookie banner. So, when looking at New Balance\u2019s center-stage modal pop-up banner, you may not immediately realize why we chose it. <\/p>\n\n\n\n While it forcefully commands the user\u2019s attention, its other design elements make up for its invasiveness. It\u2019s a small, simple cookie banner with brand-specific colors and a positive title: \u201cThe choice is yours.\u201d <\/p>\n\n\n\n Encouraging the users\u2019 sense of autonomy is what makes New Balance\u2019s cookie banner one to learn from. <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Glossier\u2019s cookie banner is practically the exact opposite of New Balance\u2019s banner, but its differences work extremely well, too. <\/p>\n\n\n\n Instead of using the middle of the screen, Glossier places its cookie banner at the bottom of the page. Its placement is perfect, as it doesn\u2019t detract from its users\u2019 browsing, but it\u2019s not hard to spot either. <\/p>\n\n\n\n Another notable feature is the banner\u2019s message, which has a casual, conversational tone and includes a couple of cute emojis. By highlighting this element of its brand personality, Glossier maintains user engagement throughout an otherwise typical cookie banner. <\/p>\n\n\n\n What\u2019s more, Glossier\u2019s privacy policy link catches your eye since the blue hyperlink contrasts distinctly with the pastel pink background. This use of contrasting colors is definitely something to keep in mind when prioritizing accessible design<\/a>. <\/p>\n\n\n\n Last but not least, let\u2019s look at cookie popup examples.<\/p>\n\n\n\n And what better example is there to start with than Moovly?\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n A lot of companies inject a touch of whimsy into their cookie popups by semantically connecting them to edible cookies. While this isn\u2019t an uncommon trend, Moovly is one company that implements it extremely well. <\/p>\n\n\n\n Instead of a witty one-liner, Moovly uses a cute, cheery, cartoon-esque illustration at the top of its cookie banner. It\u2019s engaging, fun, and playful, compensating for the central screen space it takes up. <\/p>\n\n\n\n But, as you know, cookie popups need to be more than playful. <\/p>\n\n\n\n Moovly also celebrates high contrast and simplicity down to its call to action (CTA) buttons. Where one button is red with white text, the other is white with red text. This is a great way to ensure users know exactly what actions they\u2019re making without feeling tricked into making them.\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Mary Polson is a UX designer<\/a> who created the design above as part of a UI challenge on Dribbble. Polson\u2019s use of bright, positive colors and homely animations make this cookie banner a delight to witness. <\/p>\n\n\n\n It also displays an easy-to-use slider that allows the user to switch between their cookie preferences quickly. Of course, as a submission for a UI design challenge, it lacks essential CTA buttons and a privacy policy link. <\/p>\n\n\n\n But with those crucial additions, this cookie popup banner would undoubtedly enhance the user\u2019s experience.\u00a0<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n Before we conclude our thoughts, we\u2019d like to share some cookie banner design tips and tricks first. So, read our list below to discover how to design the most helpful, engaging cookie banners. <\/p>\n\n\n\n <\/p>\n\n\n\n We hope that you can perceive cookie banners as great design opportunities rather than mundane UI elements. <\/p>\n\n\n\n But if great UX design just relied on cookie banners, there would be no such thing as a bad product. Imagine what that<\/em> world would look like. <\/p>\n\n\n\n In this world, designers also depend on the valuable user flow<\/a> inspiration that Page Flows provides. On our website, you\u2019ll find tens of thousands of screenshots, collected emails, and – of course – user flows. We document a wide array of user flows, from onboarding<\/a> to general browsing. <\/p>\n\n\n\n Why? <\/p>\n\n\n\n We aim to help designers learn from the giants in their industry, regardless of what that industry is. From food to finance, from Deliveroo to Depop, we document everything you need to design better user flows. <\/p>\n\n\n\n Like the cookie banner examples we\u2019ve discussed today, we celebrate simplicity, straightforwardness, and superior design. <\/p>\n\n\n\n![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/pexels-n-voitkevich-10060724.jpg\")
<\/figure>\n<\/div><\/figure>\n\n\n\nUnderstanding the \u2018This Website Uses Cookies\u2019 Message\u00a0<\/strong><\/h2>\n\n\n\n
![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/towfiqu-barbhuiya-FnA5pAzqhMM-unsplash.jpg\")
<\/figure>\n<\/figure>\n\n\n\nCookie Messages and the Issue of Privacy\u00a0<\/strong><\/h2>\n\n\n\n
So, What Are Cookie Notification Banners?\u00a0<\/strong><\/h2>\n\n\n\n
1.\u00a0 Details About the Types of Cookies\u00a0<\/strong><\/h3>\n\n\n\n
2. The Ability To Opt Out\u00a0<\/strong><\/h3>\n\n\n\n
3. A Link To Your Privacy Policy\u00a0<\/strong><\/h3>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/CookieYes-Cookie-Banner-Example.png\")
<\/figure>\n<\/div><\/figure>\n\n\n\nMaintaining Compliance: The GDPR Cookie Banner\u00a0<\/strong><\/h2>\n\n\n\n
\n
Cookie Banner Policy Examples<\/strong><\/h2>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/Nestles-Cookie-Policy-1024x522.png\")
<\/figure>\n<\/div><\/figure>\n\n\n\n1. Nestl\u00e9<\/strong><\/h3>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/Ubers-Cookie-Policy-1024x553.png\")
<\/figure>\n<\/figure>\n\n\n\n2. Uber\u00a0<\/strong><\/h3>\n\n\n\n
Cookie Consent Examples\u00a0<\/strong><\/h2>\n\n\n\n
![\"\"](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/New-Balance-Cookie-Consent-Example-1-1024x584.png\")
<\/figure>\n<\/div><\/figure>\n\n\n\n1. New Balance\u00a0<\/strong><\/h3>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/Glossier-Cookie-Consent-Example-1024x600.png\")
<\/figure>\n<\/div><\/figure>\n\n\n\n2. Glossier\u00a0<\/strong><\/h3>\n\n\n\n
Cookie Popup Examples\u00a0<\/strong><\/h2>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/Moovly-Cookie-Example-1024x490.png\")
<\/figure>\n<\/div><\/figure>\n\n\n\n1. Moovly\u00a0<\/strong><\/h3>\n\n\n\n
![\"Page](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/Mary-Polson-Cookie-Banner-Example.jpg\")
<\/figure>\n<\/div><\/figure>\n\n\n\n2. Mary Polson\u00a0<\/strong><\/h3>\n\n\n\n
![\"A](\"https:\/\/pageflows.com\/resources\/wp-content\/uploads\/2024\/06\/denise-johnson-K5gBXHSvtkc-unsplash.jpg\")
<\/figure>\n<\/div><\/figure>\n\n\n\nCookie Banner Design Tips & Tricks You Need\u00a0<\/strong><\/h2>\n\n\n\n
\n
Cookie Banner Examples: Final Thoughts\u00a0<\/strong><\/h2>\n\n\n\n