Cookie Notice
These modular elements can be readily used and customized in every layout across pages.
Sparrow has a built-in notification component that allows users to notify cookie uses on the website. Toggle Notification
Structure
Sparrow's Cookie Notice uses Bootstrap's "Toast" feature to show the notice content. .notice
and .notice-right
classes are responsible for positioning and showing the notice as a popup. See Toasts documentation on Bootstrap.
<div class="toast bg-dark text-white shadow-none notice" role="alert" data-options='{"autoShow":true,"autoShowDelay":5000,"useCookie":true,"cookieExpireTime":10000}' data-autohide="false" aria-live="assertive" aria-atomic="true" style="max-width: 530px;">
<div class="toast-body p-4">
<!-- Your notice content -->
</div>
</div>
Options
You can pass options via data-options
through .notice
element to control it's behavior.
data-options | object |
---|---|
Example | data-options={ "autoShow": true, "autoShowDelay": 5000, "showOnce": true, "cookieExpireTime": 7200000 } |
Option | Type | Defaults | Description |
---|---|---|---|
autoShow | Boolean |
false |
Set true to make the Notice show automatically after the page is loaded. |
autoShowDelay | Number |
0 |
How much time (ms) should wait after the page is loaded before showing the Notice. Works only when the autoShow is set true |
showOnce | Boolean |
false |
The Notice will show only once - for the first time when a user view the website and remain hidden according to the cookieExpireTime number. |
cookieExpireTime | Number |
7200000 |
After how many time (ms) the cookie will expired. Count down starts after the user hits the “Close” or “OK, I UNDERSTAND” button on the cookie notice. |