> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/chord-oms/developer-tools/next-js/guides/installing-segments-consent-manager-in-next-js.md).

# Installing Segment's Consent Manager in Next.js

Chord's [Next.js starter kit](https://github.com/chordcommerce/nextjs-starter-autonomy) uses the `ConsentManager` React component. It comes with a fully built UI for selecting data collection preferences:

![](https://3559351341-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGejRW1RLC9yasX56Xzxu%2Fuploads%2Fgit-blob-6eac8272f6f522f3de3baccbbedba2309b442729%2Finstalling-segments-consent-manager-in-nextjs-1.png?alt=media)

If you prefer to build a custom UI, you can use the `ConsentManagerBuilder` component. View the [Github repo](https://github.com/segmentio/consent-manager) for complete installation instructions.

## Installing the package

First, verify you have Segment's Analytics.js installed. Segment's npm package `@segment/analytics-next` is [not currently compatible](https://github.com/segmentio/consent-manager/issues/193) with the Consent Manager, so you'll need to install Segment via snippet.

Next, install the `@segment/consent-manager` package:

{% tabs %}
{% tab title="yarn" %}

```shell
yarn add @segment/consent-manager
```

{% endtab %}

{% tab title="npm" %}

```shell
npm install @segment/consent-manager
```

{% endtab %}
{% endtabs %}

Be sure to remove `analytics.load("YOUR_WRITE_KEY")` from your site code, so the Consent Manager can handle loading.

## Adding the `ConsentManager` React component

Chord's Next.js starter includes a [ConsentManagerWrapper](https://github.com/chordcommerce/nextjs-starter-autonomy/blob/main/src/components/Segment/ConsentManager/index.jsx) component. This component is responsible for configuring and rendering a banner (or pop-up, depending on your level of customization) that will offer users an option to opt in or out of tracking. To customize the look and behavior of the Consent Manager, change various properties on the `ConsentManager` component (full reference [here](https://github.com/segmentio/consent-manager#consentmanager-props)).

{% hint style="info" %}
Please note that the Consent Manager banner in the starter is shown automatically for visitors from the EU. Please refer to the `shouldRequireConsent` method of the component to alter that behavior. You can decide to show the banner for all visitors, regardless of their actual location, by configuring the `SEGMENT_SHOULD_REQUIRE_CONSENT` environment variable to `true` in your `.env` file.
{% endhint %}

The `ConsentManagerWrapper` component wraps the root page element of the starter in [`_app.js`](https://github.com/chordcommerce/nextjs-starter-autonomy/blob/main/pages/_app.js). The starter also includes an [example](https://github.com/chordcommerce/nextjs-starter-autonomy/blob/main/src/components/Footer/Legal/index.jsx) of a link that will open the Consent Manager pop-up.

{% hint style="success" %}
if you have any questions or need help, please reach out to us at <help@chord.co>
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.chord.co/chord-oms/developer-tools/next-js/guides/installing-segments-consent-manager-in-next-js.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.