---
title: "Internationalization (i18n)"
description: "Learn how to add translations to your Consent Manager."
lastModified: 2025-08-20
availableIn:
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/internationalization'
    title: 'JavaScript'
  - framework: 'next'
    url: '/docs/frameworks/next/internationalization'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/internationalization'
    title: 'React'
---
## Overview

c15t supports internationalization (i18n) through the `translations` property in the `ConsentManagerOptions` object and has support for both server-side and client-side rendering.

| Server-side                                                                                                                                                                                                                                                                                                                                                                     | Client-side                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| The best way to reduce bundle size and improve performance. We can detect the user's language based on the browser's language settings, allowing for the most accurate translations. By default, when using a [consent.io](https://consent.io) hosted instance, [these languages](https://github.com/c15t/c15t/tree/main/packages/translations/src/translations) are supported. | Bundled with the application allowing for multiple languages to be supported without the need for a backend. The more translations you have, the larger the bundle size will be, which may impact the performance of your application. |

c15t supports partial translations, letting you supply only the changed keys without passing the whole translations object. When a requested language isn't available, the system falls back to the configured default/base language. Client-side translations take precedence over server-side translations, so client values override server values.

## Implementation

Pass the `translations` object in your `ConsentManagerProvider` options to configure the translations for your application.

```tsx title="app/layout.tsx"
import { ConsentManagerProvider } from '@c15t/react';

export default function Layout({ children }: { children: React.ReactNode }) {
	return (
		<ConsentManagerProvider options={{
        // ... rest of your config
  translations: {
    defaultLanguage: 'en',
        translations: {
    en: {
      common: {
        acceptAll: 'Accept all',
      },
      cookieBanner: {
        title: 'Cookie Banner',
        description: 'This is a cookie banner',
            },
      },
    },
  },
    }}>
			{children}
		</ConsentManagerProvider>
	);
}
```

## Types

### TranslationConfig

| Property    | Value                                    |
| :---------- | :--------------------------------------- |
| Type Name   | \`TranslationConfig\`                    |
| Source Path | \`./packages/translations/src/index.ts\` |

\*AutoTypeTable: Could not extract \`TranslationConfig\` from \`./packages/translations/src/index.ts\`. Verify the path/name and that the file is included by your tsconfig.\*

### Translations

| Property             | Type                                                                                                                                                                                                                                                                                                                    | Description | Default |  Required  |
| :------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- | :------ | :--------: |
| common               | Partial\<CommonTranslations>                                                                                                                                                                                                                                                                                            |             | -       | ✅ Required |
| cookieBanner         | Partial\<CookieBannerTranslations>                                                                                                                                                                                                                                                                                      |             | -       | ✅ Required |
| consentManagerDialog | Partial\<ConsentManagerDialogTranslations>                                                                                                                                                                                                                                                                              |             | -       | ✅ Required |
| consentTypes         | \{ experience?: Partial\<ConsentTypeTranslations> \| undefined; functionality?: Partial\<ConsentTypeTranslations> \| undefined; marketing?: Partial\<ConsentTypeTranslations> \| undefined; measurement?: Partial\<ConsentTypeTranslations> \| undefined; necessary?: Partial\<ConsentTypeTranslations> \| undefined; } |             | -       | ✅ Required |
| frame                | Partial\<FrameTranslations> \| undefined                                                                                                                                                                                                                                                                                |             | -       |  Optional  |
| legalLinks           | Partial\<LegalLinksTranslations> \| undefined                                                                                                                                                                                                                                                                           |             | -       |  Optional  |

### CommonTranslations

| Property  | Type   | Description | Default |  Required  |
| :-------- | :----- | :---------- | :------ | :--------: |
| acceptAll | string |             | -       | ✅ Required |
| rejectAll | string |             | -       | ✅ Required |
| customize | string |             | -       | ✅ Required |
| save      | string |             | -       | ✅ Required |

### CookieBannerTranslations

| Property    | Type   | Description | Default |  Required  |
| :---------- | :----- | :---------- | :------ | :--------: |
| title       | string |             | -       | ✅ Required |
| description | string |             | -       | ✅ Required |

### ConsentManagerDialogTranslations

| Property    | Type   | Description | Default |  Required  |
| :---------- | :----- | :---------- | :------ | :--------: |
| title       | string |             | -       | ✅ Required |
| description | string |             | -       | ✅ Required |

### ConsentTypeTranslations

| Property    | Type   | Description | Default |  Required  |
| :---------- | :----- | :---------- | :------ | :--------: |
| title       | string |             | -       | ✅ Required |
| description | string |             | -       | ✅ Required |