Purpose: I created this cookie consent banner as a reusable component for anyone who needs to inform their website visitors about the use of cookies and obtain their consent. It’s designed to be easy to integrate, visually appealing, and fully compliant with privacy regulations like GDPR.
Process Flow:
- User Visits the Website:
- When someone visits a site using this banner, the script checks if a cookie named
cookie_responsealready exists in the visitor’s browser. If the cookie is absent (meaning the user hasn’t made a choice yet), the banner will appear after a 2-second delay.
- When someone visits a site using this banner, the script checks if a cookie named
- Banner Display:
- The banner appears at the bottom of the screen with a message explaining the use of cookies and two buttons: “Accept” and “Reject.” It’s styled to be clean and modern, with customizable colors to match any site’s design.
- User Interaction:
- The user can either accept or reject the use of cookies. Clicking either button causes the banner to slide out of view smoothly, and their choice is saved in a cookie (
cookie_response) for 7 days. - The “Accept” button stores a value of
accepted, while the “Reject” button stores a value ofrejected.
- The user can either accept or reject the use of cookies. Clicking either button causes the banner to slide out of view smoothly, and their choice is saved in a cookie (
- Persistent User Choice:
- On subsequent visits within the 7-day period, the banner won’t display again if the
cookie_responsecookie is present. This ensures that the user’s preference is respected, preventing repetitive prompts.
- On subsequent visits within the 7-day period, the banner won’t display again if the
- Easy Integration:
- This component is built to be easily dropped into any website. All the necessary HTML, CSS, and JavaScript are provided, and you can adjust the design and behavior to fit your needs with minimal effort.
Benefits:
- Universal Application: This banner works for any website that needs to comply with cookie consent regulations, from small personal sites to large commercial platforms.
- Customizable Design: The banner’s appearance can be easily tailored to match the look and feel of any website.
- User-Friendly: The banner is designed to enhance user experience by being non-intrusive and providing a clear, simple choice.
Example Usage: If you’re running a website and need a quick, compliant way to manage cookie consent, you can simply integrate this banner into your site. Once in place, the banner will show up after a brief delay, allowing your visitors to either accept or reject cookies. Their choice is stored, so they won’t be asked again during the same session or for 7 days, depending on their decision.