📗API [v4.0]

This page describes LIQA integration and API functions. Simply copy-paste code snippets into your application.

Quick start (Default integration)

  1. Receive from Haut.AI URL for your LIQA integration: "SOURCE_URL_PROVIDED_BY_HAUT.AI". It should always start from https://

  2. Embed the following lines into your application for default LIQA integration.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <style type="text/css">
      body,
      html {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script
      data-liqa-config='
      {
          "iframeUrl": "SOURCE_URL_PROVIDED_BY_HAUT.AI"
      }
      '
      src="SOURCE_URL_PROVIDED_BY_HAUT.AI/startup.js"
    ></script>
    <script type="text/javascript">
      Liqa(async function () {
        Liqa.fn.start();
      });

      Liqa.fn.onImage((image) => {
        console.log('Image:', image)
      });
    </script>
  </body>
</html>

Change size of iframe window

By default, LIQA will create iframe that takes all available window size. You can change the size of iframe tag that LIQA uses by adjusting it in <style> tag:

<style type="text/css">
  body,
  html {
    padding: 0;
    margin: 0;
  }
  iframe {
    height: 100%; 
    width: 100%;
  }
</style>

Change LIQA start properties

By default, LIQA uses predefined user flow and user interface (UI). You can redefine the properties by adjusting it in data-liqa-config parameter of <script> tag:

<body>
  <script
    data-liqa-config='
      {
          "iframeUrl": "SOURCE_URL_PROVIDED_BY_HAUT.AI",
          "cssUrl": "PUT_HERE_URL_TO_YOUR_CSS_STYLESHEET",
          "distancePresets": "hair",
          "autostart": false
      }
      '
    src="SOURCE_URL_PROVIDED_BY_HAUT.AI/startup.js"
  ></script>
</body>

Supported start parameters

Change LIQA texts

By default, LIQA uses predefined texts to communicate with user on English language. You can redefine all the texts by passing new texts via Liqa.fn.setI18n() method:

<script type="text/javascript">
    Liqa(async function () {
      Liqa.fn.start();

      Liqa.fn.setI18n({
        confirmBtn: "Confirm!",
        retakeBtn: "Retake now",
      });
    });
  </script>

Supported text parameters

Catch events [under development]

This functionality is currently under development

By default, LIQA returns multiple events during its work to help your page to understand what is happening. You can subscribe to these events by using Liqa.fn.onEvent() method:

<script type="text/javascript">
  Liqa(async function () {
    Liqa.fn.start();
  });

  Liqa.fn.onEvent((event) => {
    // console.log('Event:', event)
  });
</script>

Supported events

To be defined in the nearest updates.

Get image

LIQA returns as output a final approved user image, that passed through AI model quality criteria and was confirmed by the user. The image is encoded as base64 (a common image to bytes encoding method). You can collect image by using Liqa.fn.onImage() method:

<script type="text/javascript">
  Liqa(async function () {
    Liqa.fn.start();
  });

  Liqa.fn.onImage((image) => {
    console.log('Image:', image)
  });
</script>

Full options example code

This example shows the most verbose version of LIQA integration:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <style type="text/css">
      body,
      html {
        padding: 0;
        margin: 0;
      }
      iframe {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <script
      data-liqa-config='
        {
            "iframeUrl": "SOURCE_URL_PROVIDED_BY_HAUT.AI",
            "cssUrl": "URL_TO_YOUR_CSS_STYLESHEET",
            "distancePresets": "hair",
            "autostart": false
        }
        '
      src="SOURCE_URL_PROVIDED_BY_HAUT.AI/startup.js"
    ></script>
    <script type="text/javascript">
      Liqa(async function () {
        Liqa.fn.start();

        Liqa.fn.setI18n({
          confirmBtn: "Confirm!",
          retakeBtn: "Retake now",
        });
      });

      Liqa.fn.onEvent((event) => {
        // console.log('Event:', event)
      });

      Liqa.fn.onImage((image) => {
        console.log('Image:', image)
      });
    </script>
  </body>
</html>

Help needed?

We are continuously improving our product and we are happy to listen to your voice.

PreviousDescription and RequirementsNextRelease Changelog

Last updated