Custom Headers + Footer

If you don’t want to use the built-in, you’re free to provide completely custom headers (as JSX elements) into the header prop. CookieSelection also comes baked in with a footer prop that surfaces below the checkboxes on desktop, and below the checkboxes + buttons on mobile.


const CustomBannerHeader = () => (
    <>
        <strong>We use optional cookies to improve your experience on the site.</strong>
 
        <p>
            You can accept all cookies and continue browsing or change your
            preferences. Find all the information on the cookies used in our
            <Link href="#">cookie policy</Link>.
        </p>
    </>
);
 
const CustomSelectionHeader = () => (
    <>
        <h2>We value your privacy</h2>
        <p>
            Cookies are essential and widely used tools and allow our website to
            function correctly and efficiently, as well as providing us with
            useful information on the navigation of our users.
        </p>
        <p>
            Because we value your privacy, we ask your permission to use these
            cookies.
        </p>
    </>
);
 
const CustomSelectionFooter = () => (
    <p>
        You can find more information about the cookies used in our
        <Link href="#">cookie policy</Link>.
    </p>
);
 
const CustomGranularHeader = () => (
    <>
        <h2>We value your privacy, granularly</h2>
        <p>
            Cookies are essential and widely used tools and allow our website to
            function correctly and efficiently, as well as providing us with
            useful information on the navigation of our users. However, we
            appreciate you may not want everybody to track you, so you can
            select only the cookies you want below.
        </p>
    </>
);
 
<CookiePreferences>
    <CookieBanner
        header={<CustomBannerHeader />}
        onAcceptEverything={() => { ... }}
    />
    <CookieSelection
        header={<CustomSelectionHeader />}
        footer={<CustomSelectionFooter />}
        cookies={cookies}
        hasGranularCookies={true}
        onPreferencesChosen={(chosenCookies) => { ... }}
    />
    <GranularCookieSelection
        header={<CustomGranularHeader />}
        cookieGroups={granularCookieGroups}
        cookies={granularCookies}
        onPreferencesChosen={(chosenCookies) => { ... }}
    />
</CookiePreferences>