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 */ });