--- 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](/platform/sdk/web/quickstart) 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](/platform/build-workflow). ##### `proxy.baseUrl` The `proxy.baseUrl` value depends on how you have configured your [proxy](/platform/proxy) 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](/platform/sdk/web/d2d) or [verification links](/platform/api/verification-links) 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](/platform/d2d). Read more on how to configure the web SDK for this use case in the chapter on [D2D web SDK configuration](/platform/sdk/web/d2d). 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](/platform/sdk/web/timeout). --- ### 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](/platform/sdk/web/quickstart#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](/platform/sdk/web/customization). --- ## 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 Apr 20, 2026