Orejime Consent Manager

For content like YouTube iframes that are restricted by consent, use the data-contextual attribute on the <template> tag. This displays a fallback notice with a reason and a way to consent in place, rather than showing nothing.

You can also customize the heading level of the notice's title using the data-title-level attribute on the template.

<!-- Contextual notice for YouTube -->
<template data-purpose="youtube" data-contextual data-title-level="6">
  <iframe src="https://www.youtube.com/embed/toto"></iframe>
</template>

To prevent scripts from executing before user consent, wrap them in a <template> tag with a data-purpose attribute matching an id defined in your purposes configuration. Orejime will automatically load these elements once the corresponding consent is granted.

You can wrap single scripts or multiple elements (like <iframe> or multiple <script> tags) within a single template.

<!-- Single script -->
<template data-purpose="google-tag-manager">
  <script>
    (function(w,d,s,l,i){/* ... */})(window,document,'script','dataLayer','GTM-XXXX')
  </script>
</template>

<!-- Multiple elements -->
<template data-purpose="ads">
  <script src="https://annoying-ads.net"></script>
  <iframe src="https://streaming.ads-24-7.com/orejime"></iframe>
</template>

Orejime is distributed as individual modules following the convention orejime-[THEME]-[LANGUAGE].

CDN Method

The easiest way is to import a distribution via jsDelivr. It is recommended to use a fixed version instead of @latest to avoid breaking changes.

npm Method

Orejime distributes built files via npm. After installation, you can find the required JS and CSS files in the dist folder.

Note: As of version 3, Orejime provides standalone builds only and cannot be bundled as a standard module.

<!-- CDN Example -->
<script src="https://cdn.jsdelivr.net/npm/orejime@3.0.0/dist/orejime-standard-en.js"></script>
<link href="https://cdn.jsdelivr.net/npm/orejime@3.0.0/dist/orejime-standard.css" rel="stylesheet" />

npm install orejime

Standard Theme

The standard theme can be customized using CSS variables on the .orejime-Env class.

DSFR Theme

The DSFR theme is designed for the French government's design system. It does not provide its own styles but uses the correct markup and class names to integrate with existing DSFR styles.

/* Customizing the Standard Theme */
.orejime-Env {
  --orejime-font-family: monospace;
  --orejime-color-background: black;
  --orejime-color-text: yellow;
}

Instead of loading multiple chunks for the core, UI, and language files, you can use standalone packages that bundle everything together. This approach is more optimized for websites using a single theme and a single language, as it reduces network requests and allows for better compression.

Each standalone package provides a specific combination of a theme and a language. For example, if you want to use the DSFR theme with English translations, you would install and use the orejime-dsfr-en package.

To contribute to Orejime or create a custom build, follow these steps:

1. Clone the repository.
2. Install dependencies: npm install.
3. Start the development server: npm run serve.
4. Access the demo at http://localhost:3000. The page will automatically reload on JS or CSS changes.

Version 3 introduced a major overhaul of the configuration to align with GDPR vocabulary.

Configuration Changes: If you are upgrading from version 2, use the migration tool at https://orejime.boscop.fr/#migration to update your configuration object.

Third-party Scripts Changes: In version 3, you no longer need to modify third-party <script> tags with custom attributes. Instead, leave the scripts untouched and wrap them in a <template> tag with a data-purpose attribute.

When defining a Purpose, you must specify which cookies it covers using the PurposeCookie type. A cookie can be identified in three ways:

1. A string: The exact name of the cookie.
2. A RegExp: A regular expression to match cookie names.
3. PurposeCookieProps: A tuple [pattern: RegExp, path: string, domain: string] for precise matching including path and domain constraints.

export type PurposeCookie = string | RegExp | PurposeCookieProps;

// Example usage:
const analyticsPurpose: Purpose = {
  id: 'analytics',
  cookies: [
    'ga_session',
    /^_ga/, // Matches any cookie starting with _ga
    [/^analytics_/, '/app', 'example.com'] // Precise tuple matching
  ]
};

Orejime uses a hierarchical structure to organize cookie purposes. You can provide a PurposeList, which is an array containing either Purpose objects or PurposeGroup objects.

• Purpose: Represents a specific cookie usage category. It extends the core Purpose type and adds a UI-specific id, title, and optional description.
• PurposeGroup: A container for multiple Purpose objects, allowing you to group related categories under a single id, title, and optional description.

// Example of a PurposeList structure
const purposes: PurposeList = [
  {
    id: 'group-1',
    title: 'Marketing',
    purposes: [
      { id: 'ad-tracking', title: 'Ad Tracking', description: 'Used for ads' }
    ]
  },
  {
    id: 'essential',
    title: 'Essential Cookies'
  }
];

A ConsentsMap is a dictionary representing the current consent state for all defined purposes. The keys are the ids of the Purpose objects, and the values are booleans indicating whether consent has been granted (true) or denied (false).

export type ConsentsMap = {[id: Purpose['id']]: boolean};

// Example:
const currentConsents: ConsentsMap = {
  'analytics': true,
  'marketing': false,
  'essential': true
};