---
Source: https://docs.microblink.com/platform/sdk/web/quickstart
Title: Quick start
Description: Quick start guide for integrating Microblink Platform Web SDK in browser applications
---

# Quick start

## Installation

Install using your preferred package manager:

<Tabs groupId="package-manager">
  <TabItem value="npm" label="npm" default>
    ```bash
    npm install @microblink/platform-sdk
    ```
  </TabItem>
  <TabItem value="pnpm" label="pnpm">
    ```bash
    pnpm add @microblink/platform-sdk
    ```
  </TabItem>
  <TabItem value="yarn" label="yarn">
    ```bash
    yarn add @microblink/platform-sdk
    ```
  </TabItem>
  <TabItem value="bun" label="bun">
    ```bash
    bun add @microblink/platform-sdk
    ```
  </TabItem>
</Tabs>

## Integration

### React

Here's an example React integration.
The `IdvFlow` component takes in some configuration values from the `apiConfig` prop, collects user's consent data, and makes a network call.

This example integration simply logs to the console any results of this interaction.

```jsx



const root = createRoot(document.getElementById('root'));
root.render(
  <IdvFlow
    apiConfig={{
      url: 'URL of your proxy service',
      workflowId: 'ID of the workflow to use'
    }}
    consentData={{
      userId: 'unique user ID',
      note: 'optional note',
      givenOn: new Date().toISOString(),
      isTrainingAllowed: true,
      isProcessingStoringAllowed: true,
    }}
    onTransactionFinished={(result) => {
      console.log('Transaction ID: ', result.transactionId);
      console.log('Transaction verification status: ', result.status);
    }}
    onAbort={() => {
      console.log('User aborted Transaction flow');
    }}
  />
);
```

### Vanilla JavaScript

An equivalent integration in vanilla JS looks like this.
One big difference is that the vanilla version will remove the component from the DOM when the flow is finished or aborted, and if needed again, the same function needs to be called again.

```js

const flow = createIdvFlow(
  {
    apiConfig: {
      url: 'URL of your proxy service',
      workflowId: 'ID of the workflow to use'
    },
    consentData: {
      userId: 'unique user ID',
      note: 'optional note',
      givenOn: new Date().toISOString(),
      isTrainingAllowed: true,
      isProcessingStoringAllowed: true,
    },
    onTransactionFinished: (result) => {
      console.log('Transaction ID: ', result.transactionId);
      console.log('Transaction verification status: ', result.status);
    },
    onAbort: () => {
      console.log('User aborted Transaction flow');
    },
    target: document.getElementById('idv-flow-div'), // Optional
  }
);


```

## Hosting resources

The web SDK uses [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) to run visual recognition and extraction code.
The SDK uses a Web Assembly binary file for that, and expects to find it in a pre-determined location: by default, `/resources`, on the same domain where it is running.

You can also manually specify where these resources are[^1] by using the [`resourcesPath`](/platform-web-sdk/types#resourcespath) parameter in `IdvFlowProps`.

The resources in question can be found in `node_modules/@microblink/platform-sdk/dist/resources`.
After installing, the easiest way to run it would be to copy that entire directory to the root of your public (routable) directory:

```bash
cp -r node_modules/@microblink/platform-sdk/dist/resources your_app/public/
```

Alternatively, you can set up automatic copying of the resources whenever you run your build script for your app.
The [example apps](https://github.com/MicroblinkPlatform/microblink-platform-browser-sdk/blob/main/example-react/vite.config.ts#L25) on our GitHub show how it is done when using Vite as the bundler.


--------



[^1]: Even if you change the path from the default one, browsers specifically prevent cross-origin resource sharing unless specific headers are satisfied, which means that, by default, you won't be able to use resources hosted on another domain (for example, a CDN).
      You could make it work by modifying headers (both on the client and (resources) server), but the most reliable way would be to keep the resources on the same domain.