angular-cookie-law
angular-cookie-law copied to clipboard
Angular Cookie Law is an angular directive that allows your angular application to comply the european cookie law by informing users that your site has cookies. Also provide a service to lock scripts...
Angular Cookie Law
Angular cookie law provides:
- a directive for a popup banner that informs users about cookies
- a directive that blocks some code or another directive until cookies are accepted
- a service to block external services (eg. YouTube, Facebook) until cookies are accepted
Install
You can install this package with npm
.
npm
npm i @palmabit/angular-cookie-law --save
Add a <script>
and <style>
to your index.html
:
<link rel="stylesheet" href="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.css">
<script src="/node_modules/angular-cookie-law/dist/angular-cookie-law.min.js"></script>
Usage
First, you need to inject angular-cookie-law
into your angular module.
angular.module('myApp', ['angular-cookie-law']);
CookieLawBanner directive
You could insert this directive at the beginning of <body>
tag.
<cookie-law-banner position="top" message="Your custom message" policy-url="http://link-to-your-policy"></cookie-law-banner>
This directive creates a banner that informs users about cookies that contains a button to accept them.
Options
From version 0.2.0, all banner texts are refreshed if one of these attributes change: message, acceptText, declineText, policyText, policyURL.
position
position: 'top'
Position of the banner (variants: "top", "bottom". default: "top").
message
message: 'Your custom message'
The message to be shown with banner (default: "We use cookies to track usage and preferences").
acceptButton
acceptButton: true
Show or hide accept button (default: true).
acceptText
acceptText: 'Your custom text'
The text for accept button (default: "I Understand").
declineButton
declineButton: false
Show or hide decline button (default: false).
declineText
declineText: 'Your custom text'
The text for decline button (default: "Disable Cookies").
policyButton
policyButton: false
Show or hide policy link button (default: false).
policyText
policyText: 'Your custom text'
The text for policy link button (default: "Privacy Policy").
policyURL
policyURL: '/privacy-policy/'
The URL to show privacy policy (default: "/privacy-policy/").
policyBlank
policyBlank: false
Set true to open privacy policy page in other tab (default: false).
expireDays
expireDays: 365
Days number for the accept cookie expiration (default: 365).
element
element: 'body'
Element to append/prepend cookieBar to. Remember .
for class or #
for id. (default: "body").
CookieLawWait directive
<cookie-law-wait>
<div>...</div>
</cookie-law-wait>
The divs
inside <cookie-law-wait>
directive is loaded only after cookies are accepted.
CookieLawService
This service provides a function to know if cookies are accepted.
First, you need to inject CookieLawService
into your angular controller or directive.
angular.module('myApp').controller('MyCtrl', ['CookieLawService']);
isEnabled
This function tells you if cookies are accepted.
CookieLawService.isEnabled(); //true or false
Events
Accept event
The event cookieLaw.accept
is triggered when cookies are accepted.
$scope.$on('cookieLaw.accept', function() {
//callback function
});
Dismiss event
The event cookieLaw.dismiss
is triggered when cookies banner is closed.
$scope.$on('cookieLaw.dismiss', function() {
//callback function
});
Decline event
The event cookieLaw.decline
is triggered when cookies are declined.
$scope.$on('cookieLaw.decline', function() {
//callback function
});
Change the name of the cookie
To change the name of the cookie, simply add the following line to your code.
angular.module('angular-cookie-law').value('cookieLawName', 'cookieMessage');
Author
License
The MIT License (MIT). Please see License File for more information.