Internationalization (i18n)

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 hosted instance, these languages 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

You can pass the translations object in your ConsentManagerOptions object to configure the translations for your application.

import { configureConsentManager, type ConsentManagerOptions } from 'c15t';

const c15tConfig: ConsentManagerOptions = {
  // ... rest of your config
  translations: {
    defaultLanguage: 'en', // Optional: The default language to use if the browser's language is not supported.
    translations: {
      en: {
        common: {
          acceptAll: 'Accept all',
        },
        cookieBanner: {
          title: 'Cookie Banner',
          description: 'This is a cookie banner',
        },
      },
    },
  },
};

const c15t = configureConsentManager(c15tConfig);

Types

TranslationConfig

./translation-types.mdx

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 hosted instance, these languages 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.

Implementation

You can pass the translations object in your ConsentManagerOptions object to configure the translations for your application.

import { configureConsentManager, type ConsentManagerOptions } from 'c15t';

const c15tConfig: ConsentManagerOptions = {
  // ... rest of your config
  translations: {
    defaultLanguage: 'en', // Optional: The default language to use if the browser's language is not supported.
    translations: {
      en: {
        common: {
          acceptAll: 'Accept all',
        },
        cookieBanner: {
          title: 'Cookie Banner',
          description: 'This is a cookie banner',
        },
      },
    },
  },
};

const c15t = configureConsentManager(c15tConfig);