Global customization settings
Currently, the Gateway Frontend contemplates the following types of customizations.
Configuration customizations
Properties that allow you to customize the Gateway's operation:
- Flags:
- Countdown: During the scanning processes (documents or facial), a countdown appears by default that can be deactivated.
- Dialogs: In the integration via URL you can enable or disable the modal dialogs that are presented to the user when an error occurs that prevents continuing with the onboarding process.
- Theme: You can indicate whether custom styles will be used (default disabled).
- Internationalization:
- Custom translations: Custom translation strings can be specified for each and every one of the Gateway texts.
- Default language: It is possible to indicate a default language different from the one established by the Default gateway (English).
- Supported languages: You can indicate the set of languages that the Gateway must support (currently supported ESP, ENG, IT).
- Media: Custom URLs can be indicated for images that allow it (by default disabled).
- Platforms: You can indicate the supported platforms for the process (by default all).
Configuration example:
NOTE: The code shown below is just an example of the internal configuration of the gateway, it is not code that you have to use anywhere. To configure it, contact the support team.
{
"allowDialogs": true,
"countdown": {
"allowCountdown": true,
"duration": 3 //In seconds
},
"customTheme": false,
"i18n": {
"customTranslations": false,
"defaultLanguage": "en",
"supportedLanguages": ["en", "es", "it"]
},
"media": {
"notSupported": {
"main": "https://example.com/image.jpg"
}
},
"supportedPlatforms": ["desktop", "mobile", "tablet"]
}
Style customizations
Properties that allow customizing generic styles of the Gateway:
- Colors: You can define the color of the texts, the background color of the screens and the color main, which usually represents the corporate color of the company and is used in different elements of some screens.
- Sources: You can use a corporate font from the client or one from a specific CDN from the Internet, such as Google Fonts. You can also define the size and weight of the base font, from which the rest of the text elements will scale proportionally.
- Radio: You can define a property that allows you to control the rounding radius of UI elements like buttons and modal dialogs.
- Images: You can specify the URL for the main image of each of the steps of explanation (document, facial, videoconference, unattended video).
Customization example:
NOTE: The code shown below is just an example of the internal configuration of the gateway, it is not code that you have to use anywhere. To configure it, contact the support team.
{
"border_radius": "0",
"colors_background": "#485052",
"colors_primary": "#e18f46",
"colors_text": "#fff",
"font_family": "Indie Flower, cursive",
"font_size": 18,
"font_url": "https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap",
"font_weight": "400"
}
Translation customizations
Properties that allow you to customize the Gateway translations:
- Common: Generic texts that all streams use.
- Document: Specific texts of the document detection and scanning flow.
- Facial: Texts specific to the flow of face detection and proof of life.
- Video: Specific texts of the video stream.
Personalization example (Spanish):
{
"common_action_accept": "Aceptar",
"common_action_cancel": "Cancelar",
"common_action_return_to_home_page": "Volver al inicio",
"common_action_return_to_previous_page": "Volver a la página anterior",
"common_paragraph_error": "Error"
}
Personalization example (English):
{
"common_action_accept": "Accept",
"common_action_cancel": "Cancel",
"common_action_return_to_home_page": "Return to home page",
"common_action_return_to_previous_page": "Return to previous page",
"common_paragraph_error": "Error"
}