<ConsentManager>
ComponentA GDPR-compliant consent manager, integrated with segment.
<ConsentManagerversion={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}/>
Name | Description |
---|---|
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. |