> For the complete documentation index, see [llms.txt](https://docs.helena.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.helena.app/configurando-sua-plataforma/configuracao-inicial/guia-de-personalizacao-do-aplicativo.md).

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