A simple, customizable material design cookie notification. Relies upon the MDL BigSnackbar.
Install MaterialCookies by loading the MaterialCookies.js
as well as adding BigSnackbar to your project. If you are not loading MDL, you will need the handler.js
file as well, as this upgrades the component.
<!-- import MDL -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="path_to/material-design-lite/material.min.css">
<script defer src="path_to/material-design-lite/material.min.js"></script>
<!-- import handler.js if you are not loading the MDL JS
<script defer src="path_to/handler.js"></script> -->
<!-- import Big Snackbar -->
<link rel="stylesheet" href="path_to/BigSnackbar.css">
<script defer src="path_to/BigSnackbar.js"></script>
<!-- import MaterialCookies -->
<script defer src="path_to/MaterialCookies.js"></script>
To show the cookie notification add the following JavaScript to your page:
var data = {
message: 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies',
actionText: 'Learn more',
actionHandler: function(event) {
location.href = "#privacy";
},
doneText: 'Accept',
};
MaterialCookies.init(data);
Relies upon the MDL BigSnackbar component.
<!-- import Big Snackbar -->
<link rel="stylesheet" href="path_to/BigSnackbar.css">
<script defer src="path_to/BigSnackbar.js"></script>
Requires MDL or alternatively the handler.js
<!-- import MDL -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="path_to/material-design-lite/material.min.css">
<script defer src="path_to/material-design-lite/material.min.js"></script>
<!-- or import handler.js -->
<script defer src="path_to/handler.js"></script>
The data
object is explained below:
Property | Effect | Remarks | Type |
---|---|---|---|
message | The text message to display | Required | String |
actionText | The text message to display | Required | String |
doneText | The text message to display | Required | String |
actionHandler | The text message to display | Required | Function |
delay | The amount of time in milliseconds to wait before showing the notification. | Optional (default 0) | Integer |
actionColor | Represents the CSS style color for the action text | Optional (default "#fff") | String |
doneColor | Represents the CSS style color for the done text | Optional (default "#ffe34f") | String |
cookieAge | The lifetime of the cookie in seconds that holds the users accept decision. | Optional (default 0) | Integer |