# 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. ## Start here | If you want to… | Go to | | -------------------------------- | ---------------------------------------------------------- | | Get a working flow in 5 minutes | [Getting Started](doc:web-sdk-2-getting-started) | | See every module the SDK exposes | [Individual Modules](doc:web-sdk-2-individual-modules) | | Use the all-in-one component | [IncodeFlow Component](doc:web-sdk-2-incodeflow-component) | | Build fully custom UI | [Headless Mode](doc:web-sdk-2-headless-mode) | | Customize colors and typography | [Theming & Styling](doc:web-sdk-2-theming) | | Reference for the public API | [API Reference](doc:web-sdk-2-reference) | | Solve a specific problem | [Troubleshooting](doc: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**](doc: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**](doc: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**](doc: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](doc:web-sdk-2-troubleshooting#mobile-safari). > **HTTPS required** for camera access in production. `localhost` is exempt during development. ## Need help? - [Troubleshooting](doc:web-sdk-2-troubleshooting): common issues and solutions - [API Reference](doc: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](doc:web-sdk-2-getting-started) - [Framework Integration](doc:web-sdk-2-framework-integration) **Components** - [IncodeFlow Component](doc:web-sdk-2-incodeflow-component) - [Module Patterns](doc:web-sdk-2-module-patterns) - [Individual Modules](doc:web-sdk-2-individual-modules) _Identity capture modules_ - [Selfie](doc:web-sdk-2-module-selfie) - [ID Capture](doc:web-sdk-2-module-id-capture) - [ID OCR](doc:web-sdk-2-module-id-ocr) - [Document Capture](doc:web-sdk-2-module-document-capture) - [Document Upload](doc:web-sdk-2-module-document-upload) - [Face Match](doc:web-sdk-2-module-face-match) _Contact verification modules_ - [Phone](doc:web-sdk-2-module-phone) - [Email](doc:web-sdk-2-module-email) _Compliance & consent modules_ - [Consent](doc:web-sdk-2-module-consent) - [Geolocation](doc:web-sdk-2-module-geolocation) - [Antifraud](doc:web-sdk-2-module-antifraud) - [Watchlist](doc:web-sdk-2-module-watchlist) - [Custom Watchlist](doc:web-sdk-2-module-custom-watchlist) - [Watchlist for Business](doc:web-sdk-2-module-watchlist-for-business) - [Government Validation](doc:web-sdk-2-module-gov-validation) - [CURP Validation](doc:web-sdk-2-module-curp-validation) _Authentication & identity reuse modules_ - [Authentication](doc:web-sdk-2-module-authentication) - [Identity Reuse](doc:web-sdk-2-module-identity-reuse) _Signing modules_ - [Signature](doc:web-sdk-2-module-signature) - [Electronic Signature (AE / QE)](doc:web-sdk-2-module-electronic-signature) _Composite & orchestration modules_ - [Workflow](doc:web-sdk-2-module-workflow) - [eKYC](doc:web-sdk-2-module-ekyc) - [eKYB](doc:web-sdk-2-module-ekyb) - [Cross-Document Data Match](doc:web-sdk-2-module-cross-doc-match) - [Custom Fields](doc:web-sdk-2-module-custom-fields) _Utility modules_ - [Home Screen](doc:web-sdk-2-module-home) - [Redirect to Mobile](doc:web-sdk-2-module-redirect-to-mobile) **Customization** - [Theming & Styling](doc:web-sdk-2-theming) - [Internationalization](doc:web-sdk-2-i18n) - [Event Callbacks](doc:web-sdk-2-event-callbacks) **Advanced** - [Headless Mode](doc:web-sdk-2-headless-mode) - [Dashboard Events](doc:web-sdk-2-events) - [Web Components](doc:web-sdk-2-web-components) - [Session Management](doc:web-sdk-2-session-api) - [WASM Configuration](doc:web-sdk-2-wasm) - [Bundle Optimization](doc:web-sdk-2-bundle-optimization) **Reference** - [API Reference](doc:web-sdk-2-reference) - [TypeScript Types](doc:web-sdk-2-typescript-types) - [Troubleshooting](doc:web-sdk-2-troubleshooting) - [Changelog](doc:web-sdk-2-changelog)