---
title: "Callbacks"
description: "Learn how to use callbacks to respond to c15t events in your Next.js application."
lastModified: 2025-08-20
availableIn:
  - framework: 'next'
    url: '/docs/frameworks/next/callbacks'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/callbacks'
    title: 'React'
---
## Implementing Callbacks

**App Directory**

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

```ts title="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.

```ts title="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>
  );
}
```

**Pages Directory**

```ts title="pages/_app.tsx"
import { ConsentManagerProvider } from '@c15t/nextjs/pages';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
return (
<ConsentManagerProvider options={{
  callbacks: {
    onBannerFetched(response) {
      console.log('Consent banner fetched', response);
    },
    onConsentSet(response) {
      console.log('Consent has been saved', response);
    },
    onError(error) {
      console.log('Error', error);
    },
  }
}}>
  <Component {...pageProps} />
</ConsentManagerProvider>
);
}

```

## Available callbacks

### onBannerFetched

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

| Property               | Type                   | Description                           | Default |  Required  |
| :--------------------- | :--------------------- | :------------------------------------ | :------ | :--------: |
| OnBannerFetchedPayload | OnBannerFetchedPayload | Type alias for OnBannerFetchedPayload | -       | ✅ Required |

### onConsentSet

Called when the consent is set.

| Property            | Type                | Description                        | Default |  Required  |
| :------------------ | :------------------ | :--------------------------------- | :------ | :--------: |
| OnConsentSetPayload | OnConsentSetPayload | Type alias for OnConsentSetPayload | -       | ✅ Required |

### onError

Called when an error occurs.

| Property       | Type           | Description                   | Default |  Required  |
| :------------- | :------------- | :---------------------------- | :------ | :--------: |
| OnErrorPayload | OnErrorPayload | Type alias for OnErrorPayload | -       | ✅ Required |