Appearance
API Reference
Component
LiqaEventMap
ts
LiqaEventMap: objectLiqaEventMap: objectLIQA event names and corresponding event details.
Type declaration
| Member | Type | Description |
|---|---|---|
init | void | Fired when LIQA has finished initializing |
ready | void | Fired when LIQA has finished loading preset's resources for image processing and is ready to operate. |
loaded | void | Fired when LIQA has finished loading its resources and is ready to operate. Alias readyDeprecated Use the ready event instead. |
capture | ImageCapture | Fired when all the AI quality criteria passed and the user submitted the image. The image can be obtained via the event.detail ImageCapture interface.Note: For face-180 preset this event is dispatched 3 times (for front, left and right side captures). The captured side is written to image metadata. An example how to handle it is on Collection of Images page. |
captures | ImageCapture[] | Fired when all the AI quality criteria passed and the user submitted the image. The image can be obtained via the event.detail ImageCapture interface. |
analytics | AnalyticsDetails | Fired when an analytics event occur. |
error | LiqaError | Fired when a LiqaError occurs. |
FEATURE
ts
const FEATURE: objectconst FEATURE: objectType declaration
| Member | Type |
|---|---|
readonly TUTORIAL | "tutorial" |
Feature
ts
Feature: typeof FEATURE[keyof typeof FEATURE]Feature: typeof FEATURE[keyof typeof FEATURE]LiqaAttributes
ts
LiqaAttributes: objectLiqaAttributes: objectLIQA Web component HTML attributes to configure the component look and behavior.
Example
html
<hautai-liqa
license="xxx-xxx-xxx"
styles="@import url('/path/to/custom-liqa-styles.css')"
>
</hautai-liqa><hautai-liqa
license="xxx-xxx-xxx"
styles="@import url('/path/to/custom-liqa-styles.css')"
>
</hautai-liqa>Type declaration
| Member | Type | Description |
|---|---|---|
license | string | The license key obtained from Haut.ai. |
styles? | string | A string containing valid CSS rules. For more information, see Styles page. Example "@import url('/path/to/custom-liqa-styles.css')" |
use-iframe? | boolean | "true" | "false" | Render LIQA inside an iframe instead of Shadow DOM. Default false |
lang? | string | Language or locale code to use for the UI texts. Falls back to the base language and then to English if an exact locale is unavailable. Default "en" |
i18n? | string | A string containing a valid JSON object with text overrides. Supports global overrides and/or per-language overrides. For more information, see Text Messages page. Example "{ \"fr\": {\"preview\": { \"submit\": \"Confirmer\" } }, \"preview\": { \"submit\": \"Confirm\" } }" |
preset? | "face" | "face-180" | "hair" | A preset used to customize AI quality criteria and user flow. For more information, see Presets page. Default "face" |
sources? | Sources | A list of sources to capture the image from: different device cameras or file upload. They can be combined using , separator.Visit the corresponding user flow customization section to learn about their logic and limitations. Default "front_camera"Alias "camera"Starting from 6.7.0 version "camera" acts as an alias for "front_camera".Note: For face-180 preset only "front_camera" and "companion" sources are available. The rest will be ignored. |
capture? | "auto" | "manual" | Image capture mode for "camera" source."auto" means LIQA will automatically take a photo when all AI quality criteria met."manual" means LIQA will allow the user to take a photo on their own via a button.Note: The option is configurable only for "hair" preset. Other presets are always "auto". |
required-lighting? | "none" | "adaptive" | "default" | Lighting requirements for the image capture. - "none": no requirements are set and lighting will not be validated. (WARNING: the quality of the processing results may be affected)- "adaptive": the requirements will be softened if the lighting conditions are poor.- "default": the requirements will be set to optimal which will provide more details on the photo.Note: The option is only applicable to "face" preset. For other presets it is always "default".Default "default" |
postprocessing? | string | Image post-processing settings. Accepts a comma-separated list of flags: - "original": the image from "capture" will not be processed.- "anonymized": the image from "capture" will be anonymized (only skin mask will be returned).- "color-correction-coefficients": the image from "capture" will include color correction coefficients.Default "original" |
effects? | boolean | "true" | "false" | A flag to enable or disable the effects during the image capture process. Default false |
tutorial? | string | "off" | "image" | "video" | A flag to enable or disable tutorial option on the Source Selection screen. Regular tutorial/banner flows require the sources option to contain a camera source( "front_camera" or "back_camera") and "upload".With entry-point="tutorial-alt", tutorial can also be shown for camera-only configs.- "off": no tutorial will be shown.- "video": a video tutorial will be shown.- "image": an image tutorial will be shown. Can be used as a fallback for reducing the loading time.- "[{\"src\":\"https://...\",\"hint\":\"...\"}]": a JSON-serialized custom tutorial with ordered steps.Default "off" |
entry-point? | "capture" | "tutorial" | "tutorial-alt" | A flag to set the entry point of the LIQA. - "capture": the entry point will be set to the capture screen.- "tutorial": the entry point will be set to the tutorial screen.- "tutorial-alt": the entry point will be set to the source selection screen with the tutorial shown immediately(with a framed tutorial layout on desktop). Requires tutorial to be enabled and a camera source to be available. Default "capture" |
quality-check? | "off" | "normal" | "strict" | A flag to set the quality check behavior. - off: disables the configurable quality-check policy.- normal: shows detected issues to the user but still allows submission.- strict: shows detected issues and blocks submission until the required checks pass.Live guidance is available for the "face" and "face-180" presets.Post-capture preview validation is available for "face" and for the front image only in "face-180".For supported presets, this already includes glasses and forehead checks in live validation and in post-capture validation where available. Default "off" |
occlusion-detection? | "off" | "normal" | "strict" | "live" | A flag to set the occlusion detection behavior. - off: skips occlusion detection completely.- strict: runs occlusion detection after capture; occlusion issues block submission.- normal: runs occlusion detection after capture; occlusion issues are shown as a warning but do not block submission.- live: runs lightweight occlusion checks during live camera capture; for non-camera sources (upload, companion) occlusion checks still run after capture.Available for the "face" and "face-180" presets.Use this when you want glasses / forehead validation without enabling the full quality-check flow.If quality-check is already enabled, glasses and forehead checks are already included for supported presets.Detection signals: - Flags >35% forehead coverage (bangs/hat/brim). - Flags glasses; detection aims for sensitivity and may not be perfect in all cases. Default "off" |
quality-check-sources? | Sources | An array specifying which capture sources should enforce quality checks. The quality-check behavior (set via the quality-check property) will only be applied for the sources included in this array.This option does not scope explicit occlusion-detection.Available values are: - front_camera: Enforces quality check on images captured from the front camera.- back_camera: Enforces quality check on images captured from the back camera.- upload: Enforces quality check on images provided via file upload.- companion: Enforces quality check on images captured via a companion source.If not provided, quality checks will be applied for all sources. Default ["front_camera","back_camera","upload","companion"] |
ignored-quality-checks? | string | A comma-separated list of post-capture quality checks to ignore. Ignored checks are excluded from preview issues, blocking logic, and the resulting quality_check payload after capture. Live guidance is not affected.Available values are: - enough_skin- pose- resolution- blur- occlusions- glasses- forehead- exposure- uniform_illumination- shadowsExample "shadows,uniform_illumination"Default "" |
best-frame-selection? | "true" | "false" | A flag to enable or disable best frame selection during image capture. When enabled, LIQA will track multiple frames during the capture process and automatically select the frame with the highest quality metrics. Default "true" |
character? | string | "false" | A character ID to use Accepts a number corresponding to a specific character. Example "0"Default false |
tutorial-character? | string | "false" | A character ID to use in tutorials Accepts a number corresponding to a specific character. Example "0"Default false |
LiqaElement
LIQA Web component available as <hautai-liqa></hautai-liqa> tag.
Example
html
<hautai-liqa license="xxx-xxx-xxx"></hautai-liqa><hautai-liqa license="xxx-xxx-xxx"></hautai-liqa>Extends
any
Methods
upload
ts
upload(files): voidupload(files): voidProgrammatically uploads one or more files to LIQA, bypassing the manual file selection UI.
Parameters
| Parameter | Type | Description |
|---|---|---|
files | any | A single File (or array of Files) to upload. |
Returns
void
Example
js
// Upload a single file
liqa.upload(file)
// Upload multiple files programmatically
const files = [file1, file2, file3]
liqa.upload(files)// Upload a single file
liqa.upload(file)
// Upload multiple files programmatically
const files = [file1, file2, file3]
liqa.upload(files)ts
upload(files): voidupload(files): voidProgrammatically uploads one or more files to LIQA.
Parameters
| Parameter | Type |
|---|---|
files | any |
Returns
void
reset
ts
reset(): Promise< void >reset(): Promise< void >Programmatically resets LIQA to its initial state, clearing any captured images and stopping the camera.
Returns
Promise< void >
Example
js
// Reset LIQA to start over
liqa.reset()// Reset LIQA to start over
liqa.reset()ts
reset(): Promise< void >reset(): Promise< void >Programmatically resets LIQA to its initial state and resolves after the new session is ready.
Returns
Promise< void >
addEventListener
ts
addEventListener<K>(
type,
listener,
options?): voidaddEventListener<K>(
type,
listener,
options?): voidSubscribes the event listener to the given LIQA event.
Type parameters
| Parameter |
|---|
K extends keyof LiqaEventMap |
Parameters
| Parameter | Type |
|---|---|
type | K |
listener | function |
options? | any |
Returns
void
removeEventListener
ts
removeEventListener<K>(
type,
listener,
options?): voidremoveEventListener<K>(
type,
listener,
options?): voidUnsubscribes the event listener from the given LIQA event.
Type parameters
| Parameter |
|---|
K extends keyof LiqaEventMap |
Parameters
| Parameter | Type |
|---|---|
type | K |
listener | function |
options? | any |
Returns
void
Component (imperative)
Liqa
ts
Liqa(config): LiqaElementLiqa(config): LiqaElementAn imperative way to create LIQA web component.
Parameters
| Parameter | Type |
|---|---|
config | LiqaConfig |
Returns
Example
javascript
const liqa = new Liqa({
license: "xxx-xxx-xxx",
target: document.querySelector("#liqa-container"),
styles: "@import url('/path/to/custom-liqa-styles.css')"
})const liqa = new Liqa({
license: "xxx-xxx-xxx",
target: document.querySelector("#liqa-container"),
styles: "@import url('/path/to/custom-liqa-styles.css')"
})Deprecated
Use the <hautai-liqa> web component instead.
LiqaConfig
ts
LiqaConfig: objectLiqaConfig: objectOptions to configure the LIQA‘s look and behavior.
Deprecated
Use the <hautai-liqa> web component with the LiqaAttributes instead.
Type declaration
| Member | Type | Description |
|---|---|---|
license | string | The license key obtained from Haut.ai. |
target? | Element | string | Query selector to the target element or HTMLElement to render LIQA to. Example document.querySelector("#liqa-container") |
styles? | string | A string containing valid CSS rules. For more information, see Styles page. Example "@import url('/path/to/custom-liqa-styles.css')" |
use-iframe? | boolean | Render LIQA inside an iframe instead of Shadow DOM. Default false |
messages? | Messages | An object whose keys are messages keys and values are messages texts. For more information, see Text Messages page. Example { "preview": { "submit": "Confirm" } } |
preset? | "face" | "face-180" | "hair" | A preset used to customize AI quality criteria and user flow. For more information, see Presets page. Default "face" |
sources? | ("camera" | "front_camera" | "back_camera" | "upload" | "companion")[] | A list of sources to capture the image from: different device cameras or file upload. Check the relevant user flow customization section to learn about the logic. Default ["front_camera"]Alias ["camera"]Starting from 6.7.0 version "camera" acts as an alias for "front_camera".Note: For face-180 preset only "front_camera" and "companion" sources are available. The rest will be ignored. |
capture? | "auto" | "manual" | Image capture mode for "camera" source."auto" means LIQA will automatically take a photo when all AI quality criteria met."manual" means LIQA will allow the user to take a photo on their own via a button.Note: The option is configurable only for "hair" preset. Other presets are always "auto". |
required-lighting? | "none" | "adaptive" | "default" | Lighting requirements for the image capture. - "none": no requirements are set and lighting will not be validated. (WARNING: the quality of the processing results may be affected)- "adaptive": the requirements will be softened if the lighting conditions are poor.- "default": the requirements will be set to optimal which will provide more details on the photo.Note: The option is only applicable to "face" preset. For other presets it is always "default".Default "default" |
effects? | boolean | "true" | "false" | A flag to enable or disable the effects during the image capture process. Default false |
tutorial? | "off" | "image" | "video" | A flag to enable or disable tutorial option on the source selection screen. Regular tutorial/banner flows require sources to contain a camera source and "upload".With entry-point="tutorial-alt", tutorial can also be shown for camera-only configs.- "off": no tutorial will be shown.- "video": a video tutorial will be shown.- "image": an image tutorial will be shown. Can be used as a fallback for reducing the loading time.Default "off" |
entry-point? | string | "capture" | "tutorial" | "tutorial-alt" | A flag to set the entry point of the LIQA. - "capture": the entry point will be set to the capture screen.- "tutorial": the entry point will be set to the tutorial screen.- "tutorial-alt": the entry point will be set to the source selection screen with tutorial shown immediately.Works with regular camera + upload configs and with camera-only configs when tutorial is enabled. Default "capture" |
quality-check? | "off" | "normal" | "strict" | A flag to set the quality check behavior. - off: disables the configurable quality-check policy.- normal: shows detected issues to the user but still allows submission.- strict: shows detected issues and blocks submission until the required checks pass.Live guidance is available for the "face" and "face-180" presets.Post-capture preview validation is available for "face" and for the front image only in "face-180".For supported presets, this already includes glasses and forehead checks in live validation and in post-capture validation where available. Default "off" |
occlusion-detection? | "off" | "normal" | "strict" | "live" | A flag to set the occlusion detection behavior. - off: skips occlusion detection completely.- strict: runs occlusion detection after capture; occlusion issues block submission.- normal: runs occlusion detection after capture; occlusion issues are shown as a warning but do not block submission.- live: runs lightweight occlusion checks during live camera capture; for non-camera sources (upload, companion) occlusion checks still run after capture.Available for the "face" and "face-180" presets.Use this when you want glasses / forehead validation without enabling the full quality-check flow.If quality-check is already enabled, glasses and forehead checks are already included for supported presets.Detection signals: - Flags >35% forehead coverage (bangs/hat/brim). - Flags glasses; detection aims for sensitivity and may not be perfect in all cases. Default "off" |
quality-check-sources? | ("front_camera" | "back_camera" | "upload" | "companion")[] | An array specifying which capture sources should enforce quality checks. The quality-check behavior (set via the quality-check property) will only be applied for the sources included in this array.This option does not scope explicit occlusion-detection.Available values are: - front_camera: Enforces quality check on images captured from the front camera.- back_camera: Enforces quality check on images captured from the back camera.- upload: Enforces quality check on images provided via file upload.- companion: Enforces quality check on images captured via a companion source.If not provided, quality checks will be applied for all sources. Default ["front_camera","back_camera","upload","companion"] |
ignored-quality-checks? | ("enough_skin" | "pose" | "resolution" | "blur" | "occlusions" | "glasses" | "forehead" | "exposure" | "uniform_illumination" | "shadows")[] | An array specifying post-capture quality checks to ignore. Ignored checks are excluded from preview issues, blocking logic, and the resulting quality_check payload after capture. Live guidance is not affected.Available values are: - enough_skin- pose- resolution- blur- occlusions- glasses- forehead- exposure- uniform_illumination- shadowsDefault [] |
best-frame-selection? | "true" | "false" | A flag to enable or disable best frame selection during image capture. When enabled, LIQA will track multiple frames during the capture process and automatically select the frame with the highest quality metrics. Default "true" |
Capture
ImageCapture
Interface for accessing the captured frame in different formats and image types.
Properties
| Property | Type | Description |
|---|---|---|
source | "front_camera" | "back_camera" | "upload" | The capture source. The value can be leveraged to perform a conditional logic, e.g. a conditional horizontal flip of the captured image. |
metadata | CaptureMetadata | The capture-related metadata. |
anonymized? | function | Accesses the anonymized image processing pipeline. Note: This method is only available when the postprocessing parameter is set to "anonymized". |
Methods
blob
ts
blob(format?): Promise< Blob >blob(format?): Promise< Blob >Converts the captured image to Blob.
Parameters
| Parameter | Type | Description |
|---|---|---|
format? | any | Desired image format. "jpeg" by default. |
Returns
Promise< Blob >
The captured frame as Blob in the specified image format.
Example
js
const imageBlob = await capture.blob()const imageBlob = await capture.blob()transform
ts
transform(transformations): ImageCapturetransform(transformations): ImageCaptureParameters
| Parameter | Type |
|---|---|
transformations | CaptureTransformations |
Returns
a copy of the ImageCapture with the specified transformations applied.
Example
js
/*
By default, the image is returned as the camera sees it,
but it can be flipped horizontally to look like it is in a mirror
*/
const mirroredImageBlob = await capture
.transform({ horizontalFlip: true })
.blob()/*
By default, the image is returned as the camera sees it,
but it can be flipped horizontally to look like it is in a mirror
*/
const mirroredImageBlob = await capture
.transform({ horizontalFlip: true })
.blob()CaptureTransformations
ts
CaptureTransformations: objectCaptureTransformations: objectImage capture transformations.
Type declaration
| Member | Type | Description |
|---|---|---|
horizontalFlip? | boolean | Mirrors the given image horizontally Default false |
CaptureFormat
ts
CaptureFormat: ImageFormatCaptureFormat: ImageFormatImage capture image format.
CaptureMetadata
ts
CaptureMetadata: objectCaptureMetadata: objectThe capture-related metadata.
Type declaration
| Member | Type | Description |
|---|---|---|
preset | NonNullable< LiqaAttributes >["preset"] | Preset used to produce the capture, reflects LiqaAttributes.preset |
source | NonNullable< LiqaAttributes >["sources"][number] | The source of the capture, reflects LiqaAttributes.source |
side? | "front" | "left" | "right" | The captured face side, either "front", "left", or "right" |
capture | LiqaAttributes["capture"] | The capture mode, reflects LiqaAttributes.capture |
Analytics
AnalyticsEventsMap
ts
AnalyticsEventsMap: objectAnalyticsEventsMap: objectLIQA analytics event names and corresponding event payloads. For more information, see CTA Events page.
Type declaration
| Member | Type | Description |
|---|---|---|
photo_upload | object | Fired when the user uploads a photo via the Source Selection screen. |
photo_upload.event_content? | "start_screen" | "companion_screen" | "instructions" | "confirmation_screen" | "companion" | - |
photo_capture | object | Fired when a photo of the user is captured. |
photo_capture.mode | "auto" | "manual" | The photo capture mode. Reflects the capture parameter of LiqaAttributes. |
photo_retake | void | Fired when the user decided to retake the photo capture. |
photo_confirm | object | Fired when the user confirmed the photo capture. |
photo_confirm.camera_facing_mode? | "front" | "back" | - |
instructions_opened | void | Fired when the user opens the instructions (Image or Video tutorial) screen. |
instructions_close | void | Fired then the user clicks "close" on the instruction screen. |
instructions_next | void | Fired then the user clicks "next" on the instruction screen |
instructions_back | void | Fired when the user clicks "back" on the instruction screen. |
instructions_viewed | object | Fired when the user views any instruction screen. |
instructions_viewed.index? | number | - |
take_photo | object | Fired when the user clicks "Take Photo" button |
take_photo.event_content? | "start_screen" | "companion_screen" | "instructions" | "confirmation_screen" | - |
continue_desktop | void | Fired when the user clicks "Continue on desktop" button in companion flow. |
qr_scanned | void | Fired when the companion QR flow is connected (QR scanned and session started). |
photo_capture_opened | void | Fired when the live stream is launched. |
quality_check_result | object | Fired when there is a problem with photo after the quality check. The payload contains only measured facts for the first reportable validated capture. Missing fields mean the corresponding metric was not evaluated. |
quality_check_result.event_content? | object | - |
quality_check_result.event_content.score? | number | - |
quality_check_result.event_content.has_face? | boolean | - |
quality_check_result.event_content.has_enough_skin? | boolean | - |
quality_check_result.event_content.has_valid_pose? | boolean | - |
quality_check_result.event_content.has_good_resolution? | boolean | - |
quality_check_result.event_content.has_no_blur? | boolean | - |
quality_check_result.event_content.has_no_occlusions? | boolean | - |
quality_check_result.event_content.has_no_eyeglasses? | boolean | - |
quality_check_result.event_content.has_no_hair_bangs? | boolean | - |
quality_check_result.event_content.has_good_exposure? | boolean | - |
quality_check_result.event_content.has_uniform_illumination? | boolean | - |
quality_check_result.event_content.has_no_shadows? | boolean | - |
quality_check_result.event_content.ignored_quality_checks? | string[] | - |
quality_check_result.event_content.errors? | ("face_mesh_failed" | "face_crop_failed" | "unsupported_file_format" | "anonymized_image_processing_error" | "detector_error")[] | - |
photo_confirmation_shown | object | Fired when the confirmation screen appears |
photo_confirmation_shown.event_content? | "camera" | "upload" | - |
error_screen_shown | object | Fired when there is an error in LIQA |
error_screen_shown.event_content? | "live_video_failed" | "wrong_file_format" | "photo_send_error" | - |
AnalyticsDetails
ts
AnalyticsDetails: { [K in keyof AnalyticsEventsMap]: Object }[keyof AnalyticsEventsMap]AnalyticsDetails: { [K in keyof AnalyticsEventsMap]: Object }[keyof AnalyticsEventsMap]LIQA analytics event detail.
Example
js
function handleLiqaAnalyticsEvent(event) {
const { name, payload } = event.detail
if (name === "photo_capture") {
if (payload.mode === "auto")
console.log("LIQA has automatically captured a photo")
if (payload.mode === "manual")
console.log("User has manually captured a photo")
}
if (name === "photo_upload")
console.log("User has uploaded a photo")
if (name === "photo_retake")
console.log("User decided to retake the photo")
if (name === "photo_confirm")
console.log("User has confirmed the photo")
}function handleLiqaAnalyticsEvent(event) {
const { name, payload } = event.detail
if (name === "photo_capture") {
if (payload.mode === "auto")
console.log("LIQA has automatically captured a photo")
if (payload.mode === "manual")
console.log("User has manually captured a photo")
}
if (name === "photo_upload")
console.log("User has uploaded a photo")
if (name === "photo_retake")
console.log("User decided to retake the photo")
if (name === "photo_confirm")
console.log("User has confirmed the photo")
}Errors
ErrorCodes
Enumeration Members
| Member | Value | Description |
|---|---|---|
UNKNOWN | 0 | An unexpected error that should never arise. Please, contact LIQA support in case of occurrence and provide reproduction details. |
LICENSE_KEY_MALFORMED | 1 | The supplied License key is malformed or missing. |
LICENSE_KEY_EXPIRED | 2 | The supplied License key has expired. |
CAMERA_NOT_FOUND | 3 | The environment has no camera devices available. |
CAMERA_PERMISSION_DENIED | 4 | - |
IMAGE_SIZE_EXCEEDED | 5 | The uploaded image exceeds maximum allowed size for processing. |
LiqaError
Extends
Error
Properties
| Property | Type | Description |
|---|---|---|
readonly name | "LiqaError" | The name for the type of error. MDN Reference |
readonly code | ErrorCodes | Internal error code. You may want to report this value when discussing an issue with LIQA support. |
readonly message | string | A human-readable description of the error. MDN Reference |
cause? | Error | The specific original cause of the error. MDN Reference |
stack? | string | A trace of which functions were called, in what order, from which line and file, and with what arguments. MDN Reference |
Misc
VERSION
ts
const VERSION: stringconst VERSION: stringThe library version.
Example
js
"6.0.0""6.0.0"preload
ts
preload(options = {}): Promise< void >preload(options = {}): Promise< void >Preloads preset's resources and features in advance. For more information, see Preload Resources page.
Parameters
| Parameter | Type | Description |
|---|---|---|
options | PreloadOptions | Preload options. |
Returns
Promise< void >
Example
ts
// Preload a preset
preload({ preset: "face" })
// Preload tutorial videos
preload({ feature: "tutorial" })
// Preload both preset and tutorial
preload({ preset: "face", feature: "tutorial" })// Preload a preset
preload({ preset: "face" })
// Preload tutorial videos
preload({ feature: "tutorial" })
// Preload both preset and tutorial
preload({ preset: "face", feature: "tutorial" })PreloadOptions
ts
PreloadOptions: objectPreloadOptions: objectType declaration
| Member | Type |
|---|---|
preset? | "face" | "face-180" | "hair" |
feature? | Feature |