Cookie Notice
Falcon has a built-in notification component that allows users to notify cookie uses on the website.
Toggle NotificationStructure
Falcon's Cookie Notice uses Bootstrap's "Toast" feature to show the notice content. .notice
class is responsible for showing the notice as a popup. See Toasts documentation on Bootstrap.
<div class="toast bg-white notice" role="alert" data-options='{"autoShow":true,"autoShowDelay":0,"showOnce":true,"cookieExpireTime":7200000}' data-autohide="false" aria-live="assertive" aria-atomic="true">
<div class="toast-body d-flex justify-content-center px-5">
<!-- 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": 3000, "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. |