@krysmalskipl/astro-consent-mode 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## 0.1.2 - 2026-10-12
+
+### Added
+
+- Added floating cookie preference badge (`badge` and `badgePosition` options) allowing visitors to reopen consent preferences at any time.
+- Added `hideFromBots: false` option to ensure cookie banner functions properly in CI environments, headless browser automations, and testing suites.
+- Added documentation screenshots showing all 8 banner layouts with overlay variations and floating badge.
+
+## 0.1.1 - 2026-10-12
+
+### Changed
+
+- Updated npm scope to `@krysmalskipl/astro-consent-mode`.
+
 ## 0.1.0 - 2026-10-12
 
 ### Features

package/README.md

@@ -157,6 +157,32 @@ Choose a ready-made layout using the `banner` option:
 | `'bar-top'` | Full-width bar anchored to the top edge |
 | `'modal'` | Centered modal window with a dimmed page backdrop (sets `overlay: true` automatically) |
 
+### Layout Previews
+
+#### 1. `banner: 'box-left'` *(Default)*
+![box-left](docs/images/box-left.png)
+
+#### 2. `banner: 'box-right'` *(shown with `overlay: true`)*
+![box-right](docs/images/box-right.png)
+
+#### 3. `banner: 'box-center'`
+![box-center](docs/images/box-center.png)
+
+#### 4. `banner: 'box-wide'` *(shown with `overlay: true`)*
+![box-wide](docs/images/box-wide.png)
+
+#### 5. `banner: 'cloud'`
+![cloud](docs/images/cloud.png)
+
+#### 6. `banner: 'bar-bottom'`
+![bar-bottom](docs/images/bar-bottom.png)
+
+#### 7. `banner: 'bar-top'` *(shown with `overlay: true`)*
+![bar-top](docs/images/bar-top.png)
+
+#### 8. `banner: 'modal'` *(Centered dialog, `overlay: true` by default)*
+![modal](docs/images/modal.png)
+
 You can also dim the page background and prevent page interactions for any layout by setting `overlay: true`:
 
 ```ts
@@ -167,6 +193,31 @@ consent({
 })
 ```
 
+## Floating Badge (Cookie Icon)
+
+Allow visitors to reopen cookie preferences at any time with a floating button:
+
+```ts
+consent({
+  gtmId: 'GTM-XXXXXX',
+  badge: true, // Displays '🍪' in the bottom-left corner
+  badgePosition: 'bottom-left', // 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+})
+```
+
+You can customize the badge content by passing a string (e.g. emoji, text, or both):
+
+```ts
+consent({
+  gtmId: 'GTM-XXXXXX',
+  badge: '🍪 Cookies',
+  badgePosition: 'bottom-left',
+})
+```
+
+#### Floating Badge Preview
+![badge](docs/images/badge.png)
+
 ## Styling
 
 The banner is styled using vanilla-cookieconsent v3 CSS variables. You can override colors, fonts, and border radius in your global CSS stylesheet:

package/dist/client.js

@@ -57,6 +57,7 @@ if (typeof window !== "undefined") {
     // Resolved at build time from the `banner` preset merged with `gui`.
     guiOptions: config.gui,
     disablePageInteraction: config.overlay,
+    hideFromBots: false,
     categories,
     language: {
       default: config.lang,
@@ -65,6 +66,32 @@ if (typeof window !== "undefined") {
     onConsent: syncConsent,
     onChange: syncConsent
   });
+  if (config.badge) {
+    const badgeLabel = typeof config.badge === "string" ? config.badge : "\u{1F36A}";
+    const pos = config.badgePosition || "bottom-left";
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("data-cc", "show-preferencesModal");
+    btn.setAttribute("aria-label", config.lang === "pl" ? "Ustawienia cookies" : "Cookie settings");
+    btn.innerHTML = badgeLabel;
+    const baseStyle = "position:fixed;z-index:9999;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--cc-btn-secondary-bg, #ffffff);color:var(--cc-btn-secondary-text, #132a5e);border:1px solid var(--cc-btn-secondary-border, rgba(0,0,0,0.12));border-radius:9999px;padding:8px 14px;font-size:14px;font-weight:600;font-family:inherit;box-shadow:0 4px 14px rgba(0,0,0,0.1);transition:transform 0.15s ease,box-shadow 0.15s ease;";
+    const posStyles = {
+      "bottom-left": "bottom:16px;left:16px;",
+      "bottom-right": "bottom:16px;right:16px;",
+      "top-left": "top:16px;left:16px;",
+      "top-right": "top:16px;right:16px;"
+    };
+    btn.style.cssText = baseStyle + (posStyles[pos] || posStyles["bottom-left"]);
+    btn.addEventListener("mouseenter", () => {
+      btn.style.transform = "scale(1.05)";
+      btn.style.boxShadow = "0 6px 20px rgba(0,0,0,0.16)";
+    });
+    btn.addEventListener("mouseleave", () => {
+      btn.style.transform = "scale(1)";
+      btn.style.boxShadow = "0 4px 14px rgba(0,0,0,0.1)";
+    });
+    document.body.appendChild(btn);
+  }
 }
 export {
   showPreferences2 as showPreferences

package/dist/index.d.ts

@@ -148,6 +148,21 @@ interface ConsentOptions {
      * Defaults to true for the 'modal' preset, false otherwise.
      */
     overlay?: boolean;
+    /**
+     * Floating button / badge allowing users to reopen cookie preferences anytime:
+     * - `false` (default): disabled (preference reopening handled via footer link or [data-cc="show-preferencesModal"])
+     * - `true`: displays standard badge with cookie emoji 🍪
+     * - `string`: custom label or icon, e.g. '🍪', 'Cookies', '🍪 Ustawienia cookies'
+     */
+    badge?: boolean | string;
+    /**
+     * Position of the floating preferences badge:
+     * - 'bottom-left' (default)
+     * - 'bottom-right'
+     * - 'top-left'
+     * - 'top-right'
+     */
+    badgePosition?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     /**
      * Low-level UI configuration for consent and preferences modals.
      * Merged on top of the `banner` preset, so you can fine-tune any of its values.
@@ -216,6 +231,8 @@ interface ClientConfig {
     translations: Record<string, Translation>;
     gui: GuiOptions;
     overlay: boolean;
+    badge: boolean | string;
+    badgePosition: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     revision: number;
     mode: 'basic' | 'advanced';
 }

package/dist/index.js

@@ -449,6 +449,8 @@ function consent(options = {}) {
   );
   const banner = options.banner ?? "box-left";
   const overlay = options.overlay ?? banner === "modal";
+  const badge = options.badge ?? false;
+  const badgePosition = options.badgePosition ?? "bottom-left";
   const preset = BANNER_PRESETS[banner];
   const gui = {
     consentModal: { ...preset.consentModal, ...options.gui?.consentModal },
@@ -464,6 +466,8 @@ function consent(options = {}) {
     translations,
     gui,
     overlay,
+    badge,
+    badgePosition,
     revision,
     mode
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krysmalskipl/astro-consent-mode",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "license": "MIT",
   "description": "Google Consent Mode v2 for Astro - cookie banner, GTM, GA4, Meta Pixel and Microsoft Clarity with zero config.",