Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manucaralmo/GlowCookies
GlowCookies 🍪 - Powerful Cookie Consent Banner In JavaScript
https://github.com/manucaralmo/GlowCookies
accept-cookies analytics cookie-banner cookies cookies-alert cookies-banner cookies-consent disable-cookies facebook facebook-pixel frontend gdpr gdpr-compliant gdpr-consent gdpr-cookie google-analytics javascript manage-cookies
Last synced: 23 days ago
JSON representation
GlowCookies 🍪 - Powerful Cookie Consent Banner In JavaScript
- Host: GitHub
- URL: https://github.com/manucaralmo/GlowCookies
- Owner: manucaralmo
- License: gpl-3.0
- Created: 2020-10-03T14:31:01.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-03T16:39:51.000Z (5 months ago)
- Last Synced: 2024-06-22T12:40:17.029Z (3 months ago)
- Topics: accept-cookies, analytics, cookie-banner, cookies, cookies-alert, cookies-banner, cookies-consent, disable-cookies, facebook, facebook-pixel, frontend, gdpr, gdpr-compliant, gdpr-consent, gdpr-cookie, google-analytics, javascript, manage-cookies
- Language: JavaScript
- Homepage: https://manucaralmo.github.io/glow-cookies-web/
- Size: 228 KB
- Stars: 314
- Watchers: 14
- Forks: 62
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
  [](https://github.com/AmauriC/tarteaucitron.js/graphs/contributors) 
# GlowCookies 🍪 - Powerful Cookie Consent Banner In JavaScript
Simple and full automated cookies banner for any website. Complies with the new European regulations with GlowCookies. Activate and deactivate Google Analytics, Facebook Pixel, Hotjar (and coming soon) cookies whenever the user wishes, with just 1 click.
[](https://manucaralmo.github.io/glow-cookies-web/)
## The cookies banner
## How it works
You just have to install the code. When the user clicks on accept cookies, the google analytics tracking code, Facebook Pixel and/or Hotjar starts tracking. If the user rejects cookies, the tracking code will not start working.
## How to use
Add this code to your html `` or `` tag.
```html
glowCookies.start('en', {
style: 1,
analytics: 'G-FH87DE17XF',
facebookPixel: '990955817632355',
policyLink: 'https://link-to-your-policy.com'
});
```
## Banner styles
Now you can choose between these available banner styles:
- Style `1`, `2` or `3`
Set style in config object `glowCookies.start('en', { style: 3 })`
## Languages
Now you can choose between these available languages:
- Afrikaans (`af`)
- Brazilian portugese (`pt_BR`)
- Bulgarian (`bg`)
- Catalan (`ca`)
- Chinese Simple (`zh`)
- Chinese Traditional (`zh_TW`)
- Danish (`da`)
- Dutch (`nl`)
- English (`en`)
- French (`fr`)
- German (`de`)
- Italian (`it`)
- Japanese (`ja`)
- Malagasy (`mg`)
- Norwegian (`no`)
- Occitan (`oc`)
- Polish (`pl`)
- Russian (`ru`)
- Slovak (`sk`)
- Spanish (`es`)
- Swedish (`sv`)
- Thai (`th`)
- Turkish (`tr`)
- Ukrainian (`uk`)
Set language in the first parameter of `glowCookies.start('en', { })` method.
## Tracking options
These are the parameters that you can modify to add your tracking codes or custom scripts.
| Parameter | Type | Values |
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
| `analytics` | String | Example: `"G-FH87DE17XF"` (Analytics tracking code) |
| `facebookPixel` | String | Example: `"990955817632355"` (Facebook Pixel code) |
| `HotjarTrackingCode` | String | Example: `"990955817632355"` (Hotjar tracking code) |
| `customScript` (Inline) | Object | Example: `[{ type: 'custom', position: 'body', content: 'console.log('custom script');' }]` |
| `customScript` (src) | Object | Example: `[{ type: 'src', position: 'head', content: 'https://www.googletagmanager.com/gtag/js?id=G-FH87DE17XF' }]` |
## Config Banner
These are the parameters that you can modify to change certain banner options
| Parameter | Type | Values |
| ---------------- | ------- | -------------------------------------------------------------------------------- |
| `policyLink` | String | Example: `"https://yourlink.com"` (Your cookies policy link) |
| `hideAfterClick` | Boolean | (`true` or `false`) Default: `true` (Hide banner after Accept or Reject cookies) |
## Customize Banner
Now there are certain parameters that you can change to customize your banner.
| Parameter | Type | Values |
| --------------------- | ------ | ------------------------------------------------------------------------------------------------------ |
| `border` | String | (`"border"` or `"none"`) Default: `"border"` |
| `position` | String | (`"left"` or `"right"`) Default: `"left"` |
| `bannerDescription` | String | Example: `"We use our own and third-party cookies to personalize content and to analyze web traffic."` |
| `bannerLinkText` | String | Example: `"Read more about cookies"` |
| `bannerBackground` | String | Example: `"#FAFAFA"` Example: `"lightblue"` |
| `bannerColor` | String | Example: `"#000"` Example: `"blue"` |
| `bannerHeading` | String | Example: `"Use of cookies"` Default: None |
| `acceptBtnText` | String | Example: `"Accept cookies"` |
| `acceptBtnColor` | String | Example: `"#000"` Example: `"blue"` |
| `acceptBtnBackground` | String | Example: `"#fff"` Example: `"white"` |
| `rejectBtnText` | String | Example: `"Reject"` |
| `rejectBtnBackground` | String | Example: `"#000"` Example: `"blue"` |
| `rejectBtnColor` | String | Example: `"#fff"` Example: `"white"` |
| `manageColor` | String | Example: `"#fff"` Example: `"white"` |
| `manageBackground` | String | Example: `"#f2f2f2"` Example: `"blue"` |
| `manageText` | String | Example: `"Manage cookies"` |
## Fully customized banner
```html
glowCookies.start('en', {
style: 2,
analytics: 'G-FH87DE17XF',
facebookPixel: '990955817632355',
hideAfterClick: true,
border: 'none',
position: 'right',
policyLink: 'https://google.es',
customScript: [{ type: 'custom', position: 'body', content: `console.log('my custom js');` }],
bannerDescription: 'banner desc',
bannerLinkText: 'banner link text',
bannerBackground: '#000',
bannerColor: '#fafafa',
bannerHeading: '<h2>Cookies</h2>',
acceptBtnText: 'accept btn text',
acceptBtnColor: 'green',
acceptBtnBackground: 'red',
rejectBtnText: 'reject btn text',
rejectBtnBackground: 'lightblue',
rejectBtnColor: 'blue',
manageColor: 'white',
manageBackground: 'blue',
manageText: 'cookies text'
});
```
## Contribute
If you know any other language, please help translate.
- Update the `arrLang` of the `LanguageGC` class in glowCookies.js (Add an entry in this fashion.)
- Update language documentation in README.md
- Create a pull request
```
en: {
'bannerHeading': 'We use cookies',
'bannerDescription' : 'We use our own and third-party cookies to personalize content and to analyze web traffic.',
'bannerLinkText' : 'Read more about cookies',
'acceptBtnText' : 'Accept cookies',
'rejectBtnText' : 'Reject',
'manageText' : 'Manage cookies'
}
```
Thanks for your help! 🎉
## Next steps
- [ ] Advanced cookies management
- [ ] Cookie settings
### Request features
[email protected]