Socket
Book a DemoInstallSign in
Socket

@canonical/cookie-policy

Package Overview
Dependencies
Maintainers
14
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@canonical/cookie-policy

A script and style sheet that displays a cookie policy notification

3.6.5
latest
Source
npmnpm
Version published
Maintainers
14
Created
Source

This project contains the scripts and styles to display a cookie policy notification on a web page.

You can use it to display a custom cookies message of your choosing on your own web page.

Usage

This project can be installed via an NPM package.

yarn add @canonical/cookie-policy

...or...

npm install @canonical/cookie-policy

You can then install the library either by directly linking to it or via an ES6 import.

  • Via direct link

To consume the library directly, add a link to the JS file containing an IIFE and call the lib:

<script src="[ INSERT YOUR LOCAL PATH ]/js/cookie-policy.js"></script>
<script>
  cpNs.cookiePolicy();
</script>
  • Via ES6 import
import { cookiePolicy } from '@canonical/cookie-policy';

If you would like users to change their preferences you can add js-revoke-cookie-manager class to any element that is present in the document to recall the policy manager.

<button class="js-revoke-cookie-manager">Revoke cookie manager</button>

or

<a href="" class="js-revoke-cookie-manager">Revoke cookie manager</a>

Visiting a page with tracker disabled

If you add the query ?cp=hide to any URL the cookie policy will not be rendered. The main use case is to visit the policy page without the modal blocking the content.

Callback hook

You can set up the cookie policy with a callback when a preference is selected.

function callbackFunction() {
  alert('Calling back');
}
cpNs.cookiePolicy(callbackFunction);

Full example via ES6 import

import { cookiePolicy } from '@canonical/cookie-policy';

cookiePolicy();

Essential cookies are always allowed, unless the user turns them off in their browser. Otherwise, there will be a series of values the _cookies_accepted cookie can contain :

Cookie valueDescriptionNote
allAll cookies accepted by the user. Currently used by the existing widgetPrevious value was true. Using the same cookie.
essentialEssential cookies accepted.This is used to hide the notification instead of not setting the cookie
performancePerformance cookies accepted.-
functionalityFunctionality cookies accepted.-

Contributing

If you would like to help improve this project, here is a list of commands to help you get started.

Install the requisite dependencies;

npm install

To build the JS and CSS into the build folder, run:

npm run build

You can view the build files in action by running:

npm run serve

And, visiting http://0.0.0.0:8301/

Hacking

When developing this project you can run the following command to listen to changes in the src/js/*js and src/sass/*scss folders and build them into the /build folder.

npm run watch

Before submitting your pull request, run the linters, which checks both the JS and Sass for errors.

npm run test

Code licensed LGPLv3 by Canonical Ltd.

With ♥ from Canonical

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.