C15T Logo

Callbacks

Learn how to use callbacks to respond to c15t events in your Next.js application.

Implementing Callbacks

Due to the nature of Next.js App Directory, we have to define callbacks to run in a client component.

app/layout.client.tsx
'use client';

import { ConsentManagerCallbacks } from '@c15t/nextjs/client';

export function ClientLayout() {
	return (
		<ConsentManagerCallbacks
			callbacks={{
				onBannerFetched(response) {
					console.log('Consent banner fetched', response);
				},
				onConsentSet(response) {
					console.log('Consent has been saved locally', response);
				},
				onError(error) {
					console.log('Error', error);
				},
			}}
		/>
	);
}

Info

Ensure you import this component inside the ConsentManagerProvider component in your app/layout.tsx file.

app/layout.tsx
import { ConsentManagerProvider } from '@c15t/nextjs';
import { ClientLayout } from './layout.client';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider options={{
      // your options here
    }}>
      <ClientLayout />
      {children}
    </ConsentManagerProvider>
  );
}

Available callbacks

onBannerFetched

Called when the consent banner is fetched; not invoked when the banner is in offline mode.

Property
Types

onConsentSet

Called when the consent is set.

Property
Types

onError

Called when an error occurs.

Property
Types