# Guia de Personalização do Aplicativo

O **Aplicativo Personalizado (White Label)** é uma ferramenta poderosa para fortalecer a sua marca. Ele permite que seus colaboradores acessem a plataforma através de um app que carrega a identidade visual da sua empresa, disponível tanto para Android quanto para iOS.

{% hint style="info" %}
ℹ️ **Como funciona o processo?**

A personalização técnica é realizada inteiramente pela nossa equipe interna de desenvolvimento. **O seu papel é:** Definir as preferências (cores, nomes) e enviar os arquivos da sua marca para o nosso time de **Customer Success (CS).**
{% endhint %}

Abaixo, detalhamos todos os itens que compõem a personalização do seu app.

#### 1. Identidade Visual do Aplicativo

Estes são os elementos que estarão visíveis na tela do celular do usuário após a instalação.

**A. Nome do Aplicativo**

É o nome que aparecerá abaixo do ícone na tela inicial do celular e nas lojas de aplicativos.

* **Regra:** Máximo de **30 caracteres**.
* **Atenção:** Nomes muito longos podem ser cortados automaticamente pelo sistema operacional (Android/iOS). Recomendamos nomes curtos e objetivos.

<figure><img src="/files/Lx03z9CtZzfWSclsocGL" alt="" width="188"><figcaption></figcaption></figure>

**B. Ícone do Aplicativo**

É a imagem que o usuário clica para abrir o app.

* **O que enviar:** O arquivo do seu ícone em alta resolução.

<figure><img src="/files/DbrcvfouFjEQr1iIRKhX" alt="" width="188"><figcaption></figcaption></figure>

**C. Cor Principal (Tema)**

Você deve definir a **cor principal do aplicativo**, que normalmente corresponde à cor primária da identidade visual da sua marca.

**Onde essa cor é aplicada:**

* Menus superiores e inferiores
* Ícones de destaque
* Botões de ação
* Elementos interativos dentro do app

**Distribuição das cores:**

* **Cor Primária:** Aplicada em **botões** e elementos de interação principal.
* **Cor Secundária:** Aplicada nos **menus superiores** (estado ativo) e ícones de navegação.

**O que enviar:**\
📌 O **código hexadecimal (HEX)** da(s) cor(es)\
Exemplo: `#0000FF`

<figure><img src="/files/fGW5bio9KiHukcu3K1uh" alt="" width="199"><figcaption></figcaption></figure>

**D. Logotipos Internos**

Sua marca aparecerá em momentos chave da navegação:

1. **Tela de Splash (Abertura):** A tela que pisca rapidamente enquanto o app carrega.
2. **Tela de Login:** A tela onde o usuário insere as credenciais.
3. **Ícone de Notificação:** O pequeno ícone monocromático que aparece na barra de status do celular quando chega uma mensagem.

{% hint style="info" %}
🎨 **Formatos de Arquivo:** Para garantir a melhor qualidade em telas de retina e alta definição, pedimos que envie sua logo **vetorizada** (formatos `.ai`, `.eps`, `.svg` ou `.pdf` editável).
{% endhint %}

{% columns %}
{% column %}

<figure><img src="/files/cnb1PFi6xmhDWJiCAQUF" alt="" width="198"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/oFopVa8IjBafZ3jysqq6" alt="" width="199"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

#### 2. O que NÃO é personalizável (Padrões do Sistema)

Para garantir a estabilidade e a usabilidade do aplicativo, alguns elementos seguem um padrão fixo da plataforma e não podem ser alterados:

* **Cor de Fundo (Background):** As telas de Login e Splash possuem fundo **branco** por padrão. Não é possível aplicar imagens de fundo ou alterar para cores escuras nestas telas específicas.
* **Layout dos Menus:** A disposição dos botões e a estrutura de navegação (Atendimentos, Contatos, Chat Interno e etc..) seguem o padrão da plataforma para garantir que as atualizações futuras funcionem corretamente no seu app.

#### 3. Personalização nas Lojas (Store Listing)

Além do aplicativo em si, a "vitrine" do seu app na **Google Play Store** e **Apple App Store** também é personalizada.

Você pode definir:

* **Nome na Loja:** Como o app será encontrado na busca.
* **Descrição:** Texto explicando o que o app faz.
* **Screenshots (Prints):** Imagens demonstrativas das telas.

{% hint style="info" %}
Para saber como configurar sua conta de desenvolvedor e preparar a publicação nas lojas, consulte nosso guia completo: [**Configuração e Publicação de Aplicativos**](https://docs.helena.app/configurando-sua-plataforma/configuracao-inicial/publicacao-de-aplicativos)
{% endhint %}

#### Resumo: Checklist de Envio para o CS

Ao solicitar a criação do seu app, certifique-se de enviar para o seu gerente de conta (CS):

1. \[ ] **Nome do App** (max 30 caracteres).
2. \[ ] **Cor Principal** (Código Hexadecimal).
3. \[ ] **Cor Secundária** (Pode ser a mesma da principal).
4. \[ ] **Logo Vetorizada** (Com e sem o nome da empresa).

Assim que recebermos esses materiais, nossa equipe iniciará o processo de compilação e personalização do seu aplicativo!


---

# 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://docs.helena.app/configurando-sua-plataforma/configuracao-inicial/guia-de-personalizacao-do-aplicativo.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.