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/[email protected]'),
      import('https://esm.sh/[email protected]'),
      import('https://esm.sh/[email protected]/client'),
      import('https://esm.sh/[email protected]/jsx-runtime'),
    ]);

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

Reference

SDK Methods

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

Installation Options

The window.ConsentManagerConfig property is used to configure the installation for your website. It can be a Config object or a function that returns one.

The Config object supports the following properties:

The User object supports the following required properties:

The Dependencies object 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

You can customize the banner and preference center appearance using CSS. Each element has a data-testid attribute and class that are easy to target in your stylesheet.

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

Server-Side Configuration

The Consent Manager's behavior, categories, and text are configured by a LaunchDarkly flag named consent-manager-config. LaunchDarkly's advanced targeting allows different configuration options to be specified based on website context, such as country, environment, is_webview, etc.

The flag value is a single JSON object. It supports the following top-level properties:

Banner

Behaviors

Category

Each entry describes one togglable cookie category in the preference center.

Preference Center

Rich Content

The banner.content, optOutSignal.content, and preferenceCenter.aboutContent properties all accept RichContent, which is either:

• A plain string
• An array of string values and/or TextBlock objects.

Each TextBlock supports:

Example variation

{
  "enabled": true,
  "banner": {
    "content": [
      "We use cookies to give you the best experience on our site. ",
      { "type": "text", "text": "Learn more", "href": "https://www.chick-fil-a.com/privacy" },
      "."
    ],
    "acceptAllLabel": "Accept All",
    "rejectAllLabel": "Reject All",
    "openPreferencesLabel": "Cookie Settings"
  },
  "behaviors": {
    "displayBanner": "initially",
    "outsideClick": "dismiss",
    "requireConsent": true
  },
  "categories": [
    {
      "groupId": "C0001",
      "name": "Strictly Necessary Cookies",
      "description": "These cookies are required for the site to function.",
      "alwaysActive": true
    },
    {
      "groupId": "C0002",
      "name": "Performance Cookies",
      "description": "These cookies help us measure and improve site performance.",
      "honorsGpcSignal": true
    }
  ],
  "optOutSignal": {
    "content": "Your browser is sending a Global Privacy Control signal. We've automatically opted you out of non-essential cookies."
  },
  "preferenceCenter": {
    "title": "Cookie Preferences",
    "aboutContent": ["When you visit our site, we may store or retrieve information on your browser…"],
    "aboutLabel": "About Cookies",
    "aboutLink": { "text": "Privacy Policy", "href": "https://www.chick-fil-a.com/privacy" },
    "alwaysActiveLabel": "Always Active",
    "acceptAllLabel": "Accept All",
    "rejectAllLabel": "Reject All",
    "saveLabel": "Confirm My Choices"
  }
}