@polvere94/cookie-flow

v1.2.1

Published

2 months ago

Premium glassmorphic cookie consent manager for any website (Vanilla JS, Next.js, React).

0High
0Medium
0Low

polvere94

cookie consent gdpr nextjs react glassmorphism i18n vanilla-js

🍪 CookieFlow

Premium, glassmorphic cookie consent manager for any website. Lightweight, zero-dependency, and highly customizable.

✨ Features

🎨 Glassmorphic UI: Modern design with backdrop-blur and sleek animations.
🚀 Zero Dependencies: Pure Vanilla JS and CSS.
🛡️ Script Blocking: Automatically blocks scripts until consent is given.
📱 Responsive: Works perfectly on mobile and desktop.
🌍 i18n: Built-in English and Italian support with auto-detection.
🔘 Floating Button: Re-open settings at any time with a customizable widget.
⚡ Next.js & React Ready: Easy integration via scripts.

🚀 Installation

1. Via NPM (Recommended for Next.js/Build tools)

npm install @polvere94/cookie-flow

2. Manual Installation

Download the dist/ files and include them in your project.

💻 Usage

Vanilla JS / Static HTML

Copy the dist files to your server and include them:

<head>
  <link rel="stylesheet" href="/path/to/cookie-flow.min.css">
</head>
<body>
  <!-- Configuration -->
  <script>
    window.cfConfig = {
      language: 'auto',
      primaryColor: '#6366f1',
      privacyUrl: '/privacy'
    };
  </script>
  
  <script src="/path/to/cookie-flow.min.js"></script>
</body>

Next.js (App Router)

Copy cookie-flow.min.js and cookie-flow.min.css to your public/ folder.
Update your layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="/cookie-flow.min.css" />
        <Script src="/cookie-flow.min.js" strategy="beforeInteractive" />
        <Script
          id="cookie-flow-config"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.cfConfig = {
                language: 'it',
                primaryColor: '#6366f1',
                floatingButton: true,
                privacyUrl: '/privacy'
              };
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

🛡️ Blocking Scripts

To prevent scripts from loading before consent, change type to text/plain and add data-cookiecategory:

<script 
  type="text/plain" 
  data-cookiecategory="analytics" 
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX">
</script>

⚙️ Configuration Options

🛠️ API

You can control the manager programmatically:

window.cookieFlowInstance.showModal(): Open the settings modal.
window.cookieFlowInstance.hideModal(): Close the settings modal.

📄 License

MIT License. Created by Francesco.