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 <incode-flow> 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 |
| See every module the SDK exposes | Individual Modules |
| Use the all-in-one component | IncodeFlow Component |
| Build fully custom UI | Headless Mode |
| Customize colors and typography | Theming & Styling |
| Reference for the public API | API Reference |
| Solve a specific problem | Troubleshooting |
How the SDK fits together
flowchart LR
subgraph BE["Your backend"]
ApiKey["API key + Configuration ID<br/>(server-side only)"]
end
subgraph Browser["Browser"]
Init["setup(apiURL, token)"]
subgraph P1["Path 1 — Drop-in"]
Flow["<incode-flow><br/><i>one element, full UI</i>"]
end
subgraph P2["Path 2 — Orchestrator"]
Orch["createOrchestratedFlowManager"]
WCs["<incode-phone><br/><incode-selfie><br/><incode-id> ..."]
Orch -- "ready / step state" --> WCs
end
subgraph P3["Path 3 — Headless"]
Mgrs["createPhoneManager<br/>createSelfieManager<br/>createIdCaptureManager ..."]
CustomUI["Your UI<br/><i>any framework</i>"]
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:
<incode-flow>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
Three-package architecture
The SDK is split across three npm packages. Most integrations only need to depend on two of them:
flowchart LR
Customer["Your app"]
Web["@incodetech/web<br/><i>L2 — UI components, CSS</i>"]
Core["@incodetech/core<br/><i>L1 — managers, state machines, types</i>"]
Infra["@incodetech/infra<br/><i>L0 — internal browser/WASM bridge</i>"]
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 (<incode-flow>,<incode-phone>,<incode-selfie>,<incode-id>, …) as a standard Web Component plus the design-token CSS.@incodetech/core: framework-agnostic SDK core. Containssetup(),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.warmupWasmlives 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 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.
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.
HTTPS required for camera access in production.
localhostis exempt during development.
Need help?
- Troubleshooting: common issues and solutions
- API Reference: complete API surface
- support@incode.com: direct support
All pages in this section
Getting Started
Components
Identity capture modules
Contact verification modules
Compliance & consent modules
- Consent
- Geolocation
- Antifraud
- Watchlist
- Custom Watchlist
- Watchlist for Business
- Government Validation
- CURP Validation
Authentication & identity reuse modules
Signing modules
Composite & orchestration modules
Utility modules
Customization
Advanced
- Headless Mode
- Dashboard Events
- Web Components
- Session Management
- WASM Configuration
- Bundle Optimization
Reference