@tagconcierge/consent-banner
Advanced tools
Changelog
1.1.1
Readme
A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website.
First, include simple CSS for the banner in the <head> of the page:
<link rel="stylesheet" href="https://public-assets.tagconcierge.com/consent-banner/1.1.0/styles/light.css" />
Then in the footer you can include the actual JS:
<script src="https://public-assets.tagconcierge.com/consent-banner/1.1.0/cb.min.js"></script>
<script>
cookiesBannerJs(
loadConsentState,
saveConsentState
config
);
</script>
INFO: You can call the cookiesBannerJs function whenever, wherever you want, inside it is wrapped with DOM Ready thingy.
To make that work you need to prepare three things:
localStorage (see examples)localStorage (see examples){
display: {
mode: 'modal', // you can use 'modal' or 'bar'
wall: true // covers the page with opaque layer to prevent user interactions
},
consent_types: [{
name: 'ad_storage', // internal name of consent type, used for final JS object
title: 'Ad Storage', // user facing title for consent type
description: 'Cookies used for advertising purposes', // description visible in the settings view
default: 'denied', // what should be the default state when user decides to customize the settings
require: false // if set to true it won't be possible to save consent without this granted
}],
modal: {
title: 'Learn how we protect your privacy', // title of the first view
description: 'Longer description with *simple markdown support*.',
buttons: {
settings: 'Settings',
close: 'Close',
reject: 'Reject',
accept: 'Accept all'
}
}
settings: {
title: 'Customise your preferences',
description: 'Longer description with *simple markdown support*.',
buttons: {
reject: 'Reject',
close: 'Close',
save: 'Save',
accept: 'Accept all'
}
}
}
Simple Markdown
All description fields in config object support simplified Markdown-like syntax:
This banner comes with mininal set of CSS with all elements prefixed with consent-banner-.
Main elements have their IDs:
#consent-banner-main - main wrapper element#consent-banner-modal - first view, centered modal or bottom bar#consent-banner-settings - shown when user clicks "settings" buttonButtons can be styles using following CSS selectors:
.consent-banner-button - for all buttons.consent-banner-button[href="#accept"] - for approval buttonsSee following examples for complete setups:
Instead of doing direct installation in HTML you can use one of the following integrations:
Google Tag Manager
Use this Google Tag Manager Template to quickly configure and deploy the Consent Banner on any GTM enabled website. It obviously integrates with Google Consent Mode.
WordPress
Simple WordPress plugin that provides UI for configuration, injects required files and integrates with Google Consent Mode.
PrestaShop
Simple PrestaShop plugin that provides UI for configuration, injects required files and integrates with Google Consent Mode.
Cloudflare Worker
Example CF Worker code to inject Consent Banner and the configuration without touching HTML code.
We like docker so that's how get local dev server:
docker-compose up -d dev
But first, we need to install dependencies:
docker-compose run dev npm i
And if we need node cli we get into the a shell like that:
docker-compose run --rm dev bash
Finally, to build minified JS file we run:
docker-compose run dev npm run build
FAQs
A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website.
The npm package @tagconcierge/consent-banner receives a total of 1 weekly downloads. As such, @tagconcierge/consent-banner popularity was classified as not popular.
We found that @tagconcierge/consent-banner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.