📘

This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation [here](https://developer.incode.com/docs/web-sdk-reference). Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade.

Full rollout to all clients still TBD.

The Consent module renders a consent form (terms text plus configurable checkboxes) and submits the user's selections. Used to capture optional or required user consents before downstream modules run.

Follows the [form-based pattern](https://developer.incode.com/docs/web-sdk-2-module-patterns#1-form-based-modules), with an additional `display` state for showing the consent text and checkboxes. See the patterns page for the shared lifecycle.

## Tag

`<incode-consent>` is a standard Web Component. Importing the UI subpath registers the custom element; importing the CSS applies the module's styles.

```ts
import '@incodetech/web/consent';
import '@incodetech/web/consent/styles.css';
```

## Properties

| Property | Type | Required | Description |
| --- | --- | --- | --- |
| `config` | `ConsentConfig` | ❌ | Configuration options |
| `onFinish` | `() => void` | ❌ | Called when consent is submitted |
| `onError` | `(error: string) => void` | ❌ | Called when an error occurs |

## Configuration

TypeScript

```typescript
type ConsentConfig = {
  combinedConsents?: string;
  consentId?: string;
};
```

| Option | Type | Required | Description |
| --- | --- | --- | --- |
| `combinedConsents` | `string` | ❌ | Identifier for a combined consents bundle from the dashboard. Backend-driven content. |
| `consentId` | `string` | ❌ | Specific consent ID to load. |

The actual consent text and checkbox definitions come from the backend (`fetchCombinedConsent`); the config just identifies which bundle to load.

## State machine

`ConsentState` is a discriminated union over `status`:

| Status | Description |
| --- | --- |
| `idle` | Initial state. |
| `loading` | Fetching consent text + checkbox definitions from the backend. |
| `display` | Rendering consents; user can toggle checkboxes. |
| `submitting` | Sending the user's selections to the backend. |
| `finished` | Terminal. |
| `error` | Fatal error. |