---
Source: https://docs.microblink.com/platform/sdk/web/configuration
Title: Configuration
Description: Configuration options and settings for Microblink Platform Web SDK
---

# Configuration

The web SDK is configured through the main configuration object: the [IdvFlowProps](/platform-web-sdk/types#idvflowprops) type.

In React, it's exposed as the `IdvFlow` component. 
In vanilla JavaScript, it's exposed by the `createIdvFlow` function.

See the [quickstart](./quickstart.md) to understand how to import and invoke these functions.

## Configuration object

The basic configuration object looks like this:

```js
{
  apiConfig: {},
  consentData: {},
  enableD2D: false,
  endResultScreen: () => {},
  mode: "classic",
  onAbort: (),
  onCardScanResult: (),
  onError: (),
  onTransactionFinished: (),
  progressScreen: () => {},
  resourcesPath: "...",
  scanTimeout: 60000,
  startScreen: () => {},
  themeOverride: {},
  translationsOverride: {}
}
```

## Required fields

You must set the following fields.
Other fields are optional and are described in the [Optional fields](#optional-fields) section.

### `apiConfig`

```js
{
  apiConfig: {
    proxy: {
      baseUrl: "https://your.proxy.server"
    },
    workflowId: "example123",
  }
}
```

This field holds configuration options for how the SDK communicates with the Platform API.
There are two different objects that you can use for it: a [ProxyConfig](/platform-web-sdk/types#proxyconfig) object or a [TransactionConfig](/platform-web-sdk/types#transactionconfig) object.


#### When creating new transactions

Use the ProxyConfig format when you're initiating new transactions:

```js
{
  // Only proxy and workflowId are required:
  //highlight-start
  proxy: {
    baseUrl: "https://your.proxy.server"
  },
  workflowId: "example123",
  //highlight-end
  d2d: {
    joinKey: "...",
    runAddress: "..."
  },
  formValues: {
    foo: "bar"
  },
  headers: {
    "X-custom-header": "some-custom-value"
  }
}
```

##### `workflowId`

This is the ID of your workflow.
You can get the `workflowId` from the [Platform dashboard](../../build-workflow.md).

##### `proxy.baseUrl`

The `proxy.baseUrl` value depends on how you have configured your [proxy](../../proxy.md) service.
By default, the web SDK will append "/transaction" to the value in `baseUrl` when creating new transactions.
If you're using [our proxy](https://github.com/MicroblinkPlatform/microblink-platform-transaction-proxy) (latest version), you don't need to change anything.

If using something else, make sure that your proxy expects the path configured by the SDK.

  
#### When continuing existing transactions

Use TransactionConfig when you're resuming existing transactions (transactions that have an existing transaction ID).
For example, when using your own [D2D](./d2d.md) or [verification links](../../api/verification-links.md) infrastructure.

```js
{
  apiUrl: "https://api.{your_region}.platform.microblink.com/edge",
  ephemeralKey: "...",
  transactionId: "...",
  d2d: {
    joinKey: "...",
    runAddress: "..."
  }
}
```

---

### `consentData`

Consent data is a mandatory field where you provide a **unique user identifier**, and the user's consent to process their data.
You provide the consent by setting the `isProcessingStoringAllowed` flag to `true`.
If it is not set, we will show our own consent form to the user.
If they reject, the transaction will be abandoned.

:::danger[Never reuse user IDs]

Never reuse the same user ID for multiple users.

Each consent to process someone's personal data **must** be accompanied by a **unique identifier** that can be used to associate this consent with the person who gave it.

:::


```js
{
  consentData: {
    // User ID is required
    //highlight-start
    userId: "...",
    //highlight-end
    givenOn: "2026-03-11T14:23:00.000Z",
    isProcessingStoringAllowed: true,
    isTrainingAllowed: true,
    note: "..."
  }
}
```

---

## Optional fields

### D2D-related fields

```js
{
  mode: "d2d", // or "classic" (default)
  enableD2D: true, // default is false
  scanTimeout: 60000
}
```

By setting `mode` and `enableD2D`, you can configure a device to be either a primary or secondary device in a [D2D flow](../../d2d.md).

Read more on how to configure the web SDK for this use case in the chapter on [D2D web SDK configuration](./d2d.md).

Timeout is used mainly in the context of D2D.
It's used to define how much time needs to pass before an error callback is triggered.

Read more in [Timeout configuration](./timeout.md).

---

### Callbacks

```js
{
  onAbort: (),
  onCardScanResult: (),
  onError: (),
  onTransactionFinished: ()
}
```

You can determine what steps the SDK should perform in case of a user aborting the flow, finishing a transaction, and so on.

Read more on what you can do with different callbacks in the API reference:

- [onAbort](/platform-web-sdk/types#onabort)
- [onCardScanResult](/platform-web-sdk/types#oncardscanresult)
- [onError](/platform-web-sdk/types#onerror)
- [onTransactionFinished](/platform-web-sdk/types#ontransactionfinished)

---

### `resourcesPath`

```js
{
  resourcesPath: "..."
}
```

Default: `/resources`.

You can set where the WASM files that perform the heavy computing (e.g. in extraction) are located.

As explained in the [Hosting resources](./quickstart.md#hosting-resources) section of the quick start guide, you can change this value, for example if you're using a CDN to distribute the WASM files.

---

### Customizations and overrides

```js
{
  themeOverride: {
    accent: 100,
    buttonBorderRadius: "3px",
    fontFamily: "Comic Sans",
    resultsScreen: {},
    startScreenIcon: "..."
  },
  translationsOverride: {
    actions: {
      start: "go go go!",
      // ...
    },
    consentDialog: {
      caption: "Store personal data, including biometrics, for the purpose of verifying your identity?",
      confirmButtonText: "I consent."
    }
    // ...
  },
  startScreen: () => {},
  progressScreen: () => {},
  endResultScreen: () => {}
}
```

Overrides include: 

- [theme overrides](/platform-web-sdk/types#themeoverride), which is where you can define font, colors, icons, and other visual customizations for the UI
- [translation overrides](/platform-web-sdk/types#translationsoverride), which is where you can define your custom translation strings for parts of the UI; for example, a consent notice in another language

You can also customize your [start screen](/platform-web-sdk/types#startscreen), [end screen](/platform-web-sdk/types#endresultscreen), or [progress screen](/platform-web-sdk/types#progressscreen).

Read more about [how to customize your Platform web SDK integration](./customization.md).

---

## API reference

Read the [full API reference](/platform-web-sdk/types#idvflowprops) for a complete account of expected types, deprecated fields, and more.


Last updated on Jun 18, 2026