--- title: "Incode WebSDK 2.0 Reference" url: "https://developer.incode.com/sdk-reference/incode-web-sdk-2-reference/" section: "sdk-reference" group: "Incode Web SDK 2 Reference" version: "v1.1" status: "live" --- # Incode WebSDK 2.0 Reference The Incode Web SDK embeds identity verification — document capture, selfie liveness, phone/email OTP, eKYC, eKYB, and more — into any web application. It ships as web components, manager APIs, and a plug-and-play `` element. This wiki is for developers integrating with Incode's Platform using the Web SDK. :::note This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation [here](/sdk-reference/web-sdk-reference). Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade.

Full rollout to all clients still TBD. ::: ## Start here | If you want to… | Go to | | -------------------------------- | ---------------------------------------------------------- | | Get a working flow in 5 minutes | [Getting Started](/sdk-reference/web-sdk-2-getting-started/) | | See every module the SDK exposes | [Individual Modules](/sdk-reference/web-sdk-2-individual-modules/) | | Use the all-in-one component | [IncodeFlow Component](/sdk-reference/web-sdk-2-incodeflow-component/) | | Build fully custom UI | [Headless Mode](/sdk-reference/web-sdk-2-headless-mode/) | | Customize colors and typography | [Theming & Styling](/sdk-reference/web-sdk-2-theming/) | | Reference for the public API | [API Reference](/sdk-reference/web-sdk-2-reference/) | | Solve a specific problem | [Troubleshooting](/sdk-reference/web-sdk-2-troubleshooting/) | ## How the SDK fits together ```mermaid flowchart LR subgraph BE["Your backend"] ApiKey["API key + Configuration ID
(server-side only)"] end subgraph Browser["Browser"] Init["setup(apiURL, token)"] subgraph P1["Path 1 — Drop-in"] Flow["<incode-flow>
one element, full UI"] end subgraph P2["Path 2 — Orchestrator"] Orch["createOrchestratedFlowManager"] WCs["<incode-phone>
<incode-selfie>
<incode-id> ..."] Orch -- "ready / step state" --> WCs end subgraph P3["Path 3 — Headless"] Mgrs["createPhoneManager
createSelfieManager
createIdCaptureManager ..."] CustomUI["Your UI
any framework"] Mgrs -- "subscribe" --> CustomUI end end ApiKey -- "createSession()" --> Init Init --> P1 Init --> P2 Init --> P3 ``` Three integration paths, same SDK underneath. Pick the one that matches how much UI control you need: - **Path 1: `` drop-in.** One web component, full SDK UI, \~5 lines of code. Best when standard branding works for you and you want fastest time-to-value. - **Path 2: Orchestrator + module web components.** You own the shell (landing page, transitions, completion screen). Incode owns each module's screen. \~30 lines of code. - **Path 3: Headless Managers.** You own everything — every screen, every transition. The SDK supplies state machines and business logic. \~50+ lines of code, maximum flexibility. [**→ Walk through all three in Getting Started**](/sdk-reference/web-sdk-2-getting-started/) ## Three-package architecture The SDK is split across three npm packages. Most integrations only need to depend on two of them: ```mermaid flowchart LR Customer["Your app"] Web["@incodetech/web
L2 — UI components, CSS"] Core["@incodetech/core
L1 — managers, state machines, types"] Infra["@incodetech/infra
L0 — internal browser/WASM bridge"] Customer --> Web Customer --> Core Web --> Core Core --> Infra style Infra fill:#fee2e2,stroke:#b91c1c,color:#7f1d1d style Core fill:#dcfce7,stroke:#15803d,color:#14532d style Web fill:#dbeafe,stroke:#1d4ed8,color:#1e3a8a ``` - `@incodetech/web`: UI components and CSS. Ships every consumer-facing element (``, ``, ``, ``, …) as a standard Web Component plus the design-token CSS. - `@incodetech/core`: framework-agnostic SDK core. Contains `setup()`, `createSession()`, all module managers, all the public TypeScript types. - `@incodetech/infra`: internal layer. **Do not import from this package directly.** The SDK re-exports anything you need (e.g. `warmupWasm` lives at `@incodetech/core/wasm`). ## Framework integration Every Incode UI module ships as a standard Web Component usable from vanilla HTML, React (with or without React 19's native custom-element support), Angular (`CUSTOM_ELEMENTS_SCHEMA`), and Vue 3 (`compilerOptions.isCustomElement`). The set-up is small but framework-specific. [**→ Framework Integration**](/sdk-reference/web-sdk-2-framework-integration/) walks through each path with runnable examples, plus the React 18 vs 19 nuance (and the JSX augmentation TypeScript needs on React 18). ## What the SDK can do - **Identity capture**: government IDs, passports, driver's licenses, generic document capture, OCR extraction, face match against ID photos. - **Liveness & biometrics**: selfie capture in single-frame, multi-modal, and video-liveness modes (powered by Incode's Deepsight ML pipeline), face mask / lens / closed-eye / brightness validation. - **Contact & consent**: phone OTP, email OTP, mandatory and optional consent capture, geolocation capture. - **Compliance & risk**: antifraud signals, watchlists (sanctions, PEP), custom watchlists, business watchlists, government data validation, CURP validation (Mexico). - **Signing**: handwritten signature, electronic signature, AE signature, QE signature. - **Composite flows**: eKYC, eKYB, end-to-end orchestrated workflows configured from the Incode Dashboard, identity reuse, cross-document data matching. [**→ Full module catalog**](/sdk-reference/web-sdk-2-individual-modules/) ## Browser support The SDK targets modern evergreen browsers: Chrome, Firefox, Safari, and Edge. The build emits ES2021 and uses `getUserMedia`, `MediaRecorder`, `fetch`, and WebAssembly; any browser that supports those (roughly Chrome ≥ 90, Firefox ≥ 88, Safari ≥ 14, Edge ≥ 90) should work. Mobile Safari has additional quirks worth knowing about — see [Troubleshooting → Mobile Safari](/sdk-reference/web-sdk-2-troubleshooting/#mobile-safari). > **HTTPS required** for camera access in production. `localhost` is exempt during development. ## Need help? - [Troubleshooting](/sdk-reference/web-sdk-2-troubleshooting/): common issues and solutions - [API Reference](/sdk-reference/web-sdk-2-reference/): complete API surface - [support@incode.com](mailto:support@incode.com): direct support --- ## All pages in this section **Getting Started** - [Getting Started](/sdk-reference/web-sdk-2-getting-started/) - [Framework Integration](/sdk-reference/web-sdk-2-framework-integration/) **Components** - [IncodeFlow Component](/sdk-reference/web-sdk-2-incodeflow-component/) - [Module Patterns](/sdk-reference/web-sdk-2-module-patterns/) - [Individual Modules](/sdk-reference/web-sdk-2-individual-modules/) _Identity capture modules_ - [Selfie](/sdk-reference/web-sdk-2-module-selfie-1/) - [ID Capture](/sdk-reference/web-sdk-2-module-id-capture/) - [ID OCR](/sdk-reference/web-sdk-2-module-id-ocr/) - [Document Capture](/sdk-reference/web-sdk-2-module-document-capture/) - [Face Match](/sdk-reference/web-sdk-2-module-face-match/) _Contact verification modules_ - [Phone](/sdk-reference/web-sdk-2-module-phone/) - [Email](/sdk-reference/web-sdk-2-module-email/) _Compliance & consent modules_ - [Consent](/sdk-reference/web-sdk-2-module-consent/) - [Geolocation](/sdk-reference/web-sdk-2-module-geolocation/) - [Antifraud](/sdk-reference/web-sdk-2-module-antifraud/) - [Watchlist](/sdk-reference/web-sdk-2-module-watchlist/) - [Custom Watchlist](/sdk-reference/web-sdk-2-module-custom-watchlist/) - [Watchlist for Business](/sdk-reference/web-sdk-2-module-watchlist-for-business/) - [Government Validation](/sdk-reference/web-sdk-2-module-gov-validation-1/) - [CURP Validation](/sdk-reference/web-sdk-2-module-curp-validation/) _Authentication & identity reuse modules_ - [Authentication](/sdk-reference/web-sdk-2-module-authentication/) - [Identity Reuse](/sdk-reference/web-sdk-2-module-identity-reuse/) _Signing modules_ - [Signature](/sdk-reference/web-sdk-2-module-signature/) - [Electronic Signature (AE / QE)](/sdk-reference/web-sdk-2-module-electronic-signature/) _Composite & orchestration modules_ - [Workflow](/sdk-reference/web-sdk-2-module-workflow/) - [eKYC](/sdk-reference/web-sdk-2-module-ekyc/) - [eKYB](/sdk-reference/web-sdk-2-module-ekyb/) - [Cross-Document Data Match](/sdk-reference/web-sdk-2-module-cross-doc-match/) - [Custom Fields](/sdk-reference/web-sdk-2-module-custom-fields/) _Utility modules_ - [Home Screen](/sdk-reference/web-sdk-2-module-home/) - [Redirect to Mobile](/sdk-reference/web-sdk-2-module-redirect-to-mobile/) **Customization** - [Theming & Styling](/sdk-reference/web-sdk-2-theming/) - [Internationalization](/sdk-reference/web-sdk-2-i18n/) - [Event Callbacks](/sdk-reference/web-sdk-2-event-callbacks/) **Advanced** - [Headless Mode](/sdk-reference/web-sdk-2-headless-mode/) - [Dashboard Events](/sdk-reference/web-sdk-2-events/) - [Web Components](/sdk-reference/web-sdk-2-web-components/) - [Session Management](/sdk-reference/web-sdk-2-session-api/) - [WASM Configuration](/sdk-reference/web-sdk-2-wasm/) - [Bundle Optimization](/sdk-reference/web-sdk-2-bundle-optimization/) **Reference** - [API Reference](/sdk-reference/web-sdk-2-reference/) - [TypeScript Types](/sdk-reference/web-sdk-2-typescript-types/) - [Troubleshooting](/sdk-reference/web-sdk-2-troubleshooting/) - [Release Notes](/release-notes/web-sdk-20-release-notes/)