Localization
The text in PingOne Recognize Web SDK components can be localized to other languages.
Use the lang attribute to set the default language of a Web SDK component.
Component attributes
The <kl-auth>, <kl-auth-dialog>, <kl-enroll>, and <kl-enroll-dialog> components each support two attributes that help manage localization:
Attribute |
Type |
Description |
|
|
Pass an array of localization packs to this attribute. If a localization pack uses a language that already exists, the new values replace values defined in the existing localization pack. |
|
|
Localization variables represent dynamic values to be inserted into existing localization strings by replacing the |
Customize component text values using custom localization pack arrays and dynamic localization variables.
LocalizationPack interface
A localization pack is an array of objects declared using the following types:
interface LocalizationPack {
data: LocalizationPackData;
language: string;
}
interface LocalizationPackData {
[key: string]: string | LocalizationPackData;
}Default English language pack
The following example shows the default PingOne Recognize language pack and serves as a reference for customization:
Details
{{
data: {
auth: {
step: {
bootstrap: {
headline: 'Authentication Process',
text: 'Take a selfie to authenticate through Keyless on the platform.'
},
'camera-instructions': {
headline: 'Authentication Process',
text: 'Take a selfie to authenticate through Keyless on the platform.',
button: "All set. I'm ready"
},
'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'
}
},
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'
},
'server-computation': {
headline: 'Authenticating...',
text: 'Your selfie was captured correctly, we are processing your photo'
},
'stm-choice': {
headline: 'Authentication Process',
text: 'Take a selfie to authenticate through Keyless on the platform.',
button: 'Continue on Phone',
secondary_button: 'Authenticate on Desktop'
},
'stm-qrcode': {
headline: 'Scan the QR Code',
text: 'Scan the QR code with your phone to continue the authentication process.',
button: {
false: 'Copy Link',
true: 'Copied to Clipboard'
}
}
}
},
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.'
},
camera_tip: {
Boot: 'Preparing your camera',
FaceAbsent: 'Show your face clearly',
FaceMultiple: 'Show only one face',
FaceOcclusion: 'Remove any obstructions from your face',
FaceOffCenter: 'Center your face',
FacePartial: 'Show your full face',
FaceTooLarge: 'Move your face farther from the device',
FaceTooSmall: 'Move your face closer to the device',
ImageBlackAndWhite: 'Move in a well-lit area',
ImageLowLight: 'Move in a well-lit area',
DeviceMovementAbsent: 'Pick up your device',
SubjectMovementAbsent: 'Tilt your face slightly'
},
enroll: {
step: {
bootstrap: {
headline: 'Enrollment Process',
text: 'Take a selfie to create an account on Keyless and easily register on the platform.'
},
'camera-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'
}
},
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'
},
'server-computation': {
headline: 'Crafting your private key',
text: 'Hold on, it will just take a moment'
},
'stm-choice': {
headline: 'Enrollment Process',
text: 'Take a selfie to create an account on Keyless and easily register on the platform.',
button: 'Continue on Phone',
secondary_button: 'Enroll on Desktop'
},
'stm-qrcode': {
headline: 'Scan the QR Code',
text: 'Please scan the QR code with your phone to continue the enrollment process.',
button: {
false: 'Copy Link',
true: 'Copied to Clipboard'
}
}
}
},
error: {
FRAME_RESULTS_SET_UNSET: 'Please contact our support.',
OPTIONS_UNSET: 'Please contact our support.',
USER_LOCKOUT_EXPIRATION_UNSET: 'Please contact our support.',
VIDEO_ELEMENT_UNSET: 'Please contact our support.',
MEDIA_DEVICES_EMPTY_AUDIO_INPUT_LABEL: 'Please allow the browser to access your microphone and try again.',
MEDIA_DEVICES_EMPTY_VIDEO_INPUT_LABEL: 'Please allow the browser to access your camera and try again.',
MEDIA_DEVICES_NO_VIDEO_INPUTS: 'No camera was found. Please connect a camera and try again.',
MEDIA_STREAM_ABORT: 'Please make sure your camera is not being used by another application and try again.',
MEDIA_STREAM_INVALID_STATE: 'Please make sure your camera is not being used by another application and try again.',
MEDIA_STREAM_NOT_ALLOWED: 'Please make sure you granted camera accession permission and that no other application is using your camera, then try again.',
MEDIA_STREAM_NOT_FOUND: 'No camera was found. Please connect a camera and try again.',
MEDIA_STREAM_NOT_READABLE: 'Please make sure your camera is not being used by another application and try again.',
MEDIA_STREAM_OVERCONSTRAINED: 'The camera does not meet our minimum requirements. Please use a different camera and try again.',
MEDIA_STREAM_SECURITY: 'Please contact our support.',
MEDIA_STREAM_TYPE: 'Please contact our support.',
SERVER_CUSTOMER_NOT_FOUND: 'Please contact our support.',
SERVER_FORBIDDEN: 'Please try again or contact our support if the problem persists.',
SERVER_INTERNAL_ERROR: 'Please try again or contact our support if the problem persists.',
SERVER_INVALID_REQUEST: 'Please try again or contact our support if the problem persists.',
SERVER_INVALID_RESPONSE: 'Please try again or contact our support if the problem persists.',
SERVER_INVALID_STATE: 'Please try again or contact our support if the problem persists.',
SERVER_NO_ATTEMPTS_LEFT: 'Please contact our support.',
SERVER_RECOGNITION_FAILED: {
FaceAbsent: 'Make sure to show your face in the frame, possibly without any eyewear or hats.',
FaceMultiple: 'Make sure to show only one face in the frame, possibly with a plain background.',
FaceOffCenter: 'Make sure to center your face in the frame.',
FacePartial: 'Make sure to show your full face in the frame.',
FaceTooLarge: 'Make sure to move your face farther from the device.',
FaceTooSmall: 'Make sure to move your face closer to the device.',
FaceOcclusion: 'Make sure to remove any obstructions from your face, possibly any eyewear or hats.',
ImageBlackAndWhite: 'Make sure you are in a well-lit environment.',
ImageLowLight: 'Make sure you are in a well-lit environment.',
DeviceMovementAbsent: 'Make sure to pick up your device.',
SubjectMovementAbsent: 'Make sure to tilt your face slightly every now and then.',
None: 'Make sure you are in a well-lit environment, possibly without any eyewear or hats.'
},
SERVER_USER_LOCKED_OUT: 'Too many attempts. You can try again in {lockout_expiration}.',
SESSION_DATABASE_ERROR: 'Please contact our support.',
SESSION_MANAGER_NOT_NULL: 'Please contact our support.',
SESSION_MANAGER_NULL: 'Please contact our support.',
SESSION_MEDIA_STREAM_TIMEOUT: 'Make sure you are in a well-lit environment, possibly without any eyewear or hats.',
SESSION_MEDIA_STREAM_UNSET: 'Please contact our support.',
CREATE_MEDIA_STREAM_ARGS_UNSET: 'Please contact our support.',
EXCEPTION: 'Please contact our support.',
GET_VIDEO_MEDIA_DEVICES_ARGS_UNSET: 'Please contact our support.',
RUNTIME_VIOLATION: 'Please contact our support.',
SYMBOL_DESCRIPTION_UNSET: 'Please contact our support.',
CUSTOMER_UNSET: 'Please contact our support.',
SERVICE_URL_PARSE_FAILED: 'Please contact our support.',
SERVICE_URL_UNSET: 'Please contact our support.',
USERNAME_UNSET: 'Please contact our support.',
WEB_ASSEMBLY_ABORTED: 'Please try again or contact our support if the problem persists.',
WEB_ASSEMBLY_FACTORY_FAILED: 'Please contact our support.',
WEB_ASSEMBLY_IMPORT_FAILED: 'Please contact our support.',
WEB_ASSEMBLY_NOT_READY: 'Please contact our support.',
WEB_ASSEMBLY_MODULE_NOT_FOUND: 'Please contact our support.',
SLUG_UNSUPPORTED: 'Please contact our support.',
QUEUE_UNSET: 'Please contact our support.',
SYMBOL_UNSET: 'Please contact our support.'
}
},
language: 'en'
}When creating custom language packs, remember that the language specified in the pack must match the value specified in the lang attribute of the web component. Otherwise, the component ignores the custom language pack.
Example: Customizing instruction heading
This example customizes the title of the camera instructions for an authorization component:
Details
<!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
authorization-token="USER_AUTHORIZATION_FROM_CUSTOMER"
customer="CUSTOMER_NAME"
enable-camera-instructions
key="IMAGE_ENCRYPTION_PUBLIC_KEY"
lang="en"
size="375"
theme="light"
transaction-data='DATA_FROM_CUSTOMER_SERVER_TO_BE_SIGNED'
username="USERNAME"
service-url="KEYLESS_AUTHENTICATION_SERVICE_URL"
></kl-auth>
<script src="@keyless/sdk-web-components/index.js"></script>
<script>
const auth = document.querySelector('kl-auth')
auth.localizationPacks = [
{
data: {
auth: {
step: {
'camera-instructions': {
headline: 'Custom Camera Instructions Title',
}
}
}
},
language: 'en'
}
]
</script>
</body>
</html>