---
title: "Hi FAQ- Aparência"
slug: "hifaq-aparencia"
updated: 2021-01-28T22:15:35Z
published: 2021-01-28T22:15:36Z
canonical: "help.hiplatform.com/hifaq-aparencia"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.hiplatform.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hi FAQ- Aparência

Agora, você pode ter mais de um template no HiFaq em uma única base de conhecimento, podendo alterar a aparência sempre que quiser, sem a necessidade de abrir um chamado no Suporte Hi.

Acesse: ***Departamento ⇒ Configurações ⇒ HiFaq ⇒ Aparência HiFaq***

Siga o passo a passo abaixo e aprenda a personalizar a aparência do HiFaq.

---

**1. Tela inicial:** Nesta tela é possível:

1. **Item 1 –** Cadastro de aparências
2. **Item 2 –** Refere-se ao nome dado a aparência cadastrada (isso é configurável, veremos mais adiante)
3. **Item 3**–Refere-se ao tipo de aparência do template.
  - ***FAQ –*** Item XX
  - ***Central de atendimento –*** Item XXX
  - ***Mosaico** –***Possui os mesmos itens de configurações do FAQ e Central de atendimento, a diferença é o layout, divisão estilo mosaico com cards de cada categoria.****

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h30_08.png)

Agora iremos mostrar o passo a passo das configurações disponíveis nos dois novos modelos de template. **(FAQ, Central de atendimento e Mosaico)**

1. Clique em: **“+Nova Aparência“.**
2. A seguinte tela será exibida:

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h33_56.png)

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h41_05.png)

**Tipo**: **FAQ || Central de atendimento**

---

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h51_16.png)

**1. Aparência:** **( A ) LAYOUT**

1. ***Nome da aparência*****⇒** É o nome que servirá de identificação para o seu template, é o que aparece na tela inicial (item 2)
2. ***Titulo em destaque ⇒***Personalização do titulo

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h54_17.png)

**3. Campo de busca *⇒***Personalização do campo de busca

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h55_56.png)

**4. Paleta de cores *⇒*** Personalização na visualização dos artigos.

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h57_01.png)

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_17h59_56.png)**( B ) ARTIGOS**

1. **Comportamento do artigo** ***⇒*** A configuração de comportamento funciona para buscas que retornarem **mais de um artigo**.
  - **Abrir na mesma página:** Ao clicar no artigo, o conteúdo é aberto na mesma página![](https://yv-misc.s3.amazonaws.com/hihelp/4800_2017-03-27_18h55_55.png)
  - **Abrir em outra página:** Ao clicar no artigo, o conteúdo é aberto “apartado”
  - [![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h11_40.png)](https://i0.wp.com/help.hiplatform.com/wp-content/uploads/2017/03/2017-03-27_19h01_43.png?ssl=1)
2. **Texto de resultado de artigo único:****![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h16_57.png)**
3. **Texto de resultado da listagem de artigos:** **![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h18_02.png)**
4. **Titulo da tela de não encontrado && Texto da tela de não encontrado****![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h19_04.png)**
5. **Permitir avaliação dos artigos****![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h20_19.png)**
6. **Ativar sugestão de artigos *⇒*** A partir da quarta letra digitada no campo busca, será exibido “sugestões” de artigos baseado no que está sendo pesquisado.                                                                                                                                           ![](https://yv-misc.s3.amazonaws.com/hihelp/4800_2017-03-28_11h48_18.png)
7. **Cores dos artigos**
  - **Perguntas && Respostas && Ícone****![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h32_42.png)**
8. **Mostrar artigos mais lidos:** Exibe os artigos mais clicados pelos clientes na tela de inicio.
  - ***Automático ⇒*** Uma vez ativo, mostra até 15 artigos mais buscados.![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h33_56.png)
  - ***Personalizado ⇒*** Possibilidade de definir quais e a ordem dos artigos que serão exibidos.![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h35_15.png)
  - ![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h38_03.png)

**( C ) CANAIS DE ATENDIMENTO**

- **Quando mostrar os canais:**
- ***Se**mpre mostrar ⇒* **Os canais de atendimentos ficarão sempre visíveis**.**
- ***Quando o usuário fizer a primeira busca ⇒*** *Os canais de atendimentos (itens 2, 3, 4, 5 e 6) só serão mostrados depois que o cliente realizar a primeira busca, seja ela com resposta ou não.*
- ***Quando o usuário visualizar uma resposta** **⇒*** Os canais de atendimentos aparecerão quando o usuário visualizar o conteúdo do artigo.
- **Mostrar “Bot” || Mostrar “Chat”** *⇒* *Possibilidade de escolher como será feito o atendimento, seja ele por assistente virtual(bot) ou humano(chat). As configurações são as mesmas independentemente da escolha.*
- *![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h40_12.png)*
  - Popup ***⇒*** *A janela de atendimento é aberto em uma nova janela*
  - Widget ***⇒*** *A janela de atendimento é aberto dentro do site.*
  - Texto ***⇒*** *Configuração do texto do botão*
  - Departamento
    - Link externo ***⇒*** *Se você possui um bot/chat de outro fornecedor é possível configurar para abrir dentro da central.*
    - Departamento ***⇒*** *Todos os departamentos que possuem chat/bot em sua operação.*
  - Ícone ***⇒*** *É possível inserir uma imagem****dentro do botão.***
    - ***Ícone quando ativa:*** A imagem só aparece se o cliente passar o mouse por cima do botão
    - Ícone quando inativa: A imagem fica fixa no botão.
- **Mostrar “Email” || Mostrar “Nós te ligamos” *⇒* Possibilidade de inserir um formulário de contato.**![](https://yv-misc.s3.amazonaws.com/hihelp/4800_2017-04-18_18h25_25.png)
  - Popup ***⇒*** *A janela de atendimento é aberto em uma nova janela*
  - Mesma tela ***⇒*** *A janela de atendimento é aberto dentro do site.*
  - Texto ***⇒*** *Configuração do texto do botão*
  - Departamento
    - Link externo ***⇒****Se você possui um formulário de contato de outro fornecedor é possível configurar para abrir dentro da central.*
    - Departamento ***⇒****Todos os departamentos que possuem formulário de contato em sua operação.*
  - Ícone ***⇒*** *É possível inserir uma imagem****dentro do botão.***
    - ***Ícone quando ativa:*** A imagem só aparece se o cliente passar o mouse por cima do botão
    - Ícone quando inativa: A imagem fica fixa no botão.
- **Mostrar “HiTicket”** *⇒* *Possibilidade de inserir o HiTicket.*![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h47_53.png)
  - Texto ***⇒****Configuração do texto do botão*
  - Ícone ***⇒****É possível inserir uma imagem **dentro do botão*****.**
    - ***Ícone quando ativa:*** A imagem só aparece se o cliente passar o mouse por cima do botão
    - Ícone quando inativa: A imagem fica fixa no botão.
  - Link ***⇒****Quando clicar no botão, o cliente será redirecionado para o endereço inserido neste campo.*
- **Mostrar “Telefones”** *⇒* *Exibe os telefones para contato.*
- *![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h50_17.png)*
  - Texto ***⇒*** *Configuração do texto do botão*
  - Ícone ***⇒*** *É possível inserir uma imagem **dentro do botão*****.**
    - ***Ícone quando ativa:*** A imagem só aparece se o cliente passar o mouse por cima do botão
    - Ícone quando inativa: A imagem fica fixa no botão.
  - Telefones ***⇒*** *Campo em que é inserido os telefones.*

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h53_16.png)

Configurado os canais, a central ficará da seguinte maneira:

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h54_23.png)

**( D ) VÍDEOS**

1. Título da área ***⇒****Texto que aparecerá antes dos videos.*
2. Titulo do vídeo ***⇒****Texto que aparecerá com o vídeo*
3. URL do vídeo do youtube ***⇒****Endereço do vídeo*
4. Vincular artigo ao vídeo ***⇒****Campo não obrigatório, é utilizado para vincular o vídeo em algum artigo existente, isso significa que, se o cliente clicar no vídeo, será contabilizado como acesso a este artigo, contabilizando inclusive nos relatórios.*
5. Adicionar ***⇒*** Inclui o vídeo na central de atendimento.![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h57_14.png)

Preenchido os campos acima, o vídeo irá aparecer da seguinte forma em sua central:

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h58_31.png) **( E ) CATEGORIAS**

- Não selecionada ***⇒*** *Personalização da cor do texto e fundo da categoria.**![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_18h59_52.png)*
- Selecionada ***⇒*** *Personalização da cor do texto e fundo da categoria ao passar o mouse por cima.*

*![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_19h01_26.png)*

**( E ) CATEGORIAS**

Ao optar pela aparência Mosaico, as categorias ficarão estilo cards de cada categoria no HiFaq, conforme abaixo:

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_19h03_23.png)

- Título: Chamada do texto.
- Exibição do mosaico: Permite aplicar a exibição apenas à página inicial do HiFaq ou todas as páginas.
- Busca: Pesquisa rápida das categorias cadastradas.
- Ativo/Inativo: Possibilita ativar ou inativar uma categoria existente.

---

![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_19h04_49.png)

**2. Arquivos** *⇒* *Local em que é feito o upload das imagens.*

*![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_19h05_50.png)*

**3. URL *⇒* Obtenção do**script para publicação da central de atendimento em seu site.

1. Utilizar widget ***⇒****Abre a central de atendimento dentro do site.*
2. Utilizar rascunho ***⇒****Permite visualizar as suas alterações salvas como rascunho. Desta forma, é possível, visualizar alterações de layout e funcional sem afetar o que já está em seu site publicado.*
3. Utilizar link para Mobile ***⇒****Caso a sua central seja acessada por mobile, esta funcionalidade permite que nos relatórios do HiFaq seja possível parametrizar os acessos pelo celular. Interessante ressaltar que o script de publicação é alterado, sendo assim, ficaria 1 script para acesso desktop e outro mobile.**![](https://cdn.document360.io/fbdc20e9-fffd-4203-8df2-642bdec311ea/Images/Documentation/2021-01-28_19h09_52.png)*

---

**4. Avançado *⇒*** Use o modelo avançado para fazer alterações no modelo básico. Qualquer CSS inserido aqui será adicionado ao modelo padrão enquanto o HTML e Javascript serão adicionados ao rodapé da página.

1. CSS avançado ***⇒*** *É a linguagem que define o visual das páginas HTMLS*
2. HTML avançado do rodapé ***⇒****Linguagem de marcação de página, também é possível usar Javascript para mudar comportamentos do seu HiFaq.*

Confira também!

**HiFAQ- Aparência: O que é e como configurar? [Saiba mais](https://help.hiplatform.com/docs/hifaq-aparencia-o-que-e-e-como-configurar).**