cookie-notice.js

Package to display the Pod Point EU cookie notice banner.

Installation as a Dependency

npm install --save @pod-point/cookie-notice.js

Usage

Import and use the module from npm:

import cookieNotice from '@pod-point/cookie-notice.js';

cookieNotice.init();

This will use the default locale en for the copy of the notice, as well as the main call to action button.

You can also decide to use a translated version as long, as it's supported, by passing the locale to the init() method:

cookieNotice.init({
    locale: 'no',
});

If the locale is not found, it will always fallback to the default one.

Advanced Usage

You can also optionally use the exported methods to check the status of the cookie manually:

const hasCookie = cookieNotice.hasCookie();
if (!hasCookie) {
    cookieNotice.setCookie();
}

Overwrite Notice and/or Button text

We can overwrite the translations by passing the desired values through the init() configuration arguments:

cookieNotice.init({
    notice: 'Some different notice text in English.',
    button: 'The button text',
});

If only one of the two possible overwrites is given, it will default to the translated version of the current locale. This can be combined with the locale configuration parameter. If no locale is given, it will default to English as usual.

Installation as a Snippet

You can also include this straight away in any HTML page by including the following snippet:

<script>
(function(p,o,d,e,v){
v=p.createElement(o);e=p.getElementsByTagName(o)[0];v.async=1;v.src=d;e.parentNode.insertBefore(v,e)
})(document,'script','//cdn.pod-point.com/cookie-notice/2.0.1/bundle.min.js');
</script>

Advanced Usage

This will use the default locale en. If you want to use another supported locale like no, declare it globally before loading the snippet like so:

<script>
(function(p,o,d,e,v){
window['cookie-notice.locale']='no';v=p.createElement(o);e=p.getElementsByTagName(o)[0];v.async=1;v.src=d;e.parentNode.insertBefore(v,e)
})(document,'script','//cdn.pod-point.com/cookie-notice/2.0.1/bundle.min.js');
</script>

Overwrite Notice and/or Button text

We can overwrite the translations by passing the desired values through the window object too:

<script>
(function(p,o,d,e,v){
window['cookie-notice.button']='Click!';v=p.createElement(o);e=p.getElementsByTagName(o)[0];v.async=1;v.src=d;e.parentNode.insertBefore(v,e)
})(document,'script','//cdn.pod-point.com/cookie-notice/2.0.0/bundle.min.js');
</script>

All three configuration options can be combined and used in parallele. It will behave exactly the same way as when using init().

Internationalization (i18n)

Supported languages

• en - English default
• no - Norwegian

Support a new language

1. Create a new translation file within src/lang like src/lang/fr.js for example.
2. Make sure it follow the same format as the English one en.js.
3. Make sure you load it through src/lang/index.js, just like any other language.
4. That's it, you can now use init({ locale: 'fr' }) from a JavaScript file or window['cookie-notice.locale']='fr'; from an HTML file including the snippet.

Deployment

To publish a new version to NPM and our CDN run the following commands:

npm version [major|minor|patch]
git push

Once your PR is merged, create a new Release from Github with the same tag name (major, minor, patch).

Whenever a tagged commit gets created with a new version, Travis CI will make sure to distribute the updated files to both our S3 CDN and the NPM repository.