Consent Manager

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.

Prerequisites

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.

<!-- 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. It can be installed on any site using a <script> tag, we also offer React support.

<!-- 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>

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.