Cookie Consent
Creates a cookie consent pop up.
Usage
To apply the cookie consent component, add the data-f-cookie-consent
attribute to any element. If you apply it to the body, or through JavaScript the container will appear fixed and can be positioned via the options below or CSS.
Please note: the styles for this component will be injected by the script (so that it doesn't load CSS when cookies are already accepted).
If you have not already accepted the consent you should be able to see it below.
Example
Hello
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum voluptatem facilis delectus reiciendis ut esse, provident libero! Totam blanditiis ipsum voluptatum veritatis hic laborum, sed quidem modi facere, voluptatibus, iure inventore dolorum sint odit tenetur alias quia libero dolores sapiente. Numquam molestias delectus veniam, illo accusantium architecto quis mollitia asperiores.
Markup
<div class="f-panel f-panel-box" data-f-cookie-consent>
<h3>Hello</h3>
<p>...</p>
</div>
JavaScript options
This is an example of how to set options via attribute:
<body data-f-cookie-consent="{position:'bottom', message:'The message to show in the consent'}">...
Option | Possible value | Default | Description |
---|---|---|---|
position |
top, bottom, top-left, top-right, bottom-left, bottom-right | top | Where to show the consent box |
message |
HTML string | See above message | The message to show in the consent box |
dismiss |
string | Got it! | The dismiss message |
learnMore |
string | More info | The cookie policy link text |
link |
any URL | #null | The cookie policy link (set null or '#null' to not show) |
domain |
any domain | null | Cookie domain, defaults to current domain |
path |
any path | / | Cookie path, defaults to whole site |
expiryDays |
integer | 365 | Number of days to store the cookie |
single |
boolean | false | If set to true will only ever show one cookie box |
dismissed |
string | f-cookie-dismissed | Name of the "notice dismissed" cookie. Changing this is not recommended |
dismissOnView |
boolean | false | Dismiss the message after its first appearance. It won't be shown again, regardless of the user clicking the dismiss button |
target |
string | _self | The link target |
markup |
string, string[] | html markup | Cookie notice markup. Accepts single string or array of strings. Uses dynamic strings to add options, e.g. `{{options.message}}` |
Init element manually
let cookieConsent = FatKit.cookieConsent(element, { /* options */ });