https://github.com/massimo-cassandro/cookie-consent
Small and customizable script to display a cookie consent banner
https://github.com/massimo-cassandro/cookie-consent
cookies gdpr privacy
Last synced: about 1 year ago
JSON representation
Small and customizable script to display a cookie consent banner
- Host: GitHub
- URL: https://github.com/massimo-cassandro/cookie-consent
- Owner: massimo-cassandro
- License: mit
- Created: 2015-05-16T17:33:26.000Z (about 11 years ago)
- Default Branch: main
- Last Pushed: 2024-06-17T06:46:33.000Z (about 2 years ago)
- Last Synced: 2024-10-28T14:24:47.926Z (over 1 year ago)
- Topics: cookies, gdpr, privacy
- Language: JavaScript
- Homepage:
- Size: 148 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cookie consent banner
**v.3 (was “consenso-cookie” in v.1)**
Small and customizable script to display a cookie consent banner
## Installation
```
npm i --save @massimo-cassandro/cookie-consent
```
## Using Cookie consent banner
Import `cookie-consent.js` as es6 module to your project and add
`cookie-consent.scss` to your styles (you can also use the compiled css version in the demo folder).
```javascript
import {cookie_consent} from '@massimo-cassandro/cookie-consent';
```
Many elements of scss can be customized:
```scss
$mcc-font-family: false; // set to false to inherit document font-family
$mcc-banner-bg-color: #444;
$mcc-banner-text-color: color-yiq($mcc-banner-bg-color);
$mcc-link-color: #fc0;
$mcc-link-hover-color: darken($mcc-link-color, 10);
$mcc-link-text-decoration: none;
$mcc-link-hover-text-decoration: underline;
$mcc-button-bg-color: #fc0;
$mcc-button-text-color: #000;
$mcc-button-hover-bg-color: darken($mcc-button-bg-color, 10);
$mcc-button-hover-text-color: #000;
$mcc-border-radius: 0;
$mcc-box-shadow: 0 0 4px rgba(#000, .6); // set to false or none to disable
@import '@massimo-cassandro/cookie-consent';
```
To activate the banner, invoke the function adding some parameter:
```javascript
cookie_consent({
message: '...',
btn_text: '...',
banner_aria_label: '...',
btn_aria_label: '...',
btn_class: '...'
});
```
Where:
* `message` is the text to be displayed in the banner (html allowed). It may contain the link to your privacy policy page
* `btn_text` is the text of the dismiss button (html allowed)
* `banner_aria_label` and `btn_aria_label` are text for ARIA label attributes
* `btn_class` is an optional class(es) to be added to the dismiss button
The banner is positioned at page bottom right. To change this behavior you have to change the scss/css file.
If the banner is displayed, a `div.cookie-consent` element is appended to your page.