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":7200000}' 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. |
