Personalização avançada da marca na central de ajuda

A personalização avançada permite levar uma central de ajuda do Deskwoot além do logo e da cor da marca básicos e deixá-la com cara de que foi criada pela sua própria equipe de design. Você configura tudo isso em Central de Ajuda, depois na aba Configurações. O básico (logo, cor da marca, busca, layout) funciona em qualquer plano, enquanto os controles mais profundos (CSS personalizado, HTML de cabeçalho e rodapé) fazem parte do plano Enterprise. Aqui está tudo o que você pode alterar.

Como defino um favicon personalizado?

O favicon é o pequeno ícone na aba do navegador. Faça o upload de um nas configurações da central de ajuda e ele aparece em todas as páginas públicas daquele portal. Se você não enviar nenhum, o Deskwoot gera um ícone com a sua marca a partir da cor da marca e da primeira letra do nome do portal. Uma central de ajuda nunca mostra o favicon do próprio Deskwoot, então os visitantes não veem a nossa marca na aba deles mesmo antes de você definir um.

Use uma imagem quadrada (um PNG funciona bem). A maioria dos navegadores a exibe em 16 ou 32 pixels, então mantenha o design simples o bastante para ser legível nesse tamanho.

Como escolho uma fonte para a central de ajuda?

Defina uma fonte web nas configurações e toda a central de ajuda é exibida com ela. O Deskwoot carrega a fonte do Google Fonts para você, então não há nada para hospedar ou enviar. Você escolhe a partir de uma lista selecionada:

• Padrão do sistema (sem fonte web, usa a fonte do dispositivo do visitante)
• Inter
• Roboto
• Open Sans
• Lato
• Poppins
• Montserrat
• Nunito
• Source Sans
• Plus Jakarta Sans

Combine a fonte com o seu site de marketing e a central de ajuda deixa de parecer uma ferramenta separada. Deixe no Padrão do sistema para o carregamento mais rápido se você não tiver uma fonte de marca em mente.

Claro, escuro ou automático: escolhendo um tema

A central de ajuda tem uma configuração de tema com três opções:

• Claro (o padrão): superfícies brancas, texto escuro.
• Escuro: superfícies escuras, texto claro. Bom quando a sua marca é escura.
• Automático: segue a configuração do sistema do visitante (o prefers-color-scheme dele), então mostra o tema escuro para quem usa o dispositivo no modo escuro e o claro para todo mundo.

O tema se aplica a todas as páginas públicas por meio da estrutura compartilhada de página, então você o define uma vez e ele cobre a página inicial, as páginas de categoria e as páginas de artigo.

Posso ajustar as cores com tokens de design?

Sim. Além do tema, você pode sobrescrever tokens de design individuais em vez de escrever CSS. Os tokens que você pode definir são o fundo da página, a superfície (cartões e painéis), a cor da borda, a cor do texto do corpo, a cor do texto atenuado e a cor dos títulos. Cada um recebe um valor hexadecimal. Qualquer token que você deixar em branco volta ao predefinido do tema.

Essa é a maneira limpa de ajustar um tema escuro para a sua paleta de marca exata, por exemplo um fundo de página azul-marinho profundo com uma superfície um pouco mais clara, sem mexer no CSS personalizado. A cor da marca que você define separadamente continua controlando botões, links e detalhes.

CSS personalizado

Para tudo o que o tema e os tokens não alcançam, portais Enterprise podem injetar CSS personalizado. O Deskwoot o envolve em um bloco de estilo isolado no topo da central de ajuda pública, então ele estiliza as suas páginas sem que você edite modelos.

Algumas regras para saber de antemão:

• Higienizamos o CSS quando você o salva. Regras @import, url(javascript:...) e buscas de recursos externos são removidas. Isso impede que um portal sirva código malicioso ou carregue recursos controlados por um invasor pela página pública.
• Há um limite de tamanho de 20.000 caracteres. Isso é mais do que suficiente para ajustes de marca; não foi feito para guardar um sistema de design inteiro.
• Como ele fica isolado na central de ajuda pública, o seu CSS não pode afetar acidentalmente o painel do Deskwoot.

Recorra primeiro aos tokens de design. Use o CSS personalizado apenas quando precisar reestilizar algo que os tokens não expõem.

HTML personalizado de cabeçalho e rodapé

Para que a central de ajuda pareça parte do seu site principal, portais Enterprise podem fornecer HTML de cabeçalho e HTML de rodapé brutos.

O HTML de cabeçalho é renderizado como um bloco autônomo acima da seção principal, então você pode colar a barra de navegação do seu site de marketing e deixar os visitantes circularem entre o seu site e a sua central de ajuda sem uma mudança brusca. O HTML de cabeçalho personalizado precisa de um domínio personalizado ativo.

O HTML de rodapé substitui o rodapé padrão na parte de baixo de todas as páginas públicas, então você pode espelhar o rodapé de marketing exatamente. Quando você define um HTML de rodapé bruto, ele ocupa o lugar do rodapé personalizado mais simples baseado em colunas (um rodapé estruturado com até 4 colunas de links mais uma linha de direitos autorais) caso você também o tivesse configurado.

Tanto o HTML de cabeçalho quanto o de rodapé são higienizados quando você salva. Scripts, manipuladores de eventos, blocos <style>, iframes, formulários e URLs javascript: são removidos. Atributos de classe e de estilo em linha sobrevivem, então você escreve a marcação com classes e deixa o seu CSS personalizado terminar a estilização. Cada campo tem limite de 20.000 caracteres.

Como tudo isso se encaixa

Uma configuração totalmente com a sua marca normalmente fica assim: um domínio personalizado para que a URL seja sua, white-label ativado para remover o rodapé do Deskwoot, o seu logo e favicon enviados, uma cor de marca e fonte web escolhidas, um tema selecionado (com algumas sobrescritas de tokens, se necessário) e a sua barra de navegação e rodapé reais colados como HTML de cabeçalho e rodapé. Nesse ponto, um visitante não consegue perceber que a central de ajuda roda no Deskwoot. Para as etapas de domínio e white-label, veja Configurar um domínio personalizado e Aplicar white-label à sua central de ajuda.

Mais uma rede de segurança: toda vez que você salva alterações de design, o Deskwoot tira uma foto do estado anterior. O histórico de design nas configurações permite ver quem mudou o quê e voltar a um visual anterior com um clique, então experimentar com a marca tem baixo risco.