Localization

Every text in the web components is completely customizable and localizable, multiple languages are supported and the default language of the components can be changed with the lang attribute.

There are also two more attributes regarding localization which are:

Attribute	Type	Explanation
localization-packs localizationPacks	LocalizationPack[]	You can pass an array of localization packs to this attribute, if you pass a localization pack that already exists it will be merged with the existing one.
localization-variables localizationVariables	Record<number | string, any>	The localization variables are usually dynamic values that can be injected inside the localization strings through the { variable } syntax.

LocalizationPack Interface

interface LocalizationPack {
    data: LocalizationPackData;
    language: string;
}

interface LocalizationPackData {
    [key: string]: string | LocalizationPackData;
}

As a reference, here’s our english language pack:

{
  data: {
    auth: {
      step: {
        instructions: {
          headline: 'Authentication Process',
          text: 'Take a selfie to authenticate through Keyless on the platform.',
          button: 'Continue'
        },
        'camera-permission': {
          prompt: {
            headline: 'Allow Camera Access',
            text: 'We need access to your camera to authenticate you. Please allow the browser to access your camera.',
            button: 'Continue'
          },
          granted: {
            headline: 'Allow Camera Access',
            text: 'We need access to your camera to authenticate you. Please allow the browser to access your camera.',
            button: 'Continue'
          },
          denied: {
            headline: 'Camera Access Denied',
            text: 'Looks like you denied camera access on this website, we need access to your camera to authenticate you.\n\nPlease allow the browser to access your camera.',
            button: 'Retry'
          }
        },
        connecting: {
          headline: 'Connecting...',
          text: 'Please wait while we establish a secure connection.'
        },
        sending: {
          tip: 'Keep your face still'
        },
        processing: {
          headline: 'Authenticating...',
          text: 'Your selfie was captured correctly, we are processing your photo'
        },
        done: {
          headline: 'Authentication Successful',
          text: 'You can now proceed to the platform.'
        },
        error: {
          headline: 'Something went wrong',
          text: 'We were unable to authenticate you. {message} <code style="font-size: 12px">[{code}]</code>',
          button: 'Retry'
        }
      }
    },
    camera_check: {
      'face-not-centered': 'Center your face in the frame',
      'face-not-detected': 'Show your face in the frame',
      'face-too-close': 'Move your face away from the device',
      'face-too-far': 'Move your face closer to the device'
    },
    camera_instructions: {
      alignment: 'Center your face in the frame',
      look: 'Look directly at the screen',
      lighting: 'Ensure you are in a well-lit area',
      accessories: 'Remove any eyewear or hats'
    },
    camera_select: {
      headline: 'Select a Camera',
      text: 'We detected more than one webcam connected to your device. Choose one for the process.'
    },
    enroll: {
      step: {
        instructions: {
          headline: 'Enrollment Process',
          text: 'Take a selfie to create an account on Keyless and easily register on the platform.',
          button: 'Continue'
        },
        'camera-permission': {
          prompt: {
            headline: 'Allow Camera Access',
            text: 'We need access to your camera to create your account. Please allow the browser to access your camera.',
            button: 'Continue'
          },
          granted: {
            headline: 'Allow Camera Access',
            text: 'We need access to your camera to create your account. Please allow the browser to access your camera.',
            button: 'Continue'
          },
          denied: {
            headline: 'Camera Access Denied',
            text: 'Looks like you denied camera access on this website, we need access to your camera to create your account.\n\nPlease allow the browser to access your camera.',
            button: 'Retry'
          }
        },
        connecting: {
          headline: 'Connecting...',
          text: 'Please wait while we establish a secure connection.'
        },
        sending: {
          tip: 'Keep your face still'
        },
        processing: {
          headline: 'Creating your account...',
          text: 'Your selfie was captured correctly, we are processing your photo'
        },
        done: {
          headline: 'Account created',
          text: 'You can now access and authenticate simply by using your face.'
        },
        error: {
          headline: 'Something went wrong',
          text: 'We were unable to create your account. {message} <code style="font-size: 12px">[{code}]</code>',
          button: 'Retry'
        }
      }
    },
    error: {
      AUTH_RECOGNITION_FAILED: 'Make sure to be in a well-lit environment, possibly without any eyewear or hats.',
      AUTH_USER_DOES_NOT_EXIST: 'The account {username} does not exist.',
      CAMERA_CHECK_FAILED: 'Make sure to be in a well-lit environment, possibly without any eyewear or hats.',
      ENROLL_USER_EXISTS: 'The account {username} already exists.',
      ERROR: 'Please try again or contact our support if the problem persists.',
      IMAGE_STREAM_FAILED_TO_DRAW_FRAME: 'Please contact our support.',
      LIVENESS_FAILED: 'Make sure to be in a well-lit environment, possibly without any eyewear or hats.',
      NO_MEDIA_STREAM: 'Make sure you have a webcam connected to your device.',
      USERNAME_LOCKED_OUT: 'Too many attempts. Please try again later.',
      USERNAME_UNSET: 'Please contact our support.',
      WEB_SOCKET_FAILED_TO_OPEN: 'Please contact our support.',
      WEB_SOCKET_TIMEOUT: 'Please try again or contact our support if the problem persists.',
      WEB_SOCKET_UNEXPECTED_CLOSE: 'Please try again or contact our support if the problem persists.',
      WEB_SOCKET_UNKNOWN_ERROR: 'Please try again or contact our support if the problem persists.'
    }
  },
  language: 'en'
}

Remember that the language specified in the pack must match with the lang attribute set in the web component for the localization to work.

Here’s an example on changing the instructions screen headline:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auth</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
        padding: 8px;
      }

      kl-auth {
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <kl-auth
      enable-camera-instructions
      key="IMAGE_ENCRYPTION_PUBLIC_KEY"
      key-id="IMAGE_ENCRYPTION_KEY_ID"
      lang="en"
      size="375"
      theme="light"
      username="USERNAME"
      ws-url="KEYLESS_AUTHENTICATION_SERVICE_URL"
    ></kl-auth>
    <script src="@keyless/sdk-web-components/elements/auth/auth-element.iife.js"></script>
    <script>
      const auth = document.querySelector('kl-auth')

      auth.localizationPacks = [
        {
          data: {
            auth: {
              step: {
                instructions: {
                  headline: 'Custom Instructions Title',
                }
              }
            }
          },
          language: 'en'
        }
      ]
    </script>
  </body>
</html>