LIQA™

Appearance

Quick Start ​

Here is a 3-minute guide of LIQA integration into your web application with the default LIQA configuration.

  1. Access credentials
  2. Import
  3. Integration
  4. Collection of image

Access credentials ​

  1. Contact Haut.AI to acquire the license for LIQA. See the Licensing section for more details.
  2. Receive a CDN (Content Delivery Network) URL "SOURCE_URL_PROVIDED_BY_HAUT.AI". This URL is used for downloading LIQA assets during LIQA sessions.
  3. Receive a license key "LICENSE_KEY_PROVIDED_BY_HAUT.AI". This key is used for identifying your Company during LIQA sessions.

Import ​

Connect the LIQA JavaScript library to your web application via the <script> tag:

html
<script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>
<script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>

This script exposes <hautai-liqa></hautai-liqa> tag that encapsulates the LIQA user-facing interface and logic, ready to be used.

Integration ​

Place the <hautai-liqa> tag in the desired place in your application markup:

tsx
tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

tsx
<hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

This script inserts LIQA into the selected place of your application and automatically starts the LIQA session.

Integration problems?

If you face any issues at this moment, please check the Troubleshooting page for most common problems and solutions.

Collection of image ​

Collect the standardized image emitted by LIQA by adding an event listener for the "capture" event:

js
js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("capture", handleImageCapture)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("capture", handleImageCapture)
tsx
tsx
export function App() {
  const ref = React.useRef()
 
  React.useEffect(() => {
    ref.current.addEventListener("capture", handleImageCapture)
 
    return () => ref.current.removeEventListener("capture", handleImageCapture)
  })
 
  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("capture", handleImageCapture)
 
    return () => ref.current.removeEventListener("capture", handleImageCapture)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    ></hautai-liqa>
  )
}
vue
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @capture="handleImageCapture"
></hautai-liqa>
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @capture="handleImageCapture"
></hautai-liqa>
html
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (capture)="handleImageCapture($event)"
></hautai-liqa>
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (capture)="handleImageCapture($event)"
></hautai-liqa>
svelte
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:capture="{handleImageCapture}"
></hautai-liqa>
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:capture="{handleImageCapture}"
></hautai-liqa>

This script offers an event listener with a mockup function for handling the LIQA ImageCapture. The simplest handleImageCapture function converts the captured image into a Blob JPEG that can be later displayed or sent to the server. Here is an example:

ts
ts
async function handleImageCapture(event) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob JPEG
 
  // ... app logic handling the captured image ...
}

ts
async function handleImageCapture(event) {
  const capture = event.detail
 
  const image = await capture.blob() // returns the captured image as Blob JPEG
 
  // ... app logic handling the captured image ...
}