> For the complete documentation index, see [llms.txt](https://devcenter.unico.io/unico-idcloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devcenter.unico.io/unico-idcloud/by-unico-integration/pt/recursos-adicionais/personalizacoes.md).

# Personalizações

O by Unico oferece algumas opções de personalização em sua interface, permitindo que você a adapte à identidade visual da empresa e proporcione um visual personalizado da jornada.

## Personalização do Logotipo <a href="#personalizacao-do-logotipo" id="personalizacao-do-logotipo"></a>

É possível personalizar o logotipo exibido aos usuários que acessam as jornadas do by Unico. Essa personalização reforça a parceria entre a empresa e a Unico, indicando que a verificação é realizada pela Unico a pedido do cliente ou parceiro.

Para solicitar a inclusão do logotipo, envie ao time da Unico uma URL onde o logotipo esteja hospedado em um diretório online (*ou seja, o logotipo precisa ser acessível via URL no navegador*).

* Ex: <https://storage.googleapis.com/portal-orca-unico-prod/apps/orca/logo-default.png><mark style="color:blue;">.</mark>

{% hint style="danger" %}
Não é possível cadastrar uma URL que seja um base64 (*geralmente essas URLs iniciam em "data:image/jpeg;base64,/9j/4AAQ..."*).
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXekc4UTsQiXKXx54mOm-9diwk6D_KG3sTnK-Lob1-3piwGikNkmm2b2HpDW8fKQ-MWDoxb38bL_qAglboZL9kLLq2Yn0F2su4PKLVOfiUyQpl_Cd221_5CrobPRhOaxkRBrHsGmgQ?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Personalização do logotipo</p></figcaption></figure>

<div align="center"><figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXchdH-39VIv68z9bggfTeaBoPuBlKFnhVbXUde0GhpBc1_OhIJ6ss-1Dqt4PAc_HDMpYJTBd5pPvRZ7fzDEIap7Q4RB-X75-dl0WAXwwRaWbCAehmApAR8Vmjdn-olNEeqqGBqQRA?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Grids de logotipo aceitos</p></figcaption></figure></div>

{% hint style="success" %}
**Recomendações**:&#x20;

* Envie o logotipo preferencialmente no formato de logo ícone, devido à sua melhor legibilidade em tamanhos reduzidos.
  {% endhint %}

{% hint style="warning" %}
**Regras:**&#x20;

* Certifique-se de que o logotipo seja quadrado, respeite o grid proporcional e garanta que seja exportado com no mínimo **192x192 pixels**.
* Formatos aceitos: `SVG`, `PNG` e `JPEG`.
  {% endhint %}

### Formatos de logotipo não aceitos <a href="#formatos-de-logotipo-nao-aceitos" id="formatos-de-logotipo-nao-aceitos"></a>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdVYcQGlNFqrWMr7Eh575k7t64QJNRmywx9XEXsmMoxudA7mm7vDeliigOozBpkGWgi9UdGgM9OJn3QD3jZPncvvj7_Z0XnAQ-JVK7SqEF4YBfc1mrzXukco3BxGuYfbOMvYpjw?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Formato de logotipo não aceitos</p></figcaption></figure>

{% hint style="warning" %}
**Regras:**

* Priorize a aplicação do logotipo em planos de fundo que garantam a legibilidade.
* Não utilize logotipos que não respeitem o grid quadrado.
* Evite o uso de logotipos em baixa resolução.
* Não aplique o logotipo em fundos transparentes.
  {% endhint %}

{% hint style="success" %}
**Recomendações:**

* Priorize cores com contraste legível de no mínimo `4.5:1`, seguindo os parâmetros de acessibilidade da [<mark style="color:blue;">**WCAG**</mark>](https://accessibleweb.com/color-contrast-checker/).
  * Utilize o hexadecimal das cores para verificar a escala de contraste. Exemplo: *Foreground* *ColorPicker*: `#000000`, `Background Color:` `#FFFFFF`, Contrast Ratio: `21.00:1`.
    {% endhint %}

## Personalização da cor e formato dos botões <a href="#personalizacao-da-cor-e-formato-dos-botoes" id="personalizacao-da-cor-e-formato-dos-botoes"></a>

Personalize os botões de ação do by Unico. Defina a cor do texto, fundo e arredondamento dos cantos do botão para reforçar a identidade visual da sua empresa.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe2fUbc56bWWOVJ6D_UMzLnZ5IV5B-C-fce8gg9FRZ1tyAbdOoybLod6Jxg0XRFjEa7SXTJWVoBsqyIJoVY7WH8OjjvAtUjuIB5L7ZJexj5ya8OBaL7cPeHbGVOJDu2ZcHhQWUPBg?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Personalização do botão</p></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe4hqCntxfZTgKMEu-ThQv05-nuZLb2-77coBXkPgserS6F-KF6rdjAD7tShjEuQ9qUHKTZyMISQQjJ7JwbpFlPCr3xoC75Orr5w2gIMrkQCUNSfVb6RDT0GZiM5fBtHsgaybIRUg?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Exemplos de contraste</p></figcaption></figure>

{% hint style="success" %}
**Recomendações:**

* **Escolha cores acessíveis:**  Ao personalizar as cores dos botões no by Unico, opte por um esquema de cores acessível, que garanta a visualização para todos os usuários, incluindo aqueles com deficiência visual.
* **Taxas de contraste:** Busque uma taxa de contraste superior a `4.51:1` para obter os melhores resultados.

Cores acessíveis facilitam a navegação para todos, especialmente para pessoas com baixa visão. Utilize o hexadecimal das cores para verificar o contraste e siga as recomendações da [<mark style="color:blue;">**WCAG**</mark>](https://accessibleweb.com/color-contrast-checker/).

* **Exemplo**: `#FFFFFF` (texto) em `#000000` (fundo) resulta em uma taxa de contraste de `21.00:1`.
  {% endhint %}

### Arredondamento dos cantos dos botões <a href="#arredondamento-dos-cantos-dos-botoes" id="arredondamento-dos-cantos-dos-botoes"></a>

Além das cores do texto e de fundo, você também pode definir o arredondamento dos cantos (*border radius*) em pixels, conforme a escala abaixo:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcjqtcCBuvhUKnkHxxZ4zFM0PzyZRn2oYOD3cj2K-3wZxCfpZ18gU_n1-dxQ-LN3W5cysNDeFTKjC1YvZfFVmB1XE-N4me36vxALmB3HRryEPwHMXI8wYy0t8FbANvUP4C3OCLh?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption><p>Arredondamento dos cantos no botão</p></figcaption></figure>

### Configurações de personalização <a href="#configuracoes-de-personalizacao" id="configuracoes-de-personalizacao"></a>

Para realizar as configurações da identidade visual do cliente ou parceiro para o botão, compartilhe com o time de implantação da Unico as seguintes informações:

* Código hexadecimal da cor de background no botão.
  * Ex: `#000000`.
* Código hexadecimal da cor de texto no botão.
  * Ex: `#ffffff`.
* Arredondamento dos cantos no botão em pixels.
  * Ex: `10px`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/pt/recursos-adicionais/personalizacoes.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.