Going Live ​

Here is a checklist of the steps to take care of before going live with LIQA embedded into your application.

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

Add errors handling logic ​

The 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 would be to handle these errors and provide the user with a fallback user experience in minor cases, and to notify the 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:

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

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

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>
  )
}

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

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

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

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

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

<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 ​

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

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

Add LIQA analytics tools to CSP ​

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.

In case your application has a CSP configured, please, include the following domains in the CSP directives:

connect-src: *.ingest.sentry.io www.googletagmanager.com www.google-analytics.com
script-src: www.googletagmanager.com www.google-analytics.com

connect-src: *.ingest.sentry.io www.googletagmanager.com www.google-analytics.com
script-src: www.googletagmanager.com www.google-analytics.com

If your application has any of these domains 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 ​

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 ​

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 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:

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

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

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>
  )
}

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

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

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

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

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

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

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

ts
async function handleAnalyticsEvent(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")
}

ts
async function handleAnalyticsEvent(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")
}

Lock LIQA version optional ​

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"

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.

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"

"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"

"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"

"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.