Locked content
Used as locked content which can be unlocked by giving cookie consents.
Code: 🔼
Cookie consent
Used as cookie consent overlay.
The code snippet below shows how you can automatically show the Cookie Consent modal when the user has never finished setting up the cookie consents.
If the user did finish setting up the cookie consents then the Cookie Consent modal will not be shown again.
This Cookie Consent component makes use of Responder. Responder is a static web page with parent <-> child iFrame communication built in. Messages sent to Responder are stored in localStorage and can be retrieved again.
Using the CookieConsentApi you can get, delete, post your messages to Responder.
In order to remove your consents completely, to retrigger the automatic Cookie Consent modal upon revisit, you simply navigate to https://responder.vercel.app and delete your consents from that page.
import {
CookieConsentApi
} from '@fdmg/design-system/components/cookieconsent/CookieConsent';
const cookieConsentApi = new CookieConsentApi();
async function checkCookieconsent() {
// First init the Cookie Consent API.
await cookieConsentApi.init();
// Get the cookie consents from Responder.
// The event.data property follows this interface:
//
// interface MessageData {
// consents?: string[];
// method: 'GET' | 'POST' | 'DELETE';
// hostname?: string;
// timestamp?: number;
// }
const event = await cookieConsentApi.get();
// Check if the consents array exists. If it doesn't we can assume
// the user never completed the cookie consent setup and we show the
// cookie consent modal.
if (!event?.data?.consents) {
// ...
// Open the Cookie Consent modal.
// ...
}
// Check the consents
console.table(
event?.data?.consents
);
}