Document toolboxDocument toolbox

Guia de migração para o novo Help Center

Owned by Paulo Henrique Paixão
Last updated: dez. 12, 2024
3 min read

Aqui você aprenderá como realizar todas as customizações necessárias para o novo padrão visual e funcional do Help Center.

Group 8222-20241206-162826.png

Antes de iniciar

Certifique-se de que você tem as informações e os acessos necessários:

  1. Cores do produto

    • Obtenha os códigos hexadecimais das cores primária, secundária e terciária do produto.

    • Consulte o time de UX ou acesse o NDS (Design System) para localizar as cores oficiais.

  2. Acesso ao repositório de ícones

    • Confira o repositório com os ícones atualizados.

    • Caso não encontre um ícone necessário, solicite acesso ao Figma para criar ou ajustar os ícones.

  3. Aviso ao administrador

    • O administrador do Help Center deve ser avisado com antecedência sobre a mudança, enviando as cores para que os scripts sejam gerados.

Neste artigo

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 para conteúdos complementares.

Como atualizar:

  1. Baixe os ícones no repositório.

  2. Substitua os ícones antigos pelos novos nos documentos.

  3. 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

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 [PRODUTO] oferecidos pelo NDD Academy.

Manual de Integrações

Entenda como integrar seu sistema ao [PRODUTO] utilizando nossas APIs.

Como editar as informações dos documentos

Passo 3: Personalização do tema do Help Center

 

  1. Na barra superior do Confluence, clique na aba Aplicativos

  2. Clique em Scroll Viewport

  3. Na lista, selecione o Help Center que deseja editar o tema

  4. Clique no botão Edit theme > Templates

Header

  • Logo: Substitua pelo logotipo oficial do Help Center.

Não esqueça do contraste:

Group 8713-20241212-163634.png

  • Cor de fundo: Altere para a cor secundária do produto.

  • Cor do texto: Configure como branco #FFFFFF.

Portal

  1. Ajuste o título do Help Center para o nome do produto (ex.: nddorbix, nddmove).

  2. Altere a cor do texto do banner para branco #FFFFFF.

  3. Atualize o banner.

  4. Ajuste o tamanho das caixas para o formato Medium.

Categorias (Tiles ordering)

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

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:

@import url("https://confluencendd.github.io/public/app-hc-[produto].css")

Custom JS

Insira o script abaixo para carregar funcionalidades adicionais:

vp.loadScript("https://confluencendd.github.io/public/app-hc-[produto].js") .then(() => { });

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?