<ConsentManager> Component

A GDPR-compliant consent manager, integrated with segment.

Share
Code Editor
<ConsentManager
version={1}
segmentWriteKey='iyi06c432UL7SB1r3fQReec4bNwFyzkW'
privacyPolicyLink='https://www.hashicorp.com/privacy'
cookiePolicyLink='https://www.hashicorp.com/cookies'
segmentServices={[
{
name: 'Example Name',
category: 'Example Category',
description:
'A short description of what the service is and how your company uses the data.',
},
]}
additionalServices={[
{
name: 'Name of the service',
category: 'Example Category',
description:
'A short description of what the service is and how your company uses the data.',
body:
'/* a chunk of javascript to add to the page if permission is granted - this is optional */',
url: 'http://www.an-optional-url-for-a-script-to-add-to-the-page.com',
},
{
name: 'Name of the service 2',
category: 'Example Category',
description: 'A script with additional elements to be injected',
body: '',
url: 'https://source-url-of-script.com',
async: true,
addToBody: true,
dataAttrs: [
{
name: 'test',
value: 'foobar',
},
],
},
]}
categories={[
{
name: 'Example Category',
description: 'A short description of the category',
},
]}
forceShow={true}
/>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...
8.x.x
Loading 8.x.x releases...

Props

NameDescription
version*
string
bump this number when services have changed to "reset" the consent manager and prompt for consent again
privacyPolicyLink*
string
a link to the company's privacy policy page
cookiePolicyLink*
string
a link to the company's cookie policy page
segmentWriteKey*
string
segment.io write key
forceShow
boolean
Useful for development, setting this to true will always show the consent bar even if a cookie with existing preferences is stored
segmentServices
array
use this to override the category or description of a service provided by Segment
Array members must be of the type below:
segmentServices[x]
object
Object contains nested props, see below:
segmentServices[x].name
string
name of the service - must exactly match the name returned from the segment API
segmentServices[x].category
string
name of the category you want the integration to appear within - must match the name of a category defined in the categories prop
segmentServices[x].description
string
description of the service, overrides the default description returned from segment
categories
array
categories in which various services reside. entire categories can be toggled on or off
Array members must be of the type below:
categories[x]
object
Object contains nested props, see below:
categories[x].name
string
name of the category as it appears in the consent manager interface
categories[x].description
string
description of the category as it appears in the consent manager interface
additionalServices
array
Additional integrations outside of Segment that you wish to include in the consent manager can be added using this prop. They are injected using a <script> tag, which can be controlled via the props below.
Array members must be of the type below:
additionalServices[x]
object
Object contains nested props, see below:
additionalServices[x].name
string
name of the integration as it appears in the interface
additionalServices[x].description
string
description of the integration as it appears in the interface
additionalServices[x].category
string
category the integration should be part of. must exactly match a category defined in the categories prop
additionalServices[x].body
string
This and all the following props are optional. If adding a script, the contents of the script can be defined using this prop, and it will be dropped into a <script> tag on the page
additionalServices[x].url
string
If linkng to a script that lives at a URL, the url can be defined using this prop and it will be loaded in via <script> tag
additionalServices[x].async
boolean
If defining a script using body or url, setting this prop to true will add the async attribute to the script tag.
additionalServices[x].strategy
string
Loading strategy to use for the script, see https://nextjs.org/docs/basic-features/script
additionalServices[x].addToBody
boolean
scripts are added to the <head> by default, but if this prop is set to true it will instead be added to <body>
additionalServices[x].dataAttrs
object
this prop can be used to place data attributes on the script tag
Object contains nested props, see below:
additionalServices[x].dataAttrs.name
string
name of the data attribute - no need to prefix with data-
additionalServices[x].dataAttrs.value
string
value of the data attribute
className
string
Optional className to add to the root element
onManagePreferences
function
Optional callback event that fires when users clicks Manage Preferences
onAcceptAll
function
Optional callback event that fires when users clicks Accept.