Uma parte importante da sua Central de Ajuda é que ela fique com a aparência e personalidade da sua marca. No formato básico, é possível usar as cores padrões, mas não é possível reconstruir o cabeçalho e o rodapé. Pensando nisso, disponibilizamos uma personalização avançada utilizando HTML, CSS e JavaScript para sua Central de Ajuda, parecendo, assim, parte do site de sua empresa.

O HTML vai te ajudar a adicionar ou remover seções do cabeçalho e textos adaptáveis, enquanto o CSS te ajuda a personalizar da maneira que achar melhor.

Observação:

• A personalização em HTML só pode ser feita por clientes no plano Enterprise.

• A personalização em CSS só pode ser feita por clientes nos planos Professional e Enterprise.
  

Personalização HTML

Você pode personalizar o cabeçalho e o rodapé da sua maneira, adicionando logotipo, imagens, links que levam para outras páginas e muito mais.

Veja como personalizar o HTML:

1. Vá para Configuração (⚙️) > Canais > Central de Ajuda.

2. Selecione a Central de Ajuda na qual você deseja personalizar o HTML.

3. Clique em Personalização da Central de Ajuda no submenu Central de Ajuda. A página da lista de temas será exibida.

4. Clique em Personalizar correspondente ao tema publicado.
   

5. Selecione a aba HTML na barra lateral da página de Personalização.

6. Personalize os elementos do Cabeçalho, adicionando o código apropriado. Você também pode clicar em Rodapé para personalizar seus elementos.

7. Clique em Visualizar para revisar suas alterações.

8. Clique em Publicar.

Você pode clicar em Redefinir para o padrão para restaurar o conteúdo HTML, mas, com isso, a personalização de guias não está disponível quando você personaliza o HTML.

Usando marcadores de posição HTML padrão

É possível colocar e alterar marcadores de posição HTML padrão com o Zoho Desk, sendo assim possível personalizar sua Central de Ajuda.
Segue a lista de marcadores de posição para Rodapé e Cabeçalho:

Para adicionar um espaço reservado:

1. Na página HTML, digite '$' dentro das tags <div> para visualizar uma lista dos espaços reservados.

2. Pressione Enter (ou Return) para adicionar um espaço reservado.
   Por exemplo: Nome da Empresa.
   

3. Clique em Visualizar para revisar suas alterações.

4. Clique em Publicar.

Lembrando que os marcadores de posição já incluem hiperlinks, então, não é necessário adicionar atributos como href.

Personalizar CSS

Como dito, você pode utilizar o CSS para mudar a aparência da sua Central de Ajuda.

Para personalizar o CSS:

1. Vá para Configuração (⚙️) > Canais > Central de Ajuda.

2. Selecione a Central de Ajuda para a qual você deseja personalizar o CSS.

3. Clique em Personalização da Central de Ajuda no submenu Central de Ajuda. A página da lista de temas será exibida.

4. Clique em Personalizar correspondente ao tema publicado.

5. Selecione a aba CSS na barra lateral da página de Personalização.
   

6. Personalize os elementos da folha de estilo.

7. Clique em Visualizar para revisar suas alterações.

8. Clique em Publicar.

Quando uma estilização em CSS é feita por você, ela é aplicada em todas as suas Centrais de Ajuda.
Você também pode importar um estilo CSS externo clicando no ícone Importar CSS (📥), lembrando que deve ser um arquivo .txt ou .css de no máximo 1MB.
Usar atributos ID existentes para direcionar suas regras CSS é essencial para manter a estrutura e os elementos HTML.

Personalizando a Central de Ajuda usando JavaScript

Vamos pensar que o HTML é como o esqueleto humano e o CSS é tudo que for externo e nos dá a aparência que temos. O JavaScript controla as ações que fazemos, como mexer os braços, pernas ou piscar os olhos.

Dessa maneira, o Zoho Desk permite que você adicione funções e scripts em linha para sua Central de Ajuda.

• Scripts em linha: adicione scripts de terceiros, como rastreadores de análise, widgets de chat ou gateways de pagamento, diretamente na Central de Ajuda, sem a necessidade de escrever código do zero.
  Exemplo: visualizações, taxa de cliques em uma página etc., usando uma ferramenta de análise externa como o Google Analytics.

• Funções JavaScript: escreva funções JavaScript personalizadas para interagir com componentes do Zoho Desk, manipular elementos DOM (Document Object Model) ou estender comportamentos padrão.
  Exemplo: mostrar ou ocultar elementos dinamicamente com base em condições específicas, ou adicionar elementos interativos personalizados à interface do usuário.

Habilitando script personalizado

Para adicionar qualquer código JavaScript, antes é necessário que essa opção esteja habilitada.

1. Navegue até Configuração > Canais > Central de Ajuda.

2. Selecione o portal da Central de Ajuda desejado e selecione Configurações de acesso.

3. Habilite Scripts personalizados para personalização aprimorada da Central de Ajuda.
   

Personalizando JavaScript

Com o editor JS, é possível personalizar sua Central de Ajuda, mas só é possível utilizar esta opção quando Habilitar scripts personalizados estiver ativado.

Para personalizar o script JS:

1. Navegue até Configuração > Canais > Central de Ajuda.

2. Selecione uma Central de Ajuda e clique em Personalização da Central de Ajuda.

3. Selecione um tema, clique na aba Personalizar e depois clique em JS.

4. Se você estiver usando o código de um aplicativo de terceiros, adicione o script na guia Script embutido.
   

5. Se você estiver usando sua própria função, adicione o script na aba Função JS.
   

6. Clique em Visualizar para revisar suas alterações e, depois, clique em Publicar.