Cookie Consent

Creates a cookie consent pop up.


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.



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.


<div class="f-panel f-panel-box" data-f-cookie-consent>

JavaScript options

This is an example of how to set options via attribute:

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 Any HTML string See above message The message to show in the consent box
dismiss any string Got it! THe dismiss message
learnMore any 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 any integer 365 Number of days to store the cookie
single boolean false If set to true will only ever show one cookie box

Init element manually

var cookies = FatKit.cookieConsent(element, { /* options */ });