Web Customization

In this section, you will find all the information necessary for customizing the SDK of the Unico IDCloud platform in your Web applications

---

The Web SDK allows for some customizations to be made. Below are all the possible customizations for this SDK.

Customize Language

---

It is possible to configure the experience of the informational messages in the capture frames by changing their language. Use the enumerated type LocaleTypes, which contains the following values:

• LocaleTypes.PT_BR: for Portuguese(Brazil);

• LocaleTypes.ES_MX: for Spanish(Mexico);

• LocaleTypes.ES_ES: for Spanish(Spain);

• LocaleTypes.EN_US: for English(USA).

See how to implement it in the example below:

import {
  ...
  UnicoCheckBuilder,
  LocaleTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setLocale(LocaleTypes.EN_US);

• A remote activation may be required to be used, if you wish to use it, notify your project manager or Unico support.

• If not configured, the SDK will use Portuguese as the default language.

Customize Capture Experience

---

This step is optional, but highly recommended for aligning the capture process with your company's visual identity.

To customize the capture frame using the Theme Builder, simply create an instance of the UnicoThemeBuilder class and invoke the methods that customize each of the properties of the capture frame, as shown in the example below:

const unicoTheme = new UnicoThemeBuilder()
.setColorSilhouetteSuccess("#0384fc")
.setColorSilhouetteError("#D50000")
.setColorSilhouetteNeutral("#fcfcfc")
.setBackgroundColor("#dff1f5")
.setColorText("#0384fc")
.setBackgroundColorComponents("#0384fc")
.setColorTextComponents("#dff1f5")
.setBackgroundColorButtons("#0384fc")
.setColorTextButtons("#dff1f5")
.setBackgroundColorBoxMessage("#fff")
.setColorTextBoxMessage("#000")
.setColorCancelButton("#0384fc")
.setColorProgressBar("#0384fc")
.setHtmlPopupLoading(`<div style="position: absolute; top: 45%; right: 50%; transform:
translate(50%, -50%); z-index: 10; text-align: center;">Carregando...</div>`)
.build();

After generating the theme object as exemplified above, it should be passed as a parameter to the setTheme method of the unicoCameraBuilder:

unicoCameraBuilder.setTheme(unicoTheme);

---

Still need help?​

Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.