Vamos aprender a realizar a customização do Help Center Aqui você aprenderá como realizar todas as customizações necessárias para o novo padrão visual e funcional do Help Center.
...
| Avisonote |
|---|
Antes deiniciarcomeçarCertifique-se de ter o código hexadecimal que você tem as informações e os acessos necessários:
|
| Dica |
|---|
Você pode consultar o UX do produto ou acessar o NDS para obter as cores. |
Alterar os ícones nos documentos
|
...
Passo 1: Alteração dos ícones dos documentos
Atualize os ícones para refletir a identidade visual do produto:
Documentos principais: Utilize ícones com as cores primárias
...
do produto.
Documentos secundários
...
: Utilize ícones com a cor secundária
...
.
Documentos adicionais
...
: Use ícones
...
na cor cinza
...
| Dica |
|---|
Acesse o repositório do produto para ter acesso aos ícones. Caso algum ícone não esteja presente, solicite acesso ao figma para criação. |
Documentos principais
- Alterar a descrição dos documentos
...
para conteúdos complementares.
Como atualizar:
Baixe os ícones no repositório do produto.
Substitua os ícones antigos pelos novos nos documentos.
Se necessário, crie novos ícones no Figma e exporte-os para o formato PNG.
...
Passo 2: Alteração das descrições dos documentos
Use descrições claras e objetivas para facilitar a navegação do usuário.
Modelos sugeridos:
Documento | Descrição |
|---|---|
Conheça o [produto] | Explore os módulos e recursos e saiba como podemos ajudar na sustentabilidade do seu negócio. |
Usando o [produto] | Acesse os guias completos para a configuração do [produtoPRODUTO]. |
O que há de novo? | Acompanhe o histórico de versões: novas funcionalidades, melhorias, correções e homologações. |
Segurança e compliance | Saiba como a NDD garante a segurança e o compliance dos seus dados. |
Treinamentos | Obtenha certificações com os treinamentos sobre o NDD Orbix [PRODUTO] oferecidos pelo NDD Academy. |
Manual de Integrações | Entenda como integrar seu sistema ao NDD Orbix [PRODUTO] utilizando nossas APIs. |
...
| Dica |
|---|
...
Passo 3: Personalização do tema do Help Center
Header
...
Logo: Substitua pelo logotipo oficial do Help Center.
Cor de fundo: Altere para a cor
...
secundária do produto
...
.
Cor do texto: Configure como branco
#FFFFFF.
Portal
...
Ajuste o título do Help Center
...
para o nome do produto
...
| Painel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
|
...
(ex.:
nddorbix,nddmove).Altere a cor do texto do banner para branco
#FFFFFF
...
.
Atualize o banner.
Ajuste o tamanho das caixas para o formato Medium.
| Dica |
|---|
O logo e o banner você encontra no repositório do produto. |
Categorias
- Criar as categorias conforme o contexto dos conteúdos que serão organizados
...
| panelIconId | 1f4a1 |
|---|---|
| panelIcon | :bulb: |
| panelIconText | 💡 |
| bgColor | #F4F5F7 |
...
Crie categorias para organizar o conteúdo de forma intuitiva:
Exemplo de categorias:
Preciso de ajuda
FAQ
Tutoriais
Solução de problemas
Falar com o Suporte
Finalização
- Incluir o script Custom CSS alterando o nome do arquivo para o nome do produto
| Painel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Dica | ||||||||
...
Passo 4: Inclusão de scripts customizados
Adicione os arquivos CSS e JS para personalizar o comportamento e o estilo do Help Center.
Custom CSS
Inclua o seguinte código para aplicar o estilo:
| Bloco de código | ||
|---|---|---|
| ||
@import url("https://confluencendd.github.io/public/app-hc-[produto].css”) |
...
Custom JS
...
| panelIconId | 1f4a1 |
|---|---|
| panelIcon | :bulb: |
| panelIconText | 💡 |
| bgColor | #F4F5F7 |
...
Insira o script abaixo para carregar funcionalidades adicionais:
| Bloco de código | ||
|---|---|---|
| ||
vp.loadScript("https://confluencendd.github.io/public/app-hc-[produto].js")
.then(() => {
}); |
- Atualizar o Help Center
| Dica |
|---|
| Nota |
Substitua |
...
Passo 5: Finalização
Antes de finalizar a migração, revise todos os itens:
Ícones foram atualizados?
Descrições dos documentos foram revisadas?
Categorias estão organizadas?
Scripts CSS e JS foram incluídos corretamente?
Depois de revisar, comunique o administrador do Help Center sobre a conclusão do processo.