{"id":21232582,"url":"https://github.com/tagconcierge/consent-banner-js","last_synced_at":"2025-07-27T04:06:44.556Z","repository":{"id":217855258,"uuid":"723521292","full_name":"tagconcierge/consent-banner-js","owner":"tagconcierge","description":"A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website (compatible with Google Consent Mode).","archived":false,"fork":false,"pushed_at":"2024-08-06T13:12:48.000Z","size":7463,"stargazers_count":180,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-31T01:01:32.087Z","etag":null,"topics":["consent","consent-management","consent-mode","consent-mode-v2","cookie-consent","google-analytics","google-tag","google-tag-manager","no-dependencies","zero-dependency"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tagconcierge.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["tagconcierge"]}},"created_at":"2023-11-25T23:30:53.000Z","updated_at":"2025-03-08T15:37:37.000Z","dependencies_parsed_at":"2024-01-18T14:12:48.992Z","dependency_job_id":"2cb5240f-0e9a-4487-b0d5-e0f9f2778f71","html_url":"https://github.com/tagconcierge/consent-banner-js","commit_stats":null,"previous_names":["tagconcierge/consent-banner-js"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tagconcierge%2Fconsent-banner-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tagconcierge%2Fconsent-banner-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tagconcierge%2Fconsent-banner-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tagconcierge%2Fconsent-banner-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tagconcierge","download_url":"https://codeload.github.com/tagconcierge/consent-banner-js/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246911498,"owners_count":20853657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["consent","consent-management","consent-mode","consent-mode-v2","cookie-consent","google-analytics","google-tag","google-tag-manager","no-dependencies","zero-dependency"],"created_at":"2024-11-20T23:53:19.979Z","updated_at":"2025-04-03T00:07:54.850Z","avatar_url":"https://github.com/tagconcierge.png","language":"JavaScript","funding_links":["https://github.com/sponsors/tagconcierge"],"categories":[],"sub_categories":[],"readme":"# Consent Banner JS\n\n\u003e \u003cp align=\"center\"\u003eA zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website.\u003c/p\u003e\n\n![Consent Banner Demo](assets/consent-banner-js-demo.gif \"Consent Banner Demo\")\n\n## How does it work?\n\n1. It takes **[JSON configuration](#user-content-config-object)** that controls display of the banner.\n2. It fires **[JS callback](#user-content-callbacks)** when user interacts with the banner\n3. It provides simple **[JS object](#user-content-consent-state-object)** with consent state\n\n\n## Get started\n\nFirst, include simple CSS for the banner in the `\u003chead\u003e` of the page:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://public-assets.tagconcierge.com/consent-banner/1.2.3/styles/light.css\" /\u003e\n```\n\nThen in the footer you can include the actual JS:\n\n```html\n\u003cscript src=\"https://public-assets.tagconcierge.com/consent-banner/1.2.3/cb.min.js\" integrity=\"sha384-zXUdInIfEJI2FEImKEFc2cmja+Jn7TViSXzqt6OhABX0jMgz6Mctrc864uJaN5PX\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cookiesBannerJs(\n        loadConsentState,\n        saveConsentState,\n        config\n    );\n\u003c/script\u003e\n```\n\nOr if you want to load the library script asynchronously, you can use the following `consent-banner.ready` event listener, which will execute the function only when the library is loaded:\n```html\n\u003cscript defer src=\"https://public-assets.tagconcierge.com/consent-banner/1.2.3/cb.min.js\" integrity=\"sha384-zXUdInIfEJI2FEImKEFc2cmja+Jn7TViSXzqt6OhABX0jMgz6Mctrc864uJaN5PX\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.addEventListener('consent-banner.ready', () =\u003e {\n        cookiesBannerJs(\n            loadConsentState,\n            saveConsentState,\n            config\n        );\n    });\n\u003c/script\u003e\n```\n\n**INFO:** You can call the `cookiesBannerJs` function whenever, wherever you want, inside it is wrapped with DOM Ready thingy.\n\nTo make that work you need to prepare **three** things:\n\n1. A **function to load the consent state from somewhere**, for instance `localStorage` (see [examples](#examples))\n2. A **function to do something when the user provides their consent**, for instance save it in `localStorage` (see [examples](#examples))\n3. A **config object that contains complete configuration** for the banner content (see [examples](#examples))\n\n\n## Config Object\n\n```js\n{\n    display: {\n        mode: 'modal', // you can use 'modal' or 'bar'\n        wall: true // covers the page with opaque layer to prevent user interactions\n    },\n    consent_types: [{\n        name: 'ad_storage', // internal name of consent type, used for final JS object\n        title: 'Ad Storage', // user facing title for consent type\n        description: 'Cookies used for advertising purposes', // description visible in the settings view\n        default: 'denied', // what should be the default state when user decides to customize the settings\n        require: false // if set to true it won't be possible to save consent without this granted\n    }],\n    modal: {\n        title: 'Learn how we protect your privacy', // title of the first view\n        description: 'Longer description with *simple markdown support*.',\n        buttons: {\n            settings: 'Settings',\n            close: 'Close',\n            reject: 'Reject',\n            accept: 'Accept all'\n        }\n    },\n    settings: {\n        title: 'Customise your preferences',\n        description: 'Longer description with *simple markdown support*.',\n        buttons: {\n            reject: 'Reject',\n            close: 'Close',\n            save: 'Save',\n            accept: 'Accept all'\n        }\n    }\n}\n```\n\n## Consent State Object\n\nBoth JS callback functions provided needs to either accept (on save) or return (on load) Consent State Object:\n\n```js\n{\n    ad_storage: 'granted',\n    analytics_storage: 'denied'\n}\n```\n\n\n## Callbacks\n\n```js\ncookiesBannerJs(\n    function loadConsentState() {\n        const consentState = {}; // get it from somewhere (e.g. localStorage);\n        return consentState;\n    },\n    function saveConsentState(consentState) {\n        // do something with consentState, which is basic JS object:\n        // {\n        //   ad_storage: 'granted',\n        //   analytics_storage: 'denied'\n        // }\n    },\n    config\n);\n```\n\n**Simple Markdown**\n\nAll `description` fields in config object support simplified Markdown-like syntax:\n\n- [links](https://link)\n- **bold** or __bold__\n- *italic* or _italic_\n\n\n## Styling\n\nThis banner comes with mininal set of CSS with all elements prefixed with `consent-banner-`.\nMain elements have their IDs:\n\n- `#consent-banner-main` - main wrapper element\n- `#consent-banner-modal` - first view, centered modal or bottom bar\n- `#consent-banner-settings` - shown when user clicks \"settings\" button\n\nButtons can be styles using following CSS selectors:\n\n- `.consent-banner-button` - for all buttons\n- `.consent-banner-button[href=\"#accept\"]` - for approval buttons\n\n## Examples\n\nSee following examples for complete setups:\n\n- [Bottom bar without \"wall\"](https://tagconcierge.github.io/consent-banner-js/www/bar.html)\n- [Central modal with \"wall\"](https://tagconcierge.github.io/consent-banner-js/www/modal.html)\n- [Single JS Bundle](https://tagconcierge.github.io/consent-banner-js/www/bundle.html)\n- [Google Consent Mode](https://tagconcierge.github.io/consent-banner-js/www/gtm.html)\n\n\n## Integrations\n\nInstead of doing direct installation in HTML you can use one of the following integrations:\n\n**Google Tag Manager**\n\nUse this [Google Tag Manager Template](https://github.com/tagconcierge/tagconcierge-gtm-cookies-template) to quickly configure and deploy the Consent Banner on any GTM enabled website. It obviously integrates with Google Consent Mode.\n\n**WordPress**\n\nSimple [WordPress plugin](https://wordpress.org/plugins/gtm-consent-mode-banner/) that provides UI for configuration, injects required files and integrates with Google Consent Mode.\n\n**PrestaShop**\n\nSimple [PrestaShop plugin](https://www.prestashop.com/forums/topic/1085918-free-module-google-tag-manager-consent-mode-banner-free-consentcookies-banner-compatible-with-gtm-consent-mode-dedicated-for-prestashop/) that provides UI for configuration, injects required files and integrates with Google Consent Mode.\n\n**Cloudflare Worker**\n\n[Example CF Worker code](./www/cf-worker-bundle.js) to inject Consent Banner and the configuration without touching HTML code.\n\n\n## Development\n\nWe like docker so that's how get local dev server:\n\n`docker-compose up -d dev`\n\nBut first, we need to install dependencies:\n\n`docker-compose run dev npm i`\n\nAnd if we need `node` cli we get into the a shell like that:\n\n`docker-compose run --rm dev bash`\n\nFinally, to build minified JS file we run:\n\n`docker-compose run dev npm run build`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftagconcierge%2Fconsent-banner-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftagconcierge%2Fconsent-banner-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftagconcierge%2Fconsent-banner-js/lists"}