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.

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.