Versões comparadas

Versão Versão antiga 27 Nova versão Atual
Alterações feitas por

Paulo Henrique Paixão

Paulo Henrique Paixão

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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.

...

Nota

Antes de iniciar

Certifique-se de ter o código hexadecimal 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.

Dica

Você 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

...

  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

Índice
minLevel2
maxLevel2
outlinefalse
styledisc
typelist
printabletrue

...

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

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.

Editar o tema do Help Center

Header

  •  Alterar o Logo
  •  Alterar a cor de background do header para a cor Secundária do produto
  •  Alterar a cor de texto do header para branco #FFFFFF

Portal

...

Dica

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.

Painel
panelIconId1f609
panelIcon:wink:
panelIconText😉
bgColor#E3FCEF

Não esqueça do contraste:

Group 8713-20241212-163634.pngImage Added

  • 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

...

  1. para o nome do produto

...

Painel
panelIconId1f4a1
panelIcon:bulb:
panelIconText💡
bgColor#F4F5F7

  • nddorbix

  • nddmove

...

  1. (ex.: nddorbix, nddmove).

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

...

  1. .

  2. Atualize o banner.

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

Dica

O logo e o banner você encontra no repositório.

Categorias

...

  •  Criar as categorias conforme o contexto dos conteúdos que serão organizados

...

panelIconId1f4a1
panelIcon:bulb:
panelIconText💡
bgColor#F4F5F7

...

(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

...

Finalização

  •  Incluir o script Custom CSS alterando o nome do arquivo para o nome do produto

...

panelIconId1f4a1
panelIcon:bulb:
panelIconText💡
bgColor#F4F5F7

Dica

Como criar ou alterar as categorias.

...

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
languagecss
@import url("https://confluencendd.github.io/public/app-hc-[produto].
css”
css")

...

Custom JS

...

panelIconId1f4a1
panelIcon:bulb:
panelIconText💡
bgColor#F4F5F7

...

Insira o script abaixo para carregar funcionalidades adicionais:

Bloco de código
languagejs
vp.loadScript("https://confluencendd.github.io/public/app-hc-[produto].js")
.then(() => {
});
  •  Atualizar o Help Center
Após finalizar os passos, avise o adminstrador do Help Center
Dica
Nota

Substitua [produto] pelo nome do seu produto (ex.: nddorbix, nddmove).

...

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?

Dica

Por fim, atualize o Help Center (Update site).