# Customizations

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

## Logo Customization <a href="#personalizacao-da-cor-e-formato-dos-botoes" id="personalizacao-da-cor-e-formato-dos-botoes"></a>

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><mark style="color:blue;">.</mark>

{% hint style="danger" %}
Base64 encoded URLs cannot be registered. (These URLs typically begin with "data:image/jpeg;base64,/9j/4AAQ...").
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd3Dm65b0cJkcAqTfT5gk3mmLEBe7hDeXQpSOfy276CkA3kZME3mKkO_kWvQ5wVvGCk9DccGI12FW2Sy2O_hS38QvJFC5jyXCXctnx6akbWVbWihpPwoy0Ey4vJzfyTs_YxG_bb?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Logo customization</p></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXekXN-Ha9wM8p72x76WLtSzinTDMKk9fiyd2-FHl0a58DoGt0m_jQVDFmS-Wnfsm5wRxNsznOGx69vP5f2hqBo7ZZczuoNLRWseNegMP3DDrmlmcdxuQ6Cpt-PkcaxZFdk36dAh?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Accepted logo grids</p></figcaption></figure>

{% hint style="success" %}
**Recommendations:**

* Preferably send the logo in the icon logo format, due to its better readability in reduced sizes.
  {% endhint %}

{% hint style="warning" %}
**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`.
  {% endhint %}

## Unaccepted logo formats

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXclhGO7fez0cxXvABOmJEULu-ejib9DLnfxs1R0np_OQfNkHWVZsYJRnE8UUkRDlOZHI45rY30MvMA_Is8a2CVlDDbll9wlVTNk4V5cYowWYXkwyWwmFJt3cj2DTqKCn6VrLURuTw?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Unaccepted logo formats</p></figcaption></figure>

{% hint style="warning" %}
**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.
  {% endhint %}

{% hint style="success" %}
**Recommendations:**

* Prioritize colors with a readable contrast of at least `4.5:1`, following [WCAG](https://accessibleweb.com/color-contrast-checker/) 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.`
    {% endhint %}

## 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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdE-skTNN6SlJvqb8vK3ywVHiDnyzbpWhhabPeU8b1UmarFgsyKvTGHa6GvxYic2gc389CzSNBNV7GBq-BhjGBoyLzl5NUqlyIOVuapgphLu7KB4xlCRT9THOCXGkjRUhteC0Gp?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Button customization</p></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXckWwcJdPYhLHZmPZevgFS_KZvPJKYVqLMQObcEkst2pgXlKIozgafWxGjoupB6QPsi9zR66xCvK2pSnIhzG34Vae4bfmXQOvrbc8I5CdbamKZxlfXhTxeQXP9mSiFONoPPP-XPbA?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Contrast examples</p></figcaption></figure>

{% hint style="success" %}
**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](https://accessibleweb.com/color-contrast-checker/) guidelines.

* **Example:** `#FFFFFF` (text) on `#000000` (background) results in a contrast ratio of `21.00:1`.
  {% endhint %}

### 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:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXft7FvJOa_TVYb2S7Lp3-DzI0Py969jIDR_aeUQq0Qq78wyD38jenrCj2Iqki0wDRMXmNT96y8-g6Ugen5sa93Xt1FUNYaaxwxGVW3RIisiRmHwCzlQMlUtBqGL3WxrEj8wtEdHHA?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Rounding the button corners</p></figcaption></figure>

### 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.`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devcenter.unico.io/unico-idcloud/by-unico-integration/adittional-resources/customizations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.