Appearance
Quick Start
Here is a 3-minute guide of LIQA integration into your web application with the default LIQA configuration.
Access credentials
- Contact Haut.AI to acquire the license for LIQA. See the Licensing section for more details.
- Receive a CDN (Content Delivery Network) URL
"SOURCE_URL_PROVIDED_BY_HAUT.AI"
. This URL is used for downloading LIQA assets during LIQA sessions. - 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
jsconst
liqa =document .querySelector ("hautai-liqa")liqa .addEventListener ("capture",handleImageCapture )
jsconst
liqa =document .querySelector ("hautai-liqa")liqa .addEventListener ("capture",handleImageCapture )
tsx
tsxexport function
App () { constref =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 > ) }
tsxexport function
App () { constref =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
tsasync function
handleImageCapture (event ) { constcapture =event .detail constimage = awaitcapture .blob () // returns the captured image as Blob JPEG // ... app logic handling the captured image ... }
tsasync function
handleImageCapture (event ) { constcapture =event .detail constimage = awaitcapture .blob () // returns the captured image as Blob JPEG // ... app logic handling the captured image ... }