# Customizar (White Label)

{% hint style="warning" %}
**Disponível para o perfil: Superadministrador**
{% endhint %}

O módulo de customização permite que o Superadministrador aplique a identidade visual de sua própria marca em toda a interface do sistema Z-PRO. Através do modelo **White Label**, é possível transformar a plataforma em um produto proprietário, garantindo que os tenants (clientes) visualizem apenas os logotipos, cores e nomes definidos pelo administrador.

As principais funções da customização são:

* **Identidade Visual:** Padronização de cores e logos em todos os níveis de acesso;
* **Branding Móvel:** Configuração de ícones para instalação via PWA (Progressive Web App);
* **Experiência de Usuário:** Definição de estilos de tela de login e alertas sonoros personalizados;
* **Gestão Educacional:** Inclusão de tutoriais em vídeo para autoatendimento dos clientes;
* **Administração Avançada:** Ferramentas de acesso emergencial (Masterkey) e encerramento de sessões (Force Logout).

{% hint style="info" %}
**Importante:** As configurações realizadas neste módulo possuem caráter global. Isso significa que todas as alterações de cores, branding, estilos de login e tutoriais serão aplicadas automaticamente a todos os tenants (clientes) cadastrados na plataforma, garantindo a padronização da sua marca em toda a infraestrutura do sistema.
{% endhint %}

***

#### 1. Acessando o Painel de Customização

Para iniciar as alterações, acesse o menu lateral do painel Superadmin e selecione a opção **"Customizar"**. O painel é dividido em abas que organizam cada aspecto da personalização.

<figure><img src="/files/16dTrzoAmaBnqRc4WQgU" alt="" width="375"><figcaption></figcaption></figure>

***

#### 2. Aba Cores

Nesta aba, define-se a paleta cromática que será aplicada em botões, menus e fundos do sistema.

* **Paletas Pré-definidas:** Opções de combinações de cores testadas (ex: Azul Padrão, Oceano, Floresta) para aplicação rápida.
* **Cores do Sistema (Manual):** Permite inserir códigos hexadecimais para cores específicas:
  * **Primária:** Cor principal de botões e links;
  * **Secundária:** Cor de menus e elementos de apoio;
  * **Destaque:** Cor para notificações e itens ativos;
  * **Status (Aviso, Positiva, Negativa):** Cores para alertas, sucessos e erros;
  * **Neutra e Clara:** Cores de fundos e textos.
* **Ação:** Clique em "Salvar" para aplicar ou "Resetar" para voltar ao padrão original.

<figure><img src="/files/a9AjNUp4xhRzwlqSts6A" alt=""><figcaption></figcaption></figure>

***

#### 3. Aba Sons

Configuração dos alertas sonoros emitidos pelo sistema para diferentes tipos de interações.

* **Chat / Atendimento:** Som ao receber novos tickets ou mensagens de clientes;
* **Chat Interno:** Som para mensagens entre colaboradores da empresa;
* **Chat Suporte:** Som para mensagens diretas no canal de suporte.
* **Formatos aceitos:** MP3, OGG e WAV.
* **Importante:** Utilize arquivos leves (recomendado até 500 KB) para não impactar o carregamento das páginas.

<figure><img src="/files/jsgapGuug7KpGeRbyWRH" alt=""><figcaption></figcaption></figure>

***

#### 4. Aba Branding

Define a identidade da marca e a presença do aplicativo em navegadores e dispositivos móveis.

* **Nome do Aplicativo:** Nome exibido na aba do navegador e em notificações de sistema;
* **Logotipo (Claro/Escuro):** Versões da marca para exibição nos respectivos temas visuais do sistema;
* **Favicon:** Pequeno ícone exibido ao lado do título na aba do navegador;
* **Ícone PWA:** Imagem quadrada (mínimo 512x512 px) usada ao instalar o app no celular ou desktop. O sistema gera automaticamente os tamanhos necessários para Android e iOS.

<figure><img src="/files/gGHN9RH4jipvKukiLcIA" alt=""><figcaption></figcaption></figure>

***

#### 5. Aba Login

Personalização visual da porta de entrada do sistema para todos os usuários.

* **Estilo de Tela:** Seleção entre **8 variantes visuais** (ex: Minimalista, Corporativo, Bold Hero, Glassmorphism).
* **Mídia Lateral:** Possibilidade de inserir uma imagem ou vídeo (JPG, PNG, MP4) que ocupará a lateral da tela de login nos estilos *Split Screen* ou *Bold Hero*.
* **Texto sobre a mídia:** Chave para habilitar a exibição do logotipo e descrição sobre o vídeo ou imagem lateral.

<figure><img src="/files/l7piaBwaqjt7p5ooEUZq" alt=""><figcaption></figcaption></figure>

***

#### 6. Abas de Ferramentas Administrativas

Configurações técnicas e de segurança para o Superadministrador.

* **Force Logout:** Permite selecionar um tenant específico e desconectar obrigatoriamente todos os seus usuários ativos. Útil após atualizações ou mudanças de política.

<figure><img src="/files/LlTiw1coDlnNkcXFhuLZ" alt=""><figcaption></figcaption></figure>

* **Masterkey:** Ferramenta de acesso administrativo. Ao habilitar e gerar uma chave, o administrador pode acessar o painel de qualquer usuário utilizando o e-mail do usuário e a Masterkey no campo de senha.

<figure><img src="/files/gdOwPBeS7Fe0B08wlYVb" alt=""><figcaption></figcaption></figure>

* **Criptografia:** Geração da chave mestra para proteção de dados sensíveis no banco de dados.

<figure><img src="/files/9ykxC8iqoUWliGKzcFQr" alt=""><figcaption></figcaption></figure>

* **Socket (Otimização):** O **Modo Otimizado** deve ser ativado em instalações com alta carga (mais de 25 usuários simultâneos). Ele reduz a carga de consultas ao servidor através de técnicas de cache e debounce.

<figure><img src="/files/IGYodHuG707IUlLf3EJt" alt=""><figcaption></figcaption></figure>

***

#### 7. Aba Tutoriais

Permite ao administrador criar uma biblioteca de vídeos para instruir os tenants sobre o uso da plataforma.

* **Cadastrando um Tutorial:** Clique em "Novo Tutorial", insira um título, descrição e o link do vídeo (YouTube/Vimeo).
* **Thumbnail:** Selecione uma imagem de capa para o vídeo.
* **Hierarquia:** Defina a ordem numérica em que os vídeos aparecerão para o cliente.
* **Visualização:** Uma vez ativos, os vídeos aparecem na aba "Tutoriais" do painel do usuário final, servindo como uma base de conhecimento White Label.

<figure><img src="/files/MVDgFvTowMIxHIiDTEKI" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/J6YDwepxv3jqP70aFiuG" alt="" width="375"><figcaption></figcaption></figure>

***

#### Importante: Cache de Arquivos

Arquivos de branding e sons são servidos diretamente do servidor sem cache. Isso garante que as alterações entrem em vigor imediatamente após o salvamento, sem a necessidade de o usuário limpar o navegador.


---

# 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://ajuda.zdg.com.br/configuracao-superadmin/configuracoes/customizar-white-label.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.