Documentation
incode.com
  1. SDK Reference

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 wiki is for developers integrating with Incode's Platform using the Web SDK.

📘

This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation here. We strongly recommend upgrading - contact your Incode Representative for upgrade information.

Start here

If you want to…Go to
Get a working flow in 5 minutesGetting Started
See every module the SDK exposesIndividual Modules
Use the all-in-one componentIncodeFlow Component
Build fully custom UIHeadless Mode
Customize colors and typographyTheming & Styling
Reference for the public APIAPI Reference
Solve a specific problemTroubleshooting

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

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. localhost is exempt during development.

Need help?

All pages in this section

Getting Started

Components

Identity capture modules

Contact verification modules

Compliance & consent modules

Authentication & identity reuse modules

Signing modules

Composite & orchestration modules

Utility modules

Customization

Advanced

Reference

Updated 1 day ago