LIQA™

Appearance

HTML Page ​

Below is the guide for creating an HTML page containing the LIQA web component.

The guide follows the Quick Start guide for web integration and contains only the basic setup of the LIQA web component. For more advanced usage and customization, please refer to the relevant documentation sections.

Example ​

Here is an example of the page.html file containing the LIQA web component according to scheme, ready for integration into the native application:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>
  </head>
  <body>
    <hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

    <script>
      const liqa = document.querySelector("hautai-liqa")

      /* Event forwarding */
      liqa.addEventListener("ready", () => postMessage("ready"))
      liqa.addEventListener("error", ({ detail: error }) =>
        postMessage("error", {
          code: error.code,
          message: error.message,
          cause: error.cause?.message,
        }),
      )
      liqa.addEventListener("capture", async ({ detail: capture }) =>
        postMessage("capture", {
          source: capture.source,
          data: await blobToBase64(await capture.blob()), // serialize the JS Blob object
        }),
      )

      /* Utils */
      function postMessage(name, payload) {
        const NativeApp =
          window.ReactNativeWebView /* React Native WebView */ ||
          window.NativeApp /* Android WebView */ ||
          window.webkit.messageHandlers.NativeApp /* iOS Webview */

        NativeApp.postMessage(JSON.stringify({ name, payload }))
      }

      function blobToBase64(blob) {
        return new Promise((resolve) => {
          const reader = new FileReader()
          reader.onloadend = () => resolve(reader.result)
          reader.readAsDataURL(blob)
        })
      }
    </script>
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/liqa.js"></script>
  </head>
  <body>
    <hautai-liqa license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"></hautai-liqa>

    <script>
      const liqa = document.querySelector("hautai-liqa")

      /* Event forwarding */
      liqa.addEventListener("ready", () => postMessage("ready"))
      liqa.addEventListener("error", ({ detail: error }) =>
        postMessage("error", {
          code: error.code,
          message: error.message,
          cause: error.cause?.message,
        }),
      )
      liqa.addEventListener("capture", async ({ detail: capture }) =>
        postMessage("capture", {
          source: capture.source,
          data: await blobToBase64(await capture.blob()), // serialize the JS Blob object
        }),
      )

      /* Utils */
      function postMessage(name, payload) {
        const NativeApp =
          window.ReactNativeWebView /* React Native WebView */ ||
          window.NativeApp /* Android WebView */ ||
          window.webkit.messageHandlers.NativeApp /* iOS Webview */

        NativeApp.postMessage(JSON.stringify({ name, payload }))
      }

      function blobToBase64(blob) {
        return new Promise((resolve) => {
          const reader = new FileReader()
          reader.onloadend = () => resolve(reader.result)
          reader.readAsDataURL(blob)
        })
      }
    </script>
  </body>
</html>

Important Details in HTML page ​

The following few things are critical to be correctly implemented in the page.html file to ensure the correct integration of LIQA into the native application:

Hosting the HTML Page ​

When hosting an HTML page, you have two options: hosting it locally within the application or hosting it on a CDN (Content Delivery Network).

For the simplicity, all following WebView guides load the HTML page from a string containing the page‘s HTML content (local hosting), but in a real-world application you may consider loading the page from a CDN managed by your organization.

The choice between hosting locally and hosting on a CDN depends on the specific requirements of your application. Below are some considerations to help you decide which approach is best for your use case:

Hosting locally ​

Advantages ✅Disadvantages 🔴
There is no need for having a separate hosting for LIQA. HTML page can be a part of applicationAny updates to the HTML page would require releasing a new version of the native application

Example to consider

LIQA 6.7.0 brought a new option to use Back Camera as a photo source. To activate this option in your native application with HTML page hosted locally (within the application), you would need to release a new version of the application with the updated HTML page and push the users to update the application.

Hosting on a CDN ​

Advantages ✅Disadvantages 🔴
It is possible to update the LIQA integration page independently without having to update the entire application for minor LIQA featuresA separate CDN hosting with authorization for page access is needed

Selecting the CDN hosting option, you must always ensure that the HTML page is hosted securely and the access to the page is restricted to your application only. The unauthorized access to the page may be treated as a violation of the LIQA Terms of Service.

Example to consider

Changing the styles of the LIQA web component is possible via the UI customization API. By hosting the HTML page on a CDN, you can update the styles of LIQA UI independently at any moment without having to update the entire application. This provides flexibility and agility in making changes to the page.

Recommendations ​

We recommend to start integration with the HTML page hosted locally within the application. This approach is simpler and allows you to quickly test the integration.

Once you are confident with the integration, you may consider moving the HTML page to a CDN hosting for more flexibility in managing the LIQA integration. Consider the advantages and disadvantages of both hosting options to make the right choice for your application described above.