cookie-consent-generator
Generate a copy-pasteable HTML+CSS+JS cookie consent banner. Inputs: position (top/bottom), visual style (minimal/detailed/brutalist), which non-essential categories to expose (analytics, marketing, preferences), colors, button labels, message, policy URL, and the localStorage key. Output is a self-contained block that persists the visitor's choice and dispatches a cookieconsentchange CustomEvent for analytics wiring.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| style | Yes | Visual style. "minimal" = single sentence + accept/reject. "detailed" = full text plus per-category toggles. "brutalist" = hard borders, no shadow, monospace text. | detailed |
| colors | Yes | Color scheme for the banner. Pick contrasting accept/reject so users can tell them apart. | |
| buttons | Yes | Button copy. Keep labels short — long copy wraps awkwardly on mobile. | |
| message | Yes | The headline message shown on the banner. One or two sentences max. | We use cookies to make this site work and to understand how it's used. Pick what you're comfortable with. |
| position | Yes | Banner placement. "top" pins to the top of the viewport, "bottom" to the bottom. | bottom |
| policyUrl | Yes | URL for your full privacy / cookie policy. Rendered as a "Learn more" link. | /privacy |
| categories | Yes | Which non-essential category toggles to render. Necessary cookies are always on and shown as a locked row. | |
| storageKey | Yes | localStorage key the banner writes the user's choice to. | cookie-consent |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| js | Yes | Just the JS, without the surrounding <script> tags. | |
| css | Yes | Just the CSS, without the surrounding <style> tags. | |
| html | Yes | The complete copy-pasteable block: <style>, <script>, and the banner markup. Paste before </body>. | |
| markup | Yes | Just the HTML markup for the banner, with no <style> or <script>. |