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

# Web SDKs

> Integrate Didit identity verification on the web with JavaScript SDK, iframe embed, or redirect. Pay-per-call from $0.30, 500 free verifications/month.

Integrate Didit verification into your web application. We offer seven integration methods to fit your architecture and user experience requirements — pick the one that matches your stack.

<Note>
  **Choose your integration method**: From quick no-code iframes to full programmatic control with our JavaScript SDK, or drop-in plugins for WordPress, Shopify, and Salesforce.
</Note>

***

## Integration Methods

| Method                                                                 | Setup Time  | Backend? | Best For                                                     |
| ---------------------------------------------------------------------- | ----------- | -------- | ------------------------------------------------------------ |
| [JavaScript SDK](/integration/web-sdks/javascript-sdk)                 | 3 minutes   | Optional | Full control — React/Vue/Angular/Next.js/Nuxt/Svelte/vanilla |
| [InContext (Iframe)](/integration/web-sdks/incontext-iframe)           | \< 1 minute | Optional | Embedded experience without redirect                         |
| [Redirect](/integration/web-sdks/web-redirect)                         | 5 minutes   | Yes      | Maximum compatibility, cross-device flows                    |
| [WebView (iOS/Android)](/integration/web-sdks/webview-in-ios-android)  | 15 minutes  | Yes      | Mobile fallback when no native SDK is available              |
| [WordPress + WooCommerce](/integration/web-sdks/wordpress-woocommerce) | 5 minutes   | No-code  | WordPress sites, WooCommerce stores                          |
| [Shopify](/integration/web-sdks/shopify)                               | 5 minutes   | No-code  | Shopify stores — checkout or account verification            |
| [Salesforce](/integration/web-sdks/salesforce)                         | 10 minutes  | No-code  | Salesforce CRM — Contact/Lead record verification            |

<Note>
  **Recommendation**: For production web apps, use the **JavaScript SDK** for the best UX and full programmatic control. Use **InContext iframe** for the quickest setup, **Redirect** when cross-device verification is needed, and the dedicated **WordPress / Shopify / Salesforce** integrations if you live on those platforms.
</Note>

***

## JavaScript SDK

The Didit JavaScript SDK provides a programmatic way to integrate verification with full control over the user experience.

**Key Features:**

* Session management and event callbacks
* React, Vue, Angular, NextJS, Nuxt, Svelte and vanilla JS support
* Full TypeScript support
* Modal & inline modes

**Quick Start:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```

→ [**Full JavaScript SDK Documentation**](/integration/web-sdks/javascript-sdk)

***

## InContext (Iframe)

Embed the verification flow directly within your application using an iframe. Seamless experience without redirecting users away from your site.

**Key Features:**

* UniLink (no backend required) - setup in \< 1 minute
* API Session (with backend) - full customization
* Modal and inline implementations
* React component examples

**Quick Start:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; fullscreen; autoplay; encrypted-media"
></iframe>
```

→ [**Full InContext Documentation**](/integration/web-sdks/incontext-iframe)

***

## Redirect

Redirect users to the Didit-hosted verification page. After completion, users return to your callback URL.

**Key Features:**

* Maximum browser compatibility
* Cross-device verification support
* Simple integration
* Works when iframe camera access is problematic

**Quick Start:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**Full Redirect Documentation**](/integration/web-sdks/web-redirect)

***

## Comparison

| Feature                   | JavaScript SDK | InContext (Iframe) | Redirect      |
| ------------------------- | -------------- | ------------------ | ------------- |
| Setup time                | 3 min          | \< 1 min           | 5 min         |
| Backend required          | Optional       | Optional           | Yes           |
| Stays on your domain      | Yes            | Yes                | No            |
| Cross-device support      | Yes            | Yes                | Yes           |
| Full programmatic control | Yes            | Limited            | Callback only |
| Event callbacks           | Real-time      | `postMessage`      | Callback only |
| White-label               | Yes            | Yes                | Yes           |
| Browser compatibility     | All            | All                | All           |

<Note>
  All three methods deliver final, signed results via [webhooks](/integration/webhooks) — the comparison above describes the in-browser UX, not how you receive the verification decision.
</Note>

***

## Configuration

### Required Iframe Permissions

For InContext iframe integrations, always include these permissions:

```html theme={null}
allow="camera; microphone; fullscreen; autoplay; encrypted-media"
```

***

## Example Repositories

<CardGroup cols={2}>
  <Card title="SDK Web Examples" icon="github" href="https://github.com/didit-protocol/sdk-web-examples">
    React, Vue, Angular, Next.js, Nuxt, Svelte, and vanilla JS examples
  </Card>

  <Card title="Iframe Example" icon="github" href="https://github.com/didit-protocol/iframe-example">
    UniLink and API-session iframe examples
  </Card>

  <Card title="Full Next.js Demo" icon="github" href="https://github.com/didit-protocol/didit-full-demo">
    End-to-end Next.js integration
  </Card>

  <Card title="NPM Package" icon="npm" href="https://www.npmjs.com/package/@didit-protocol/sdk-web">
    `@didit-protocol/sdk-web` on npm
  </Card>
</CardGroup>

## Related

* [Webhooks](/integration/webhooks) — receive signed verification results on your backend
* [Create Session API](/sessions-api/create-session) — the endpoint behind every web SDK
* [Native SDKs](/integration/native-sdks/overview) — iOS, Android, React Native, Flutter