Customizations

In this section, you'll find all the customizations available in by Unico.

---

by Unico's customization options allow you to tailor its interface to your company's visual identity and create a personalized user experience.

Available customizations:

---

Logo

Button

Contextualization

Logo Customization

---

You can customize the logo displayed to users who access by Unico journeys. This customization reinforces the partnership between your company and Unico, indicating that the verification is performed by Unico at the request of the client or partner.

To request the inclusion of the logo, send the Unico team a URL where the logo is hosted in an online directory (i.e., the logo must be accessible via URL in the browser).

• Ex: https://storage.googleapis.com/portal-orca-unico-prod/apps/orca/logo-default.png.

Base64 encoded URLs cannot be registered. (These URLs typically begin with "data:image/jpeg;base64,/9j/4AAQ...").

Logo customization

Accepted logo grids

Recommendations:

• Preferably send the logo in the icon logo format, due to its better readability in reduced sizes.

Rules:

• Make sure the logo is square, respects the proportional grid and ensures that it is exported with at least 192x192 pixels.

• Accepted formats: SVG, PNG and JPEG.

Unaccepted logo formats

---

Unaccepted logo formats

Rules:

• Prioritize the application of the logo on backgrounds that guarantee legibility.

• Do not use logos that do not respect the square grid.

• Avoid using low-resolution logos.

• Do not apply the logo on transparent backgrounds.

Recommendations:

• Prioritize colors with a readable contrast of at least 4.5:1, following WCAG accessibility parameters.

  • Use the hexadecimal of the colors to check the contrast scale. Example: Foreground ColorPicker: #000000, Background Color: #FFFFFF, Contrast Ratio: 21.00:1.

Customizing the color and shape of buttons

---

Customize the by Unico action buttons. Define the text color, background, and border radius of the button to reinforce your company's visual identity.

Button customization

Contrast examples

Recommendations:

• Choose accessible colors: When customizing button colors in By Unico, opt for an accessible color scheme that ensures visibility for all users, including those with visual impairments.

• Contrast ratios: Aim for a contrast ratio higher than 4.51:1 for the best results.

Accessible colors improve navigation for everyone, especially for people with low vision. Use hexadecimal color codes to check contrast and follow WCAG guidelines.

• Example: #FFFFFF (text) on #000000 (background) results in a contrast ratio of 21.00:1.

Rounding the button corners

---

In addition to text and background colors, you can also define the button's corner rounding (border-radius) in pixels, according to the scale below:

Rounding the button corners

Customization settings

---

To configure the visual identity of the client or partner for the button, share the following information with Unico's implementation team:

• Hexadecimal code for the button background color.

  • Example: #000000.

• Hexadecimal code for the button text color.

  • Example: #ffffff.

• Button corner rounding (border-radius) in pixels.

  • Example: 10px.

Customization of the contextualization screen

---

The by Unico contextualization module allows the client or partner to provide information about the verification, such as the requesting company, reason, and value of the operation, making the process more secure.

To customize the information on the contextualization screen, change the values of the parameters contained in the contextualization object when making the CreateProcess call.

The section of the request to be modified is as follows:

"contextualization": {
    "currency": "BRL",
    "price": "<FLOAT_NUMBER>",
    "locale": {
      "ptBr": {
        "reason": "<REASON_PTBR>"
      },
      "enUs": {
        "reason": "<REASON_ENUS>"
      },
      "esMX": {
        "reason": "<REASON_ESMX>"
      }

---

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.