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 <incode-flow> element.

This documentation is for developers integrating with Incode's Platform using the Web SDK.

Start here

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&#40;apiURL, token&#41;"]

        subgraph P1["Path 1 — Drop-in"]
            Flow["&lt;incode-flow&gt;<br/><i>one element, full UI</i>"]
        end
        subgraph P2["Path 2 — Orchestrator"]
            Orch["createOrchestratedFlowManager"]
            WCs["&lt;incode-phone&gt;<br/>&lt;incode-selfie&gt;<br/>&lt;incode-id&gt; ..."]
            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. 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 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

Browser support

For 2.3.0, the officially supported browsers are Chrome and Safari (Safari on Apple platforms). Native Android and iOS WebViews are also supported; third-party in-app browsers may restrict capture and are not supported.

The SDK's UI components check browser support before displaying a module. An unsupported browser, including Firefox or Edge, sees a full-screen browser-not-supported message. The user can choose Continue anyway; that choice is remembered for the session. Continuing does not make an unsupported browser a supported integration target.

Hide the browser-not-supported screen

The disableUnsupportedBrowserScreen setting of your flow or workflow turns this screen off.

• <incode-flow> and <incode-workflow> always use the setting from the server. They do the browser check after the flow or workflow config loads, so a disabled screen never shows. The host options below do not apply to them.
• Standalone modules (for example, <incode-selfie>) also use the setting of the session's flow. They read the flow only when the browser is unsupported. You can override the flow value with the options below.

For standalone modules, the first value that is set applies:

true hides the screen. false shows the screen, even if the flow hides it. If you call setup({ flow: false }), or if the flow does not load, standalone modules show the screen unless you set one of the options.

The build targets ES2021 and requires browser features such as getUserMedia, MediaRecorder, fetch, and WebAssembly for the relevant modules. Having these features is a technical prerequisite, not a support guarantee. See Troubleshooting → Mobile Safari.

Need help?

• Troubleshooting: common issues and solutions
• API Reference: complete API surface
• support@incode.com: direct support

All pages in this section

Getting Started

• Getting Started
• Framework Integration

Components

• IncodeFlow Component
• Module Patterns
• Individual Modules

Identity capture modules

• Selfie
• ID Capture
• ID OCR
• Document Capture
• Face Match

Contact verification modules

• Phone
• Email

Compliance & consent modules

• Consent
• Geolocation
• Antifraud
• Watchlist
• Custom Watchlist
• Watchlist for Business
• Government Validation
• CURP Validation

Authentication & identity reuse modules

• Authentication
• Identity Reuse

Signing modules

• Signature
• Electronic Signature (AE / QE)

Composite & orchestration modules

• Workflow
• eKYC
• eKYB
• Cross-Document Data Match
• Custom Fields

Utility modules

• Home Screen
• Redirect to Mobile

Use Cases

• Use Cases
• Digital ID: Bank Redirect
• Digital ID: mDL Verification

Customization

• Theming & Styling
• Internationalization
• Event Callbacks

Advanced

• Headless Mode
• Dashboard Events
• Web Components
• Session Management
• WASM Configuration
• Bundle Optimization
• On-Device Face Capture
• End-to-End Encryption

Reference

• API Reference
• TypeScript Types
• Troubleshooting
• Release Notes