LIQA™

Appearance

Text Messages ​

LIQA has a default English user interface. It is possible to modify the phrases to match the language of your application for localization or slightly change the text messages wording to better fit your application's vibe.

Use the i18n attribute to customize the user interface text messages. If the attribute is omitted, the default interface text messages in English will be used. See all available options below.

Migration note

The legacy messages attribute is deprecated and kept only for backward compatibility. Use i18n for all new integrations.

Usage ​

The i18n attribute accepts a string containing a valid JSON object:

tsx
tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  lang="fr"
  i18n='{ "fr": { "preview": { "retake": "Reprendre", "submit": "Confirmer" } } }'
></hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  lang="fr"
  i18n='{ "fr": { "preview": { "retake": "Reprendre", "submit": "Confirmer" } } }'
></hautai-liqa>

Language selection ​

LIQA uses the lang attribute to select the active UI language. If it is not provided, LIQA uses the browser language. When translations for the chosen language are not available, LIQA falls back to English.

JSON object structure ​

Provide text messages as a JSON object that mirrors the UI text structure. This lets you override specific screens, sections, and keys. Alongside regular language codes, you can use "*" as a language fallback when the selected language has no translations available. If translations are available for the selected language, "*" overrides are not applied; use global overrides instead.

To globally override text for all languages, specify it on the top level (don't use a nested language structure). You can mix language-specific and global overrides in the same object. Global overrides take precedence over all other translations.

The structure is described below. Some screens contain deeper nesting (for example, face_live_video.face_angle_deviation.pitch_up), so follow the default values list for exact paths.

ts
ts
{
  [lang: LanguageCode]: { // Language-specific overrides
    [key: ScreenName]: {
      [key: MessageKey]: TextMessage
      [key: SectionName]: {
        [key: MessageKey]: TextMessage
      }
    }
  }
 
  [key: ScreenName]: { // Global overrides
    [key: MessageKey]: TextMessage
    [key: SectionName]: {
      [key: MessageKey]: TextMessage
    }
  }
}

ts
{
  [lang: LanguageCode]: { // Language-specific overrides
    [key: ScreenName]: {
      [key: MessageKey]: TextMessage
      [key: SectionName]: {
        [key: MessageKey]: TextMessage
      }
    }
  }
 
  [key: ScreenName]: { // Global overrides
    [key: MessageKey]: TextMessage
    [key: SectionName]: {
      [key: MessageKey]: TextMessage
    }
  }
}

Example ​

To modify source selection screen texts, we should identify:

ts
Language = "fr"
ScreenName = "source_selection"
SectionName = "camera_permissions_warning"
MessageKey = "title"
TextMessage = "<Here goes your string to replace the default value>"
Language = "fr"
ScreenName = "source_selection"
SectionName = "camera_permissions_warning"
MessageKey = "title"
TextMessage = "<Here goes your string to replace the default value>"

And the JSON object will look like this:

json
{
  "fr": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  }
}
{
  "fr": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  }
}

Passing it to the i18n attribute will replace the default text message value for specified screen and specified section with the text provided in the JSON object.

To provide fallback overrides for any unsupported language, use "*":

json
{
  "*": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  },
  "fr": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  }
}
{
  "*": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  },
  "fr": {
    "source_selection": {
      "camera_permissions_warning": {
        "title": "<Here goes your string to replace the default value>"
      }
    }
  }
}

To apply a global override for all languages, drop the language key:

json
{
  "source_selection": {
    "camera_permissions_warning": {
      "title": "<Here goes your string to replace the default value>"
    }
  }
}
{
  "source_selection": {
    "camera_permissions_warning": {
      "title": "<Here goes your string to replace the default value>"
    }
  }
}

Partial Text Replacement is Supported

You don't have to specify every existing text key. The default values will be used for all omitted keys.

Default Values ​

All the available message keys and their default values are shown in the snippet below:

json
{
  "source_selection": {
    "title": "Select the capture option",
    "camera_permissions_warning": {
      "title": "Camera access denied",
      "instructions_reset": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "instructions_reload": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "video_only": {
        "instructions_reset": "Update browser's camera permissions for this app to use camera",
        "instructions_reload": "Update browser's camera permissions for this app to use camera"
      }
    },
    "camera_video": "Take a photo",
    "upload_photo": "Upload from device",
    "switch_camera": "Switch camera",
    "toggle_flashlight": "Toggle flashlight"
  },
  "tutorial": {
    "how_to_take_a_photo": "How to take a great photo",
    "good_lighting": "Your face should be well lit\nfrom a front",
    "hair_away_from_face": "Move hair back",
    "makeup_off": "Remove any make-up\nor mask",
    "glasses_off": "Remove glasses",
    "tip": "Tip",
    "take_photo": "Take a photo",
    "upload_photo": "Upload photo",
    "next": "Next",
    "close": "Close"
  },
  "face_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "forehead_not_visible": "Please make sure your forehead is visible fully",
    "glasses_detected": "Please remove glasses",
    "capturing": "Look at the camera"
  },
  "face_180_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "rotating_left": "Move your head slowly",
    "rotating_right": "Move your head slowly",
    "forehead_not_visible": "Please make sure your forehead is visible fully",
    "glasses_detected": "Please remove glasses",
    "capturing_front": "Stay still",
    "capturing_left": "Stay still",
    "capturing_right": "Stay still"
  },
  "hair_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_close": "Move further away",
    "lighting_insufficient": "Find a brighter place",
    "hair_not_visible": "Make your hair visible",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "capturing": "Make your hair visible\nPhoto will be collected automatically"
  },
  "image_quality": {
    "face_displaced": {
      "title": "No face detected",
      "description": "Make sure your face is visible"
    },
    "face_pitch_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_roll_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_yaw_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "lighting_insufficient": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_excessive": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_angle_deviation": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "quality_noise": {
      "title": "Too much noise",
      "description": "Make sure your face is well lit"
    },
    "quality_blur": {
      "title": "Image is blurry",
      "description": "Try taking a sharper photo for better results"
    },
    "quality_resolution": {
      "title": "Low resolution",
      "description": "Upload a higher resolution photo"
    },
    "quality_full_face": {
      "title": "Full face is not visible",
      "description": "Ensure your entire face is within the frame"
    },
    "low_image_quality": {
      "title": "Your image has a few issues",
      "description": "Use a better quality photo for accurate analysis"
    },
    "glasses_detected": {
      "title": "Glasses detected",
      "description": "Please remove glasses"
    },
    "forehead_occluded": {
      "title": "Forehead not fully visible",
      "description": "Please make sure your forehead is visible fully"
    }
  },
  "preview": {
    "title": "Well done!",
    "retake": "Retake",
    "submit": "Submit",
    "upload": "Upload photo",
    "image_issue": "Image issue"
  },
  "error": {
    "title": "Ooops",
    "description": "Live Video failed because of some internal error. Please, use Upload photo option.",
    "video_only": {
      "description": "Internal error. Please try reloading the page."
    }
  },
  "companion": {
    "invite_title": "Scan this QR code to take a photo with your smartphone",
    "invite_description": "The results will be shown here",
    "camera_permission_title": "Camera permissions",
    "camera_permission_description": "Allow this app to use your selfie camera",
    "camera_access_denied_title": "Camera access denied",
    "camera_access_denied_description": "Update browser's camera permissions for this app to use camera",
    "active_title": "Take a selfie on your smartphone",
    "uploading_title": "Uploading",
    "uploading_description": "File processing in progress",
    "done_title": "Continue on your desktop",
    "done_description": "You can close this page and continue on another device",
    "error_title": "Ooops",
    "error_description": "Photo capture failed because of some internal error.\nPlease, reload the page and try again.",
    "or": "or",
    "upload_photo": "Upload photo",
    "continue_on_desktop": "Continue on desktop",
    "qr_retry": "Retry generating the QR code"
  },
  "license": {
    "refresh": "Try again",
    "title": "Oops! Something went wrong",
    "description": "Please try again later or contact support if the issue persists"
  },
  "loading": {
    "processing_photo": "Processing the photo",
    "processing_photo_180": "Processing photos",
    "processing_may_take_few_seconds": "It may take a few seconds"
  },
  "illumination_compass": {
    "title": "Illumination alignment meter",
    "perfect_alignment": "Illumination perfectly aligned",
    "acceptable_range": "Illumination within acceptable range",
    "adjust_right": "Illumination needs adjustment. Move right",
    "adjust_left": "Illumination needs adjustment. Move left"
  },
  "image_size_error": {
    "title": "Image is too large",
    "description": "Please upload a smaller image in order to use an anonymization feature",
    "upload_smaller": "Upload smaller image",
    "use_camera": "Use camera instead"
  }
}
{
  "source_selection": {
    "title": "Select the capture option",
    "camera_permissions_warning": {
      "title": "Camera access denied",
      "instructions_reset": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "instructions_reload": "Update browser's camera permissions for this app to use a camera or upload a photo from the device.",
      "video_only": {
        "instructions_reset": "Update browser's camera permissions for this app to use camera",
        "instructions_reload": "Update browser's camera permissions for this app to use camera"
      }
    },
    "camera_video": "Take a photo",
    "upload_photo": "Upload from device",
    "switch_camera": "Switch camera",
    "toggle_flashlight": "Toggle flashlight"
  },
  "tutorial": {
    "how_to_take_a_photo": "How to take a great photo",
    "good_lighting": "Your face should be well lit\nfrom a front",
    "hair_away_from_face": "Move hair back",
    "makeup_off": "Remove any make-up\nor mask",
    "glasses_off": "Remove glasses",
    "tip": "Tip",
    "take_photo": "Take a photo",
    "upload_photo": "Upload photo",
    "next": "Next",
    "close": "Close"
  },
  "face_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "forehead_not_visible": "Please make sure your forehead is visible fully",
    "glasses_detected": "Please remove glasses",
    "capturing": "Look at the camera"
  },
  "face_180_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_far": "Move closer",
    "face_distance_close": "Move further away",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "lighting_insufficient": "Find a brighter place",
    "lighting_excessive": "Find a darker place",
    "lighting_angle_deviation": "Turn to the light source",
    "rotating_left": "Move your head slowly",
    "rotating_right": "Move your head slowly",
    "forehead_not_visible": "Please make sure your forehead is visible fully",
    "glasses_detected": "Please remove glasses",
    "capturing_front": "Stay still",
    "capturing_left": "Stay still",
    "capturing_right": "Stay still"
  },
  "hair_live_video": {
    "face_displaced": "Place face inside frame",
    "face_distance_close": "Move further away",
    "lighting_insufficient": "Find a brighter place",
    "hair_not_visible": "Make your hair visible",
    "face_angle_deviation": {
      "pitch_up": "Raise your head",
      "pitch_down": "Lower your head",
      "yaw_left": "Look straight ahead",
      "yaw_right": "Look straight ahead",
      "roll_clockwise": "Tilt your head right",
      "roll_counter_clockwise": "Tilt your head left"
    },
    "capturing": "Make your hair visible\nPhoto will be collected automatically"
  },
  "image_quality": {
    "face_displaced": {
      "title": "No face detected",
      "description": "Make sure your face is visible"
    },
    "face_pitch_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_roll_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "face_yaw_angle_deviation": {
      "title": "Incorrect angle",
      "description": "Turn face to camera"
    },
    "lighting_insufficient": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_excessive": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "lighting_angle_deviation": {
      "title": "Poor lighting",
      "description": "Make sure your face is well lit"
    },
    "quality_noise": {
      "title": "Too much noise",
      "description": "Make sure your face is well lit"
    },
    "quality_blur": {
      "title": "Image is blurry",
      "description": "Try taking a sharper photo for better results"
    },
    "quality_resolution": {
      "title": "Low resolution",
      "description": "Upload a higher resolution photo"
    },
    "quality_full_face": {
      "title": "Full face is not visible",
      "description": "Ensure your entire face is within the frame"
    },
    "low_image_quality": {
      "title": "Your image has a few issues",
      "description": "Use a better quality photo for accurate analysis"
    },
    "glasses_detected": {
      "title": "Glasses detected",
      "description": "Please remove glasses"
    },
    "forehead_occluded": {
      "title": "Forehead not fully visible",
      "description": "Please make sure your forehead is visible fully"
    }
  },
  "preview": {
    "title": "Well done!",
    "retake": "Retake",
    "submit": "Submit",
    "upload": "Upload photo",
    "image_issue": "Image issue"
  },
  "error": {
    "title": "Ooops",
    "description": "Live Video failed because of some internal error. Please, use Upload photo option.",
    "video_only": {
      "description": "Internal error. Please try reloading the page."
    }
  },
  "companion": {
    "invite_title": "Scan this QR code to take a photo with your smartphone",
    "invite_description": "The results will be shown here",
    "camera_permission_title": "Camera permissions",
    "camera_permission_description": "Allow this app to use your selfie camera",
    "camera_access_denied_title": "Camera access denied",
    "camera_access_denied_description": "Update browser's camera permissions for this app to use camera",
    "active_title": "Take a selfie on your smartphone",
    "uploading_title": "Uploading",
    "uploading_description": "File processing in progress",
    "done_title": "Continue on your desktop",
    "done_description": "You can close this page and continue on another device",
    "error_title": "Ooops",
    "error_description": "Photo capture failed because of some internal error.\nPlease, reload the page and try again.",
    "or": "or",
    "upload_photo": "Upload photo",
    "continue_on_desktop": "Continue on desktop",
    "qr_retry": "Retry generating the QR code"
  },
  "license": {
    "refresh": "Try again",
    "title": "Oops! Something went wrong",
    "description": "Please try again later or contact support if the issue persists"
  },
  "loading": {
    "processing_photo": "Processing the photo",
    "processing_photo_180": "Processing photos",
    "processing_may_take_few_seconds": "It may take a few seconds"
  },
  "illumination_compass": {
    "title": "Illumination alignment meter",
    "perfect_alignment": "Illumination perfectly aligned",
    "acceptable_range": "Illumination within acceptable range",
    "adjust_right": "Illumination needs adjustment. Move right",
    "adjust_left": "Illumination needs adjustment. Move left"
  },
  "image_size_error": {
    "title": "Image is too large",
    "description": "Please upload a smaller image in order to use an anonymization feature",
    "upload_smaller": "Upload smaller image",
    "use_camera": "Use camera instead"
  }
}