Personalização do tema da central de ajuda

Disponível nos planos Suite Growth e superiores Disponível em todos os planos do Guide

Caminho rápido: Administrador do Guide > Painel de personalização > Personalizar > Editar código

Os administradores do Guide com experiência em programação podem trabalhar diretamente com o código da página para criar um tema personalizado para a central de ajuda. Os temas personalizados incluem:

Os modelos editáveis que definem a disposição de cada página (por exemplo, a página do artigo, a página da categoria e a página do tópico da comunidade)
As páginas personalizadas que você cria do zero e coloca em sua central de ajuda
O cabeçalho e o rodapé globais de sua central de ajuda

Você também pode usar uma linguagem de modelo com recursos completos chamada Curlybars para acessar os dados da central de ajuda e manipular o conteúdo nos modelos da página e as páginas personalizadas. Você pode usar também os arquivos JavaScript e CSS inclusos em o seu tema para alterar a aparência e o comportamento do tema em todo o website. Se você está pensando em usar seu próprio código HTML para editar o tema da sua central de ajuda, consulte Edição do código-fonte dos artigos central de ajuda.

Quando você modifica o código de um tema (por exemplo, seus modelos, JavaScript ou CSS), a visualização do tema mostra o ícone </>, indicando que o código do tema foi modificado e não receberá mais novos recursos e atualizações.

Dica: se precisar de ajuda com a personalização da central de ajuda, você pode acessar o Marketplace da Zendesk para comprar novos temas criados por desenvolvedores da Zendesk e externos.

Observação: os usuários da versão de avaliação recebem o plano Professional, que inclui opções de edição de código, mas não poderão acessar esse recurso se adquirirem o Suite Team.

Este artigo abrange os seguintes tópicos:

Personalização dos modelos de página com HTML e Curlybars
Personalização do CSS ou do JavaScript
Uso de variáveis em CSS em HTML

Personalização dos modelos de página e páginas personalizadas com HTML e Curlybars

O HTML da central de ajuda encontra-se em modelos editáveis que definem a disposição de tipos de página, páginas personalizadas, cabeçalho e rodapé globais. Você também pode usar uma linguagem de modelo com recursos completos chamada Curlybars para criar ou manipular o conteúdo para esses elementos.

Observação: nos planos Enterprise, você pode criar páginas personalizadas e modelos adicionais de páginas para artigos, seções e categorias caso necessite de várias versões desses modelos.

É possível personalizar o modelo de qualquer um dos seguintes tipos ou elementos da página ou criar suas próprias páginas personalizadas.

Páginas personalizadas (custom_page.hbs): as páginas personalizadas que você cria do zero e vincula de sua central de ajuda
Página do artigo (article_page.hbs): são as páginas de artigos individuais da base de conhecimento
Página da categoria (category_page.hbs): são as páginas de aterrissagem
Página da lista de publicações da comunidade (community_post_list_page.hbs)
Página da publicação da comunidade (community_post_page.hbs)
Página da lista de tópicos da comunidade (community_topic_list_page.hbs)
Página do tópico da comunidade (community_topic_page.hbs)
Página Contribuições (contributions_page.hbs): lista as publicações, comentários da comunidade e comentários de artigos feitos por usuários finais
Cabeçalho do documento (document_head.hbs): é a tag head do documento
Página de erro (error_page.hbs): é a mensagem exibida quando um usuário chega a uma página que não existe
Rodapé (footer.hbs): são as barras exibidas na parte inferior de todas as páginas da central de ajuda
Cabeçalho (header.hbs): são as barras exibidas na parte superior de todas as páginas da central de ajuda
Página inicial (home_page.hbs): é a página de destino de nível mais alto da sua central de ajuda
Página de nova publicação da comunidade (new_community_post_page.hbs)
Página de nova solicitação (new_request_page.hbs): é o formulário de envio de solicitações ou tickets
Página Solicitações (request_page.hbs): são as páginas de solicitações ou tickets individuais
Página Solicitações (requests_page.hbs): são as listas de solicitações ou tickets atribuídos a um usuário ou que um usuário está em cópia
Resultados da pesquisa (search_results.hbs): é o formato da exibição de resultados da pesquisa
Página de seção (section_page.hbs): são as páginas de aterrissagem
Página Seguindo (subscriptions_page.hbs): a lista de categorias, seções e artigos que um usuário está seguindo
Página de perfil do usuário (user_profile_page.hbs)

Observação: quando você usa o Editor do tema para editar os modelos de página, CSS ou JavaScript de um tema padrão, ou quando desenvolve seu próprio tema, ele é salvo como um tema personalizado. A Zendesk não dá suporte a temas personalizados e eles não são atualizados automaticamente quando novos recursos são lançados (consulte Temas padrão e personalizados na central de ajuda).

Como editar seus modelos de página

No Guide, na barra lateral, clique no ícone do Painel de personalização ().
No tema que deseja editar, clique em Personalizar.
Clique em Editar código.
Na seção Modelos, clique no modelo ou na página personalizada que deseja modificar.
A página é aberta no editor de código.
Utilize a visualização do código para editar o modelo ou a página.
Você pode adicionar, remover ou reordenar os seguintes elementos:
- Expressões do modelo, para exibir e manipular conteúdo em suas páginas
  Por exemplo, o auxiliar do modelo de navegação estrutural {{breadcrumbs}} exibe um elemento de navegação estrutural na página. Para obter um guia detalhado das expressões de modelo, consulte Modelos da central de ajuda.
- Placeholders de conteúdo dinâmico (consulte Adição de texto traduzido)
- Widgets incorporáveis criados por terceiros
- Marcação HTML
Clique em Salvar no canto superior direito para salvar as alterações.
Se você editou um modelo, as alterações são aplicadas a todas as páginas no seu tema baseadas no modelo modificado.
Para visualizar as alterações, clique em Visualizar. Consulte Visualização do seu tema na central de ajuda.

Observação: ao visualizar um tema, nem todos os recursos podem funcionar. O recurso de visualização serve para mostrar alterações na aparência, não para testar por completo a funcionalidade interativa do tema. Recomendamos usar uma sandbox para testes completos.
Altere o código como for necessário e clique em Salvar.
Após terminar a edição do modelo ou da página personalizada, feche a janela.

Dica: leia esta publicação no Zendesk Blog para obter mais ideias de modelos de artigo da base de conhecimento.

Personalização do CSS ou do JavaScript

Você pode adicionar código JavaScript ou personalizar o CSS do site. Para dar uma primeira olhada no que é possível fazer na central de ajuda com um pouco de código, consulte os seguintes recursos:

Observação: quando você usa o Editor do tema para editar os modelos de página, CSS ou JavaScript de um tema padrão, ou quando desenvolve seu próprio tema, ele é salvo como um tema personalizado. A Zendesk não dá suporte a temas personalizados e eles não são atualizados automaticamente quando novos recursos são lançados. Consulte Temas padrão e personalizados na central de ajuda.

Como personalizar o CSS ou JavaScript

No Guide, clique no ícone Painel de personalização () na barra lateral.
No tema que deseja editar, clique em Personalizar.
Clique em Editar código.
Clique em script.js para modificar o JavaScript ou style.css para modificar o CSS.
O arquivo é aberto no editor de código.
Adicione ou modifique o JavaScript ou CSS na visualização do código.
Clique em Salvar no canto superior direito para salvar as alterações.
As alterações são aplicadas ao seu tema.
Para visualizar as alterações, clique em Visualização, consulte Visualização do seu tema na central de ajuda.
Altere o código como for necessário e clique em Salvar.
Ao terminar, feche o arquivo.

Uso de variáveis em CSS em HTML

As propriedades escolhidas no painel Configurações ou definidos no seu arquivo de manifesto para as cores, fontes ou imagens do tema são armazenadas nas variáveis. Você pode usar essas variáveis no arquivo style.css do tema. Você também pode fazer referência às variáveis usando expressões Curlybars nos modelos de página HTML.

As variáveis são úteis se você quiser especificar o mesmo valor em vários locais e atualizá-los rapidamente. A atualização da propriedade entra em vigor em todos os locais onde a variável é usada. O tema Copenhagen padrão inclui algumas variáveis para suas cores e fontes. Você pode alterar os nomes e rótulos, apagar variáveis ou adicionar as que desejar (consulte Uso de configurações no manifest.json como variáveis).

No tema Copenhagen padrão, você tem as variáveis a seguir por padrão:

brand_color é a cor da marca nos elementos principais da navegação
brand_text_color é a cor da marca para os status de passagem do mouse e ativo
text_color é a cor do texto para os elementos do corpo e cabeçalho
link_color é a cor do texto para elementos de link
background_color é a cor de plano de fundo da sua central de ajuda
heading_font é a fonte para os cabeçalhos
text_font é a fonte do corpo do texto
logo é o logotipo da empresa
favicon é o ícone exibido na barra de endereço do seu navegador
homepage_background_image é a imagem principal na página inicial
community_background_image é a imagem principal inicial na página de tópicos da comunidade
community_image é a imagem da seção Comunidade na página inicial

Para usar as variáveis em CSS e HTML, consulte:

Exemplos usando variáveis em CSS
Exemplos usando variáveis em Curlybars em HTML

Exemplos usando variáveis em CSS

As propriedades definidas para as cores, fontes e imagens do tema são armazenadas em variáveis que você pode usar no arquivo style.css do seu tema.

Por exemplo, você pode usar algumas das variáveis padrão no CSS com a sintaxe a seguir:

$brand_color
$brand_tex_color
$heading_font
$text_font

No arquivo CSS, é possível atribuir uma variável a uma propriedade do CSS da mesma maneira que se atribui um valor normal. Por exemplo:

.button {
  label-color: $text_font;
}

Você também pode usar um colchete único para inserir o auxiliar em uma expressão CSS, da seguinte maneira:

max-width: #{$search_width}px

Exemplos usando variáveis em Curlybars em HTML

As propriedades definidas para cores, fontes e imagens do tema são armazenadas em variáveis às quais você pode fazer referência nos modelos de página HTML.

As variáveis se tornam propriedades do objeto settings em Curlybars. Como com qualquer objeto Curlybars, você pode usar colchetes duplos e notação de ponto para inserir uma propriedade em um modelo de página.

Por exemplo:

{{settings.color_1}} é o valor HEX de uma cor. Por exemplo: #FF00FF
{{{settings.font_1}} é a pilha da fonte. Por exemplo, o sistema está definido como: '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
{{settings.homepage_background_image}} é o caminho para o arquivo armazenado nesse campo. Por exemplo: p8.zdassets.com/theme_assets/...
{{settings.range_input}} é o valor de entrada do intervalo.

O objeto de configurações pode ser usado como entrada para qualquer auxiliar. Por exemplo:

{{is settings.enabled}} ... {{/is}}