> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dataspike.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Integrate the Dataspike Web SDK into your web app for seamless document and identity verification.

📦 **GitHub:** [Dataspike Web Widget SDK](https://github.com/dataspike-io/docver-widget)

***

# Web SDK Overview

The Dataspike Web SDK (DocVer Widget) enables you to embed document and identity verification directly into your web or mobile web applications.\
It provides a secure, customizable user interface that connects to your backend verification flows.

> 💡 **Use case:** Let your users complete KYC verification or document upload directly in your product — no redirects required.

***

## Live Demo

You can preview the widget in action here:\
👉 [Live Demo](https://dash.dataspike.io/widget/demo)

***

## Installation

Choose one of the following installation methods:

**Using NPM**

```bash theme={null}
npm install @dataspike/docver-widget
```

**Using Yarn**

```bash theme={null}
yarn install @dataspike/docver-widget
```

**Using a script tag**

```html theme={null}
<script src="https://unpkg.com/@dataspike/docver-widget"></script>
```

***

## Basic Usgae

Basic Usage

Render the widget by passing the verification URL ID from your backend:

```javascript theme={null}
import { DocsVerificationWidget } from '@dataspike/docver-widget';

const renderWidget = async () => {
  const verificationUrlId = await getVerificationId(); // created on backend
  DocsVerificationWidget({
    id: verificationUrlId,
    elementId: 'root',
    apiUrl: 'https://api.dataspike.io',
  });
};
```

> ⚠️ Important: Never expose your API key in frontend code. Always create the verification session on your backend and return only the verificationUrlId to the client.

***

## Backend Integration

Your backend is responsible for securely creating and managing verifications before rendering the widget on the client side.

1. **Create a verification** using your Dataspike API key for an existing applicant.
2. **Return only the `verificationUrlId`** to the frontend — this short ID is safe to expose and required for initializing the widget.
3. **Keep sensitive identifiers** such as `applicantId`, `profileId`, and API keys strictly on the server side.

This approach ensures secure communication between your application and the Dataspike API, while preventing direct client access to privileged data.

***

## Next steps

<Columns cols={2}>
  <Card title="Customize the Widget" icon="palette" href="/web-sdk/customization">
    Learn how to personalize the widget’s look and behavior with themes and callbacks.
  </Card>

  <Card title="Explore API Reference" icon="terminal" href="/api-reference">
    Review endpoint documentation for creating applicants, verifications, and managing webhook events.
  </Card>
</Columns>