Vamos aprender a realizar a customização do Help Center para o novo padrão.
Pré-requisitos
- Saber o código hexadecimal das cores primária, secundária e terciária do produto
- Criar os ícones
- riar o banner
| Dica |
|---|
Icones Help Center – FigmaVocê pode consultar o UX do produto ou acessar o NDS para obter as cores. |
Alterar os ícones nos documentos
- Documentos principais (ícones com as cores primárias)
- Documentos secundários (ícones com a cor secundária)
- Documentos adicionais (ícones com a 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
Abaixo você pode conferir alguns exemplos de descrição, fique a vontade para utilizar outros modelos.
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 [produto]. |
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 oferecidos pelo NDD Academy. |
Manual de Integrações | Entenda como integrar seu sistema ao NDD Orbix utilizando nossas APIs. |
Editar o tema do Help Center
- Alterar o Logo
- Alterar o Banner
- Alterar a cor de background do header : Secundária Alterar para a cor de background do banner: SecundáriaSecundária do produto
- Alterar a cor de texto do header e do banner para branco
#FFFFFF
...
Portal
- Criar as categorias conforme o contexto dos conteúdos que serão organizados
| Painel |
|---|
| panelIconId | 1f4a1 |
|---|
| panelIcon | :bulb: |
|---|
| panelIconText | 💡 |
|---|
| bgColor | #F4F5F7 |
|---|
|
Ex: Preciso de ajuda FAQ Tutoriais Solução de problemas Falar com o Suporte
|
Custom script
- Criar o tema (css) do Help Center
- Criar a pasta como nome do produto
- Criar o arquivo principal app-hc-ndd[produto].js e app-hc-ndd[produto].css dentro da pasta do produto
- Atualizar o tema com os elementos que deseja modificar a estilização
- Alterar o título do Help Center com o nome do produto em minúsculo e tudo junto
| Painel |
|---|
| panelIconId | 1f4a1 |
|---|
| panelIcon | :bulb: |
|---|
| panelIconText | 💡 |
|---|
| bgColor | #F4F5F7 |
|---|
|
Você pode copiar o conteúdo de outro produto. |
- Escolher as funções dos componentes que deseja utilizar
| Painel |
|---|
| panelIconId | 1f4a1 |
|---|
| panelIcon | :bulb: |
|---|
| panelIconText | 💡 |
|---|
| bgColor | #F4F5F7 |
|---|
|
Você pode copiar o conteúdo de outro produto. |
- Inserir a URL base no arquivo route.js
| Bloco de código |
|---|
|
const baseUrls = [
'https://helpcenter-testes.ndd.tech',
'https://helpcenter-nddorbix.ndd.tech',
'https://helpcenter-nddprint.ndd.tech',
'https://helpcenter-kubo.ndd.tech',
'https://helpcenter-nddmove.ndd.tech'
]; |
- Inserir o novo idioma no arquivo route.js (se houver)
| Bloco de código |
|---|
|
const languages = ['', '?l=pt', '?l=en', '?l=es', '?l=it']; |
- Inserir as traduções para o título e a descrição e dos documentos (se houver)
| Bloco de código |
|---|
|
"nddprint": {
"pt": {
"Comece aqui": {
"headline": "Comece aqui",
"description": "Entenda o conceito dos módulos, funcionalidades e cenários do NDD Print."
}
},
"en": {
"Comece aqui": {
"headline": "Getting started",
"description": "Understand the concept of NDD Print modules, functionalities and scenarios."
}
},
"es": {
"Comece aqui": {
"headline": "Empieza aqui",
"description": "Comprender el principio de los módulos, funcionalidades y escenarios de NDD Print."
}
}
}, |
- Inserir as traduções para as categorias dos documentos (se houver)
| Bloco de código |
|---|
|
"nddprint": {
"pt": {
"Preciso de ajuda": {
"text": "Preciso de ajuda"
}
},
"en": {
"Preciso de ajuda": {
"text": "I need some help"
}
},
"es": {
"Preciso de ajuda": {
"text": "Busco ayuda"
}
}
}, |
- Inserir as traduções para os links do Help Center (se houver)
| Bloco de código |
|---|
|
"nddprint": {
"pt": {
"Suporte": {
"text": "Suporte"
}
},
"en": {
"Suporte": {
"text": "Support"
}
},
"es": {
"Suporte": {
"text": "Soporte"
}
}
}, |
- Inserir os redirecionamentos de links dos documentos (se houver)
| Bloco de código |
|---|
|
"kubo": {
"pt": {
"https://helpcenter-kubo.ndd.tech/pt/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
},
"en": {
"https://helpcenter-kubo.ndd.tech/en/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
},
"es": {
"https://helpcenter-kubo.ndd.tech/es/falar-com-suporte/Current/": "https://suporte.ndd.tech/"
}
} |
- Capturar a cor para o link de destaque (conta-gotas na sombra do personagem do banner)
- Alterar a cor do link de destaque (se houver)
- Criar o script de geração dos arquivos finais no package.json
| Bloco de código |
|---|
|
"nddmove-build": "parcel build src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir public/ --no-source-maps --no-cache",
"nddmove-dev": "parcel watch src/nddmove/app-hc-nddmove.js src/nddmove/app-hc-nddmove.css --dist-dir dev/nddmove", |
- Gerar o build através do comando
| Bloco de código |
|---|
|
npm run ndd[produto]-build |
Finalização
- Incluir os scripts no Help Center
- Alterar a cor de texto do banner para branco
#FFFFFF - Alterar o Banner
- Mudar o tamanho das caixas para Medium
Categorias
- Criar as categorias conforme o contexto dos conteúdos que serão organizados
| Painel |
|---|
| panelIconId | 1f4a1 |
|---|
| panelIcon | :bulb: |
|---|
| panelIconText | 💡 |
|---|
| bgColor | #F4F5F7 |
|---|
|
|
Ex: Preciso de ajuda FAQ Tutoriais Solução de problemas Falar com o Suporte
|
