Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ezrarieben/cookie-z

GDPR compliant cookie warning with automated language detection
https://github.com/ezrarieben/cookie-z

cookie-banner cookie-banner-javascript cookie-consent cookie-consent-javascript cookie-warning english gdpr gdpr-cookie german i18n jquery-plugin language-detection multilingual

Last synced: about 1 month ago
JSON representation

GDPR compliant cookie warning with automated language detection

Awesome Lists containing this project

README

        

# cookie-z
A jquery plugin that shows a GDPR compliant cookie warning according to the language set on the users device.



[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
## Setting up cookie-z
1. Import the [jQuery library](https://code.jquery.com/ "jQuery's CDN Page")
2. Load the cookie-z script in your HTML after the body
```html

```
3. Create the template for the cookie warning on your page. Example:
```html


```
4. Call the cookie-z plugin on the wrapper of your cookie warning
```javascript
$('.cookie-warning').cookiez();
```
## Changing defaults
1. Use JSON to change the options
1. Example of disabling automated language detection, setting the default language and changing the animation to fade:
```javascript
$('.cookie-warning').cookiez({
autoLang: false,
defaultLang: 'en',
animation: 'fade',
});
```
### Available options
> **NOTE:** if you set `autoLang` to false it will use the default language's text

>**NOTE:** if you want to overwrite a language use the `customLanguages` JSON Array

| Option | Description | Default value | Var type |
| -------------------------- | ------------------------------------------------------------------------- | ------------- | --------- |
| `autoLang` | Turning automated language detection on or off. | `true` | `boolean` |
| `defaultLang` | Locale of the language to use if the detected language is not found | `en` | `string` |
| `animation` | Change the animation of toggling the cookie warning (`slide` or `fade`) | `slide` | `string` |
| `fadeTime` | Speed of the fade animation (in miliseconds) | `350` | `integer` |
| `cookieConfName` | Name of the cookie to set when the user has confirmed | `cookie-warning-confirmed`| `string` |
| `customLanguages.[locale].cookieWarning`| Cookie warning text for a custom language (v1.1.0 supports HTML) | `null` | `string` |
| `customLanguages.[locale].btnClose` | Confirm button Text for a custom language (v1.1.0 supports HTML) | `null` | `string` |
| `elements.selectors.wrapper`| Selector for the cookie warning wrapper | `.cookie-warning` | `string` |
| `elements.selectors.text` | Selector for the element to place the warning into | `.cookie-warning-text` | `string` |
| `elements.selectors.btnClose` | Selector for the element the user clicks on to confirm | `.cookie-warning-close` | `string` |
## Predefined languages
1. English
2. German
### Adding your own language
1. When calling the cookie-z plugin add the `customLanguages` JSON Array to the parameters as follows:
```javascript
$('.cookie-warning').cookiez({
customLanguages: {
fb: {
cookieWarning: "foo",
btnClose: "bar"
}
}
});
```
> **NOTE:** the locale of the language in this example is `fb`. After defining the custom language, you can use it as a default language with the `defaultLang` option.
---
[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)