> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hightouch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Consent Manager

> Hightouch Events Consent Manager UI

Hightouch Events offers the Consent Manager UI for managing user consent and tracking preferences. Users can opt in/out of specific categories of data collection, and those preferences are synced to your configured destinations.

## Before you begin

In order to use Consent Manager UI, you must use the Browser (Javascript) SDK snippet on your site.

Note: `e.load('WRITE_KEY')` is removed from the snippet since the Consent Manager will load the Browser SDK for you.

```html theme={null}
<!-- Hightouch Events Browser SDK snippet -->
<script type="text/javascript">
!function(){var e=window.htevents=window.htevents||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Hightouch snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"],e.factory=function(t){return function(){var n=Array.prototype.slice.call(arguments);return n.unshift(t),e.push(n),e}};for(var t=0;t<e.methods.length;t++){var n=e.methods[t];e[n]=e.factory(n)}e.load=function(t,n){var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r),e._loadOptions=n,e._writeKey=t},e.SNIPPET_VERSION="0.0.1",
e.page()}}();
</script>
```

## Installation

The Consent Manager is available via [NPM](https://npmjs.org/@ht-sdks/consent-manager). It can be installed on any site using a `<script>` tag, we also offer React support.

**HTML**

```html theme={null}
<!-- Hightouch Consent Manager configuration -->
<script>
  window.consentManagerConfig = function(exports) {
    return {
      container: '#consent-manager',
      writeKey: 'WRITE_KEY',
      shouldRequireConsent: exports.inEU // optional: require consent only for EU users
    }
  }
</script>

<!-- Hightouch Consent Manager JS -->
<script
  src="https://unpkg.com/@ht-sdks/consent-manager@0.0.1/standalone/consent-manager.js"
  defer
></script>
```

**React**

```jsx theme={null}
import React from 'react'
import { ConsentManager, openConsentManager } from '@ht-sdks/consent-manager'

export default function App() {
  return (
    <div>
      <ConsentManager writeKey="WRITE_KEY" />

      <button type="button" onClick={openConsentManager}>
        Website Data Collection Preferences
      </button>
    </div>
  )
}
```

## API

For a full list of features and options, see the [README](https://github.com/ht-sdks/consent-manager).