Consent Manager

Installation

Step 1. Define the ConsentManagerConfig function (or object) to configure the widget:

<script type="text/javascript">
  window.ConsentManagerConfig = () => ({
    country: 'US',
    env: 'prod',
    target: '#consent-manager-widget'
  });
</script>

Step 2. Add the target container for the banner and preference center:

<div id="consent-manager-widget"></div>

Step 3. Add the widget script tag to your index.html file, after your target element and configuration snippet. The script must be loaded as an ES module:

<script type="module" src="https://consent.chick-fil-a.com/consent-manager.js"></script>

That's it! Open your site in an Incognito tab to see the cookie banner appear.

Performance Considerations

The Consent Manager Widget is designed to be easy to install, so it automatically downloads React and other dependencies on startup. This works great for most static websites, but what about websites that happen to use React?

For these sites, React dependencies would be downloaded twice, which could negactively impact performance. The Consent Manager widget supports preloading dependencies to address this scenario.

To preload dependencies, update your config to include a new dependencies object. Here's an example:

<script type="module">
  const dependencies = loadDependencies();

  window.ConsentManagerConfig = () => ({
    country: 'US',
    env: 'prod',
    target: '#root',
    dependencies,
  })

  async function loadDependencies() {
    const [react, reactDom, reactDomClient, reactJsxRuntime] = await Promise.all([
      import('https://esm.sh/react@19.2.1'),
      import('https://esm.sh/react-dom@19.2.1'),
      import('https://esm.sh/react-dom@19.2.1/client'),
      import('https://esm.sh/react@19.2.1/jsx-runtime'),
    ]);

    return {
      react,
      reactDom,
      reactDomClient,
      reactJsxRuntime,
    }
  }
</script>

Reference

SDK Methods

The window.ConsentManager object exposes a simple JavaScript SDK with the following methods:

Config Options

The window.ConsentManagerConfig property can be a config object or a function that returns a config object. The config object supports the following options:

The User interface supports the following required properties:

The Dependencies interface supports the following required properties:

The Adapter object supports the following required properties:

The CookiePreferences object is a Record<string, boolean>, where each key is a category ID and each value indicates if tracking is opted in or out.

Classes and Test IDs

A unique data-testid attribute and class is added to every consent manager component to support CSS targeting.

Note: be sure to target the attribute data-testid (e.g. [data-testid="consent-manager-modal"]) for the Test ID values listed above.