Going Live

Use this checklist when the LIQA integration already works and your team is preparing a real client launch. These steps focus on production outcomes first: users should have a fallback if something fails, your team should be able to monitor issues, security policy should allow LIQA to run, and releases should be controlled.

• Going Live
  • Add errors handling logic
  • Set up CSP for using LIQA
  • Set up production activations
  • Receive CTA events
  • Lock LIQA version
    • Always latest stable
    • Version locked

Add errors handling logic

Error handling protects the user journey and gives your support team enough context to react. Errors might happen during the LIQA lifecycle, for example when the license key is expired or the network connection is lost. The best practice from an application design perspective is to handle these errors, provide the user with a fallback experience in minor cases, and notify Haut.AI about the issue in critical cases.

It is highly recommended to subscribe to the "error" event and forward the received errors to your error tracking system to simplify the monitoring and debugging processes. You can use the Error Codes API Reference to better identify the nature of the caught error and offer the user a proper fallback experience.

Here is a code snippet example for this action:

JavaScript

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("error", handleLiqaError)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("error", handleLiqaError)

React

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

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

Vue

<hautai-liqa
  license="xxx-xxx-xxx"
  @error="handleLiqaError"
></hautai-liqa>

Angular

<hautai-liqa
  license="xxx-xxx-xxx"
  (error)="handleLiqaError($event)"
></hautai-liqa>

Svelte

<hautai-liqa
  license="xxx-xxx-xxx"
  on:error="{handleLiqaError}"
></hautai-liqa>

Where the handleLiqaError event listener might look like this:

ts
async function handleLiqaError(event) {
  const error = event.detail
 
  if (error.code === 2) { // license key expired
 
    // ... app logic handling the caught error ...
 
  }
}

ts
async function handleLiqaError(event) {
  const error = event.detail
 
  if (error.code === 2) { // license key expired
 
    // ... app logic handling the caught error ...
 
  }
}

Set up CSP for using LIQA

Content Security Policy setup is important for clients that already protect their pages with a strict browser security policy. The goal is to keep that protection while still allowing LIQA to load assets, run WebAssembly, use workers, and report technical diagnostics.

Your application might have a Content Security Policy (CSP) configured to leverage user protection. To use LIQA on a page with a CSP, please, ensure that the following directives are included in the CSP:

connect-src: SOURCE_URL_PROVIDED_BY_HAUT.AI
script-src: 'unsafe-inline' 'unsafe-eval' SOURCE_URL_PROVIDED_BY_HAUT.AI
style-src: 'unsafe-inline' SOURCE_URL_PROVIDED_BY_HAUT.AI
worker-src: blob:

If you enable use-iframe integration mode, also allow LIQA to be embedded as a frame (see use-iframe):

frame-src: SOURCE_URL_PROVIDED_BY_HAUT.AI

For older CSP versions, use child-src instead of frame-src.

TIP

The script-src: 'unsafe-eval' is used as a wider-supported alternative to script-src: 'wasm-unsafe-eval'. If you don‘t need to support older browsers e.g Safari < 16, Chrome < 97, you can consider directly using script-src: 'wasm-unsafe-eval'.

LIQA uses third-party services for remote issues debugging and anonymized aggregated usage analytics, which helps the Haut.AI team to constantly improve the quality of the products.

If your application has a CSP configured, also include the following domain in connect-src:

connect-src: *.ingest.sentry.io

LIQA analytics requests are served from the LIQA origin (SOURCE_URL_PROVIDED_BY_HAUT.AI) and are already covered by the base CSP directives above.

If *.ingest.sentry.io is blocked, the remote issues debugging by Haut.AI will be limited because not enough technical information is collected during the LIQA sessions.

Set up production activations

Production activations make sure LIQA works only on approved client environments and avoids launch-day license errors.

LIQA identifies the application by the license key and the list of activations. If the activation is not included in your license, the Haut.AI team might reach you to inform you about the licensing issues.

Please, make sure that all your production activations are included in the list, connected with your license. You can find more information about activations and how to update the included activations on the licensing page.

Receive CTA events paid

CTA events are useful when your product, analytics, or customer success team needs to understand how users move through the LIQA capture journey: where they start, retake, upload, confirm, or drop off.

This feature is paid

This feature unlocks the knowledge about the user behavior in LIQA, it is regularly updated to provide the most accurate representative events and attributes. Therefore, it is available as an additional paid service. Please, contact the Haut.AI team to get more information about the pricing.

Analytics events help to build a customer journey map / funnel and to understand the user behavior in the application. LIQA collects key Customer Target Actions (CTA) listed below and in the Analytics Events table. The list of events might be extended in the future.

These events can be received by your application and forwarded to your analytics system. To receive LIQA CTA events, add an event listener for the "analytics" event:

Track events by name

CTA events are exposed through the single LIQA DOM "analytics" event. They are not dispatched as standalone DOM events, so use event.detail.name to track each event independently.

JavaScript

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("analytics", handleAnalyticsEvent)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("analytics", handleAnalyticsEvent)

React

tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("analytics", handleAnalyticsEvent)
 
    return () => ref.current.removeEventListener("analytics", handleAnalyticsEvent)
  })
 
  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("analytics", handleAnalyticsEvent)
 
    return () => ref.current.removeEventListener("analytics", handleAnalyticsEvent)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}

Vue

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @analytics="handleAnalyticsEvent"
></hautai-liqa>

Angular

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

Svelte

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

Trackable analytics events

The following analytics event names can be received by clients through the "analytics" event:

Event name	Description	Payload
photo_capture	Fired when a photo of the user is captured.	{ mode, event_content? }
photo_upload	Fired when the user uploads a photo.	{ event_content? }
photo_retake	Fired when the user decides to retake the photo capture.	void
photo_confirm	Fired when the user confirms the photo capture.	{ camera_facing_mode? }
photo_confirmation_shown	Fired when the confirmation screen appears.	{ event_content? }
instructions_opened	Fired when the user opens the instructions screen.	void
instructions_close	Fired when the user closes the instructions screen.	void
instructions_next	Fired when the user clicks next on the instructions screen.	void
instructions_back	Fired when the user clicks back on the instructions screen.	void
instructions_viewed	Fired when the user views an instruction screen.	{ index? }
take_photo	Fired when the user clicks a take photo button.	{ event_content? }
continue_desktop	Fired when the user clicks continue on desktop in companion flow.	void
companion_flow_start	Fired when the companion flow starts after the mobile device connects.	void
companion_flow_finish	Fired when desktop receives all transferred companion files.	void
qr_scanned	Fired when the companion QR flow is connected.	void
photo_capture_opened	Fired when the live stream is launched.	void
quality_check_result	Fired when there is a reportable post-capture quality check result.	{ event_content? }
error_screen_shown	Fired when a LIQA error screen is shown.	{ event_content? }

Inside the handleAnalyticsEvent function a custom analytics data processing can be implemented:

ts
async function handleAnalyticsEvent(event) {
  switch (event.detail.name) {
    case "photo_capture": {
      const { mode } = event.detail.payload
      console.log("Track LIQA photo capture", { mode })
      break
    }
    case "photo_upload":
      console.log("Track LIQA photo upload")
      break
    case "quality_check_result":
      console.log("Track LIQA quality check result", event.detail.payload.event_content)
      break
    default:
      console.log("Track LIQA CTA event", event.detail.name, event.detail.payload)
  }
}

ts
async function handleAnalyticsEvent(event) {
  switch (event.detail.name) {
    case "photo_capture": {
      const { mode } = event.detail.payload
      console.log("Track LIQA photo capture", { mode })
      break
    }
    case "photo_upload":
      console.log("Track LIQA photo upload")
      break
    case "quality_check_result":
      console.log("Track LIQA quality check result", event.detail.payload.event_content)
      break
    default:
      console.log("Track LIQA CTA event", event.detail.name, event.detail.payload)
  }
}

Note

"ready" and "error" events are not included in the "analytics" event listener and can be acquired separately without purchasing the CTA events feature.

These events are not included in the CTA events because they are not related to the user behavior in LIQA and are designed to be used for user experience customization and error handling.

Lock LIQA version optional

Version locking is a release-management choice. The default latest-stable URL gives your users ongoing LIQA improvements automatically; a locked version gives your team more control when internal validation or regulated release windows require it.

You can optionally lock the LIQA version to a specific one to avoid automatic updates. This might be useful in case your processes require strict control over the updates, and you have a dedicated team for testing the new versions before updating your application in production.

Always latest stable default

In the default integration LIQA is always accessed via the single link:

src = "SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"

In this case, your application always consumes the latest stable version of LIQA with all minor improvements, new features and bug fixes automatically delivered to your application and applied with no breaking changes.

The history of introduced changes is reflected in the Changelog section, which updates at the same time as the new versions are released.

Note

Major LIQA versions are not released frequently and are always communicated a long time in advance by the Haut.AI team. The major versions are the only ones that might introduce breaking changes and require integration work on your side and a dedicated testing phase.

Version locked

As an alternative, LIQA can be accessed via the link to a specific version of the library. Example: a link to 6.4.0 version:

"SOURCE_URL_PROVIDED_BY_HAUT.AI/6.4.0/liqa.js"

or to a specific range of minor versions to allow only bug fixes to be delivered automatically. Example: a link to the latest 6.4.x version:

"SOURCE_URL_PROVIDED_BY_HAUT.AI/6.4/liqa.js"

or to a specific range of major versions to allow only new features and bug fixes to be delivered automatically. Example: a link to the latest 6.x version:

"SOURCE_URL_PROVIDED_BY_HAUT.AI/6/liqa.js"

In this case, you can flexibly control the updates and apply them to your application only after the testing phase with a desired level of granularity.

The version tag can be found in the Changelog section, where you can find the release notes and the list of changes introduced in the specific version.

Important notice about specific version locking

1. Haut.AI does not deliver any updates, bug fixes or improvements to the older version. Please, use either the latest stable version or a lock for a specific range of minor/major versions to get the improvements and bug fixes automatically.
2. Haut.AI does not guarantee the compatibility of the older versions with the OS versions and browser versions, released after the locked LIQA version release date. Please, always use the error handling logic and regularly check the Changelog for new LIQA versions.
3. Haut.AI might issue a notice about the exact date when the older version will be not available for download. After this date, the older version will be removed from the CDN and the link to the older version will be broken. Please, check the Changelog for the notice about the older version removal.