Web Components

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

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,
};

// Every module's config prop also accepts `assets` / `animations` overrides,
// scoped to this element only — see Asset Overrides.

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

TypeScript Support

Flows and Workflows augment HTMLElementTagNameMap through their respective subpath imports. Other module tags need an explicit element type:

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, infer the public props from the exported component. The reusable ModuleElement type adds them to the DOM element:

import '@incodetech/web/phone';
import type { Phone } from '@incodetech/web/phone';
import type { ComponentProps } from 'preact';

type ModuleElement<Props> = HTMLElement & Props;
type PhoneElement = ModuleElement<ComponentProps<typeof Phone>>;
const phone = document.createElement('incode-phone') as PhoneElement;
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;
}

They also render without Shadow DOM, so any CSS you write against their internal classes applies too — see Theming & Styling → Direct CSS Overrides for the class-naming convention and specificity rules.

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<HTMLElementTagNameMap['incode-flow']>;

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

See Also

• Getting Started: three integration paths walked end-to-end
• IncodeFlow Component: full <incode-flow> reference
• Individual Modules: every module the SDK ships
• Asset Overrides: per-instance config.assets / config.animations