CookiePreferences

An organism to build out a CookiePreferences widget

Full API

CookiePreferences has two properties that you should take note of:

initialDisplayMode: Defines the current screen that the cookie preferences organism should load to. This can be set based on whether the customers have something set to indicate their cookie preference, usually in a cookie, so when they re-open the cookie preferences (if showEditButton is set to true), the banner can open to the correct screen.
showEditButton: Add a persistent ‘Cookie Settings’ button so that customers can change their cookie preferences after the banner has been dismissed.

Name	Type	Default
`children`	`React.ReactNode`
`initialDisplayMode`	`CookiePreferencesDisplayMode` Define the screen that the cookie preferences organism should load to when rendered or when the edit button is clicked.
`showEditButton`	`boolean` Show the edit button in the bottom right of the screen.	`false`
`editButtonText`	`string` The text to display on the edit button.	`'Cooking settings'`
`editButtonScreen`	`CookiePreferencesDisplayMode` The cookie screen that the edit button should load to when clicked.	`selection`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`

You can stand up a default cookie banner as below.


import { CookiePreferences, CookieBanner, CookieSelection } from '@krakentech/coral';
 
const cookies = [
    {
        disabled: true,
        isCheckedByDefault: true,
        label: 'Essential',
        id: 'essential',
        tooltip:
            "These ones are required, and without them turned on, welp, our site just wouldn't work!",
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Analytics & customisation',
        id: 'analytics',
        tooltip:
            'These ones help us understand how customers are using our site. They help us build better features and tailor our content for different people.',
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Marketing & social media',
        id: 'marketing'
        tooltip:
            'These ones help us reach you on social media or other websites to help you with queries or present relevant offers.',
    }
];
 
<CookiePreferences>
    <CookieBanner
        onAcceptEverything={() => {
            // Your custom code that sets the tracking scripts to load
        }}
    />
    <CookieSelection
        onPreferencesChosen={(chosenCookies) => {
            // Your custom code that loops each chosen cookie, then sets the tracking scripts to load
        }}
        cookies={cookies}
    />
</CookiePreferences>

Granular Example

You can also add an additional step after Fine tune that allows you to manually specify granular selection of specific vendors.


import { CookiePreferences, CookieBanner, CookieSelection, GranularCookieSelection } from '@krakentech/coral';
 
const cookies = [ ... ];
 
const granularCookieGroups = cookies
    // Filter any disabled groups as customers cannot modify these, anyway. You can opt to include them, still, by adding them to the granularCookies object and marking them as disabled and isCheckedByDefault
    .filter((value) => !value.disabled)
    // Note the key is value and not id, as this maps internally to a SelectOption
    .map((value) => ({
        label: value.label,
        value: value.id,
    }));
 
const granularCookies = [
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Google',
        id: 'google',
        group: 'analytics',
        tooltip: "Allow cookies from Google's tracking services",
    },
    {
        disabled: false,
        isCheckedByDefault: false,
        label: 'Hubspot',
        id: 'hubspot',
        group: 'marketing',
        tooltip: "Allow cookies from Hubspot's tracking services",
    }
];
 
<CookiePreferences>
    <CookieBanner
        onAcceptEverything={() => {
            // Your custom code that sets the tracking scripts to load
        }}
    />
    <CookieSelection
        onPreferencesChosen={(chosenCookies) => {
            // Your custom code that loops each chosen cookie, then sets the tracking scripts to load
        }}
        cookies={cookies}
        hasGranularCookies={true}
    />
    <GranularCookieSelection
        onPreferencesChosen={(chosenCookies) => {
            // Your custom code that loops each chosen cookie, then sets the tracking scripts to load
        }}
        cookieGroups={granularCookieGroups}
        cookies={granularCookies}
    />
</CookiePreferences>

Closed by default

You can opt to pass closed into initialDisplayMode to prevent the banner showing by default, then make use of showEditButton to add a button to the bottom left of the screen for the customer to manage their cookie settings at all times.


import { CookiePreferences, CookieBanner, CookieSelection } from '@krakentech/coral';
 
const cookies = [ ... ];
 
<CookiePreferences
    initialDisplayMode="closed"
    showEditButton
    editButtonScreen="selection"
>
    <CookieBanner
        onAcceptEverything={() => { ... }}
    />
    <CookieSelection
        onPreferencesChosen={(chosenCookies) => { ... }}
        cookies={cookies}
    />
</CookiePreferences>

Customisation

The CookiePreferences organism is extremely flexible. Once you have your basic integration installed, you can internationalize, add custom headers + footers, and even create fully bespoke preferences utilising the built in React Context.