A seção de Código Personalizado permite que você incorpore seu próprio HTML e CSS diretamente na página inicial da base de conhecimento. Existe para situações em que os blocos padrão do corpo, como texto enriquecido, cartões multicolunas, imagem com texto - não oferecem o layout ou funcionalidade que você precisa. Com esse bloco, você tem controle total sobre o que renderiza e como ele fica, tornando-o a escolha certa para conteúdo dinâmico, embeds de terceiros ou tratamentos visuais personalizados que não são possíveis com os outros blocos.
Quando usar a seção de código personalizado
- Banners dinâmicos - Exiba uma promoção sazonal, anúncio de lançamento de produto ou aviso de manutenção usando HTML personalizado que você pode atualizar independentemente do layout da página.
- Temporizadores de contagem regressiva - Incorpore uma contagem regressiva com JavaScript para eventos, lançamentos ou ofertas por tempo limitado.
- Widgets de terceiros incorporados - Adicione embeds de serviços externos como players de vídeo, construtores de formulários, widgets de chat ou badges de página de status, que não possuem um bloco dedicado.
- Conteúdo personalizado - Quando você precisar de um layout ou tratamento visual específico que não seja alcançável com o Rich text ou blocos de cartões Multicolumn, escreva seu próprio HTML e CSS para isso.
Seções de código personalizadas executam HTML e CSS no contexto do seu site de base de conhecimento. Teste seu código cuidadosamente antes de publicar. HTML mal estruturado pode afetar o layout dos elementos da página ao redor.
Como adicionar uma seção de código personalizado
- Navegue até Configurações () na barra de navegação da esquerda do portal da Base de Conhecimento.
- No painel de navegação esquerdo, navegue até Site da base de conhecimento > Personalização do site.
- Clique no botão Personalizar site .
- No menu suspenso à esquerda, selecione Página inicial . A seção Corpo exibe a lista de blocos corporais.
- Clique na seção Adicionar e selecione a seção Código Personalizado. O bloco é adicionado à lista.
- Use o ícone de Reordenar () para reorganizar o bloco. Os ícones de Reordenar e Esconder () aparecem quando você passa o mouse sobre qualquer bloco de corpo na seção Corpo.
Como configurar a seção de código personalizado
- Clique no bloco de seção Código Personalizado para abrir o editor.
- Na aba HTML , adicione ou edite seu código HTML.
- Na aba CSS , adicione ou edite seu código CSS.
- Clique em Salvar para salvar suas alterações como rascunho.
- Clique em Pré-visualização para ver como o código é renderizado no site da base de conhecimento.
- Clique em Publicar para deixar as mudanças ativas.
Melhores práticas
- Sempre faça uma pré-visualização antes de publicar – diferenças de renderização entre o editor e o site ao vivo podem ser sutis. Use a opção Pré-visualização para verificar o layout e o estilo antes de fazer o compromisso.
- Mantenha o HTML autônomo – evite referenciar folhas de estilo externas ou scripts que possam bloquear o carregamento da página ou entrar em conflito com os estilos do próprio Document360.
- Defina o escopo do seu CSS - use nomes específicos de classes para seus elementos personalizados para evitar sobrescrever os estilos padrão do site.
- Use a aba CSS para todos os estilos – manter os estilos separados da marcação facilita a manutenção e atualização do código.
- Teste entre modos claro e escuro - se sua base de conhecimento suporta modo escuro, verifique se seu código personalizado renderiza corretamente em ambos.
FAQ
Como faço para excluir uma seção de código personalizado da página inicial?
Navegue até {{variable. Configurações}} () > {{variável. Base de conhecimento site}} > Personalização do site e clique em Personalizar site. No menu suspenso à esquerda, selecione Página inicial . Na seção Corpo, selecione a seção de código personalizado desejada. Clique em Excluir () abaixo da barra de navegação, depois clique em Sim no prompt de confirmação Excluir. Clique em Salvar e depois em Publicar para aplicar as alterações.