Documentation
incode.com
  1. SDK Reference
  2. Incode WebSDK 2.0 Reference
  3. Advanced

Web Components

All SDK consumer components ship as standard Web Components, enabling framework-agnostic integration. For the complete catalog see Individual Modules; the

📘

This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation here. Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade.

Full rollout to all clients still TBD.


All SDK consumer components ship as standard Web Components, enabling framework-agnostic integration. For the complete catalog see Individual Modules; the table below is the most-used subset.

Available Components

Tag nameDescriptionSide-effect import
<incode-flow>Complete orchestrated flow@incodetech/web/flow
<incode-flow-completed>Optional post-flow completion screen with auto-redirect@incodetech/web/flow (auto-registered alongside <incode-flow>)
<incode-id>ID document capture@incodetech/web/id
<incode-selfie>Selfie capture@incodetech/web/selfie
<incode-phone>Phone verification@incodetech/web/phone
<incode-email>Email verification@incodetech/web/email
<incode-document-capture>Generic document capture@incodetech/web/document-capture
<incode-face-match>Selfie ↔ ID face match@incodetech/web/face-match
<incode-consent>Consent capture@incodetech/web/consent
<incode-geolocation>Geolocation capture@incodetech/web/geolocation
<incode-antifraud>Antifraud signals@incodetech/web/antifraud
<incode-curp-validation>CURP validation (Mexico)@incodetech/web/curp-validation
<incode-identity-reuse>Identity reuse@incodetech/web/identity-reuse
<incode-redirect-to-mobile>Desktop → mobile handoff@incodetech/web/redirect-to-mobile
<incode-signature>Handwritten signature@incodetech/web/signature
<incode-electronic-signature>Electronic signature@incodetech/web/electronic-signature
<incode-ae-signature>Advanced Electronic Signature@incodetech/web/ae-signature
<incode-qe-signature>Qualified Electronic Signature@incodetech/web/qe-signature
<incode-ekyc>KYC composite@incodetech/web/ekyc
<incode-ekyb>KYB composite@incodetech/web/ekyb
<incode-workflow>Server-driven multi-step workflow@incodetech/web/workflow
<incode-cross-document-data-match>Multi-document cross-check@incodetech/web/cross-document-data-match

Usage

Import the module's UI subpath to register the custom element (a side-effect import), then use it in HTML:

<incode-flow id="flow"></incode-flow>

<script type="module">
  import { setup } from '@incodetech/core';
  import { createSession } from '@incodetech/core/session';
  import '@incodetech/web/themes/light.css';
  import '@incodetech/web/base.css';
  import '@incodetech/web/flow';
  import '@incodetech/web/flow/styles.css';

  // Create session (move to backend for production)
  await setup({ apiURL: 'https://demo-api.incodesmile.com', token: '' });
  const session = await createSession('your-api-key', {
    configurationId: 'your-config-id',
  });
  await setup({ apiURL: 'https://demo-api.incodesmile.com', token: session.token });

  const flow = document.getElementById('flow');
  flow.config = {
    token: session.token,        // ← the FlowConfig accepts `token`, not `apiURL`
    lang: 'en-US',
    enableHome: true,
  };
  flow.onFinish = (result) => console.log(result);
</script>

Note: apiURL belongs on the global setup() call, not inside the <incode-flow> component config. The component's config accepts token (or apiKey + configurationId for self-loading), plus optional flags like lang, enableHome, authHint, wasmConfig, spinnerConfig, and event callbacks (onFlowEvent, onModuleLoading, etc.).

Setting Properties

Properties can be set via JavaScript:

const element = document.querySelector('incode-phone');

// Object properties (config)
element.config = {
  otpVerification: true,
  otpExpirationInMinutes: 5,
  prefill: false,
};

// Callback properties
element.onFinish = () => console.log('Done!');
element.onError = (err) => console.error(err);

TypeScript Support

The SDK provides full TypeScript support for Web Components via HTMLElementTagNameMap augmentation. When you import from @incodetech/web, DOM APIs automatically return correctly typed elements:

import '@incodetech/web/flow';

// Automatically typed - no cast needed!
const flow = document.createElement('incode-flow');
flow.config = {
  token: 'session-token',
  lang: 'en-US',
};
flow.onFinish = (result) => {  // ✅ result is typed
  console.log(result.action);  // 'approved' | 'rejected' | 'none'
};

For module components:

import '@incodetech/web/phone';

const phone = document.createElement('incode-phone');
phone.config = {
  otpVerification: true,
  otpExpirationInMinutes: 5,
  prefill: false,
};
phone.onFinish = () => console.log('Verified!');
phone.onError = (error) => console.error(error);

See TypeScript Types for the full list of available element types.

Styling

Web Components inherit CSS variables from your page:

:root {
  --button-primary-surface-default: #0066cc;
  --text-title: #333333;
}

See Theming & Styling for all available variables.

Framework Integration

Vue

onFinish/onError are properties (not DOM events), so use .prop binding to set them — the regular @event syntax binds to events, not properties.

<template>
  <incode-flow ref="flowEl" />
</template>

<script setup>
import '@incodetech/web/themes/light.css';
import '@incodetech/web/base.css';
import '@incodetech/web/flow';
import '@incodetech/web/flow/styles.css';
import { ref, onMounted } from 'vue';
import { setup } from '@incodetech/core';
import { createSession } from '@incodetech/core/session';

const flowEl = ref(null);

onMounted(async () => {
  await setup({ apiURL: 'https://demo-api.incodesmile.com', token: '' });
  const session = await createSession('your-api-key', {
    configurationId: 'your-config-id',
  });
  await setup({ apiURL: 'https://demo-api.incodesmile.com', token: session.token });

  flowEl.value.config = { token: session.token, lang: 'en-US' };
  flowEl.value.onFinish = (result) => console.log('Done!', result);
  flowEl.value.onError = (error) => console.error(error);
});
</script>

Angular

onFinish / onError are properties on the element, so use property binding ([onFinish]="...") — (eventName) binds DOM events, which the SDK does not dispatch.

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@incodetech/web/flow';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
<incode-flow
  #flow
  [config]="flowConfig"
></incode-flow>
// component.ts
@ViewChild('flow', { static: true }) flow!: ElementRef<HTMLElement>;

ngAfterViewInit() {
  (this.flow.nativeElement as any).onFinish = (result: any) => this.handleFinish(result);
  (this.flow.nativeElement as any).onError = (error: any) => this.handleError(error);
}

See Also