# cookieplease.js :cookie:
This script adds a GDPR cookie box with checkboxes for required and analytical cookie usage to your HTML. It uses localstorage to store the users decision and confirmation (`cookieplease: required` or `cookieplease: analytical`).

The script with analytical checkbox adds the corresponding analytics script and opt-out.

## Getting started
Add script `/dist/main.js` and `/dist/main.css` before `</body>`

### Default usage
Set custom texts and privacy links.
```html
<link rel="stylesheet" type="text/css" href="dist/main.css">
<script>
var cookieplease = {
    texts: [{
        headline: 'Cookie settings',
        description: 'This website uses cookies to ensure you get the best experience. You can always change the use of cookies in your browser settings.',
        requiredLabel: 'Required',
        moreLabel: 'Details about cookie usage',
        moreLink: 'https://',
        buttonLabel: 'Confirm'
    },
    {
        headline: 'Cookie-Einstellungen',
        description: 'Diese Website setzt Cookies ein, um das Angebot nutzerfreundlich und funktionaler zu gestalten. Die Verwendung von Cookies können Sie in den Browser-Einstellungen jederzeit ändern.',
        requiredLabel: 'Notwendig',
        moreLabel: 'Details zur Cookie-Nutzung',
        moreLink: 'https://',
        buttonLabel: 'Bestätigen'
    }]
};
</script>
<script src="dist/main.js"></script>
```
### Custom theme and color usage
Add script `/dist/main.js` and `/dist/main.css` before `</body>`

```html
<link rel="stylesheet" type="text/css" href="dist/main.css">
<script>
var cookieplease = {
    dark: true,
    color: '#dd042d',
    texts: [{
        headline: 'Cookie settings',
        description: 'This website uses cookies to ensure you get the best experience. You can always change the use of cookies in your browser settings.',
        requiredLabel: 'Required',
        moreLabel: 'Details about cookie usage',
        moreLink: 'https://',
        buttonLabel: 'Confirm'
    },
    {
        headline: 'Cookie-Einstellungen',
        description: 'Diese Website setzt Cookies ein, um das Angebot nutzerfreundlich und funktionaler zu gestalten. Die Verwendung von Cookies können Sie in den Browser-Einstellungen jederzeit ändern.',
        requiredLabel: 'Notwendig',
        moreLabel: 'Details zur Cookie-Nutzung',
        moreLink: 'https://', 
        buttonLabel: 'Bestätigen'
    }]
};
</script>
<script src="dist/main.js"></script>
```
### Usage with Google Tag Manager
For Google Tag Manager add `gtag` string `analytical` option and add correct Google Tag Manager ID to `analyticalId`.
```html
<link rel="stylesheet" type="text/css" href="dist/main.css">
<script>
var cookieplease = {
    analytical: 'gtag',
    analyticalId: 'GTM-XXXXXXX',
    texts: [{
        headline: 'Cookie settings',
        description: 'This website uses cookies to ensure you get the best experience. You can always change the use of cookies in your browser settings.',
        requiredLabel: 'Required',
        analyticalLabel: 'Analytical',
        moreLabel: 'Details about cookie usage',
        moreLink: 'https://',
        selectLabel: 'Confirm selection', 
        buttonLabel: 'Confirm all'
    },
    {
        headline: 'Cookie-Einstellungen',
        description: 'Diese Website setzt Cookies ein, um das Angebot nutzerfreundlich und funktionaler zu gestalten. Die Verwendung von Cookies können Sie in den Browser-Einstellungen jederzeit ändern.',
        requiredLabel: 'Notwendig',
        analyticalLabel: 'Statistiken',
        moreLabel: 'Details zur Cookie-Nutzung',
        moreLink: 'https://',
        selectLabel: 'Auswahl bestätigen', 
        buttonLabel: 'Alle bestätigen'
    }]
};
</script>
<script src="dist/main.js"></script>
```### Usage with Matomo Tag Manager
For Matomo Tag Manager add `matomo` string `analytical` option and add Matomo Tag Manager ID to `analyticalId` and Matomo domain to `analyticalDomain` (without ending slash).
```html
<link rel="stylesheet" type="text/css" href="dist/main.css">
<script>
var cookieplease = {
    dark: true,
    color: '#dd042d',
    analytical: 'mtag',
    analyticalId: 'xxxXxxXX',
    analyticalDomain: 'https://example.com/matomo',
    texts: [{
        headline: 'Cookie settings',
        description: 'This website uses cookies to ensure you get the best experience. You can always change the use of cookies in your browser settings.',
        requiredLabel: 'Required',
        analyticalLabel: 'Analytical',
        moreLabel: 'Details about cookie usage',
        moreLink: 'https://',
        selectLabel: 'Confirm selection', 
        buttonLabel: 'Confirm all'
    },
    {
        headline: 'Cookie-Einstellungen',
        description: 'Diese Website setzt Cookies ein, um das Angebot nutzerfreundlich und funktionaler zu gestalten. Die Verwendung von Cookies können Sie in den Browser-Einstellungen jederzeit ändern.',
        requiredLabel: 'Notwendig',
        analyticalLabel: 'Statistiken',
        moreLabel: 'Details zur Cookie-Nutzung',
        moreLink: 'https://',
        selectLabel: 'Auswahl bestätigen', 
        buttonLabel: 'Alle bestätigen'
    }]
};
</script>
<script src="dist/main.js"></script>
```
To reset the cookie settings via link:
```html
<a class="cookiepleaseReset" href="#">Reset cookie settings</a>
```