# Personalizações

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

É possível personalizar a logo que é apresentada para o usuário final, conforma imagem abaixo:

<figure><img src="/files/NMaDLpBXdjDIoqIK61NX" alt="" width="372"><figcaption></figcaption></figure>

Para solicitar a inclusão desta logo, é necessário enviar ao time Unico uma imagem no formato .PNG no tamanho de 56x56px.

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

### Formatos de logotipo não aceitos

<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-1" id="personalizacao-da-cor-e-formato-dos-botoes-1"></a>

Ao longo do processo de implantação, é possível solicitar a configuração da cor e formato dos botões na interface no IDPay, de acordo com a identidade visual da empresa, conforme imagens abaixo:

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXct4ceVywRh0cvtxlMMoyZ4tfIpZAoL7Q2HP85lxSNKWE57p43_2PmTuw1dXtgcO3kfKWs-bWgMYXFMKoNE_A2kbY31SxwYGFNftaLkyeavn6dkhfZM_8ooOXiIW5PphbRtgxDiPA?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 no botão <a href="#arredondamento-dos-cantos-no-botao" id="arredondamento-dos-cantos-no-botao"></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_4nXfnWzeOgfdrrSiRnkqve2tg8Z_tMRhMkjDGW-PZzNuOgvD21I9BpaxwX33TDR6FOGHXEqBn6dn8Dorcp9uFhhWZdOAvRbthb9vrdJOFoMREU-PfjbvZqDwoXGTjdgzPaq2HnHpZ?key=-l_efWrEXCPZq2sSmYhbxJ7g" alt=""><figcaption></figcaption></figure>

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

Para realizar essa configuração, é só enviar as seguintes informações ao time Unico:

* 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: 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-idpay/integracao/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.
