Events

LIQA communicates with your application through standard DOM CustomEvents dispatched on the <hautai-liqa> element. Subscribing to these events lets you react to the LIQA lifecycle, collect the captured images, and handle errors.

This page is the single overview of every event LIQA emits. Each event links to the dedicated guide with a full, framework-specific example, and to the LiqaEventMap API Reference for the exact event.detail types.

Lifecycle

During a typical session the lifecycle events fire in this order:

1. "init" — LIQA has finished initializing.
2. "ready" — preset resources are loaded and LIQA is ready to operate.
3. "captures" — the user submits the image collection after all quality criteria pass.
4. "close" — the user requests to close LIQA.

The "error" and "analytics" events are cross-cutting: they may fire at any point during the session rather than at a fixed step.

Event reference

Event	Fires when	event.detail	Guide
"init"	LIQA has finished initializing.	void	This page
"ready"	The preset's image-processing resources have loaded and LIQA is ready to operate.	void	Loading Screen
"captures"	All AI quality criteria pass and the user submits the image collection.	ImageCapture[]	Collection of Images
"analytics"	A customer-trackable analytics (CTA) event occurs.	AnalyticsDetails	Receive CTA Events
"error"	A LiqaError occurs.	LiqaError	Handle Errors
"close"	The user requests to close LIQA.	void	This page

Deprecated aliases

Two older event names are still dispatched for backwards compatibility but are deprecated:

• "loaded" — alias of "ready". Use "ready" instead.
• "capture" — fired once per image instead of once per collection. Use "captures" instead.

Subscribing to a deprecated event logs a deprecation warning to the console.

Subscribing to an event

All events are subscribed to the same way — add an event listener on the <hautai-liqa> element. The example below uses the "init" event; swap the event name and listener for any other event.

JavaScript

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("init", handleLiqaInit)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("init", handleLiqaInit)

React

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("init", handleLiqaInit)
 
    return () => ref.current.removeEventListener("init", handleLiqaInit)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("init", handleLiqaInit)
 
    return () => ref.current.removeEventListener("init", handleLiqaInit)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

Vue

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @init="handleLiqaInit"
></hautai-liqa>

Angular

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (init)="handleLiqaInit($event)"
></hautai-liqa>

Svelte

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:init="{handleLiqaInit}"
></hautai-liqa>

init

Fired when LIQA has finished initializing. Its event.detail is void.

Use it to know that the <hautai-liqa> element has booted and started its session. For a notification that LIQA has finished loading its preset resources and is ready for the user to interact, listen for "ready" instead.

ready

Fired when the preset's image-processing resources have finished loading in the background and LIQA is ready to start the user interaction session. Its event.detail is void.

This is the recommended signal for hiding your own loading indicator and revealing LIQA. See the Loading Screen guide for a complete example.

captures

Fired when all AI quality criteria pass and the user submits the image collection. The submitted standardized images are available as an array of ImageCapture objects on event.detail.

See Collection of Images for a complete example, including how to handle the per-side captures of the face-180 preset.

analytics

Fired when a customer-trackable analytics event occurs. The detail shape is { name, payload }; individual CTA events such as photo_capture and photo_upload are exposed through this single event via event.detail.name rather than as standalone DOM events.

This is a paid feature. See Receive CTA Events for the full list of trackable events and a complete example.

error

Fired when a LiqaError occurs, for example when the license key is expired or the network connection is lost. The error is available on event.detail.

It is highly recommended to subscribe to this event and forward errors to your error tracking system. See Handle Errors for a complete example and recommended fallback strategies.

close

Fired when the user requests to close LIQA. Its event.detail is void.

Use it to dismiss or unmount the LIQA experience in your application — for example, to navigate away or hide the <hautai-liqa> element when the user taps a close control.