--- title: "JavaScript personalizado" slug: "custom-javascript" updated: 2026-06-22T08:58:37Z published: 2026-06-22T08:58:37Z canonical: "docs.document360.com/custom-javascript" stale: true --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # JavaScript personalizado O JavaScript personalizado no Document360 permite que você adicione seu próprio código JavaScript para expandir a funcionalidade do seu site de base de conhecimento além do que as configurações integradas fornecem. Você cola o código diretamente no portal e ele roda em todas as páginas do seu site de base de conhecimento. Essa é a ferramenta certa quando você precisa adicionar comportamento dinâmico, interagir com elementos de página, integrar scripts de terceiros ou automatizar interações que não podem ser configuradas pelas configurações padrão. --- ## Quando usar JavaScript personalizado Use JavaScript personalizado quando precisar de comportamentos ou funcionalidades que o CSS e as configurações embutidas não possam oferecer: - **Modificar a estrutura da página dinamicamente** – reordenar, mostrar ou esconder elementos na página com base nas condições. Por exemplo, mova a seção de artigos relacionados acima da seção de feedback, ou oculte a barra de navegação da esquerda para leitores específicos. - **Adicione interatividade com cabeçalhos** - adicione ícones de redes sociais, links de feedback dinâmico ou botões personalizados ao cabeçalho de navegação usando JavaScript. - **Integre ferramentas de terceiros** - incorpore scripts de análise, widgets de chat, ferramentas de feedback ou rastreamento personalizado que precisam rodar em todas as páginas. - **Mostre apenas a categoria ativa na barra lateral esquerda** - filtre a árvore de categorias para que apenas a categoria ativa atualmente e suas subcategorias fiquem visíveis, reduzindo a confusão de navegação para os leitores. --- ## Antes de começar - Você deve ter uma conta de equipe com acesso administrativo ao portal da Knowledge Base. - O JavaScript personalizado se aplica globalmente a todo o site da base de conhecimento – ele roda em todas as páginas e afeta todos os leitores. - O Document360 não valida nem manipula seu código JavaScript. - Erros não serão sinalizados automaticamente e scripts quebrados podem atrapalhar a experiência do site. Teste suas mudanças cuidadosamente antes de salvar. NOTA O site da base de conhecimento do Document360 utiliza um modelo de Aplicação de Página Única (SPA). Isso significa que apenas o conteúdo do artigo é atualizado quando o leitor navega – não a página inteira. JavaScript personalizado que depende de eventos de carregamento ou atualização de página pode não funcionar como esperado. Use o `articleload` evento em vez disso: ``` panel.addEventListener('articleload', function() { // Your custom JavaScript code here }); ``` --- ## Como adicionar JavaScript personalizado 1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação esquerda do portal da Base de Conhecimento. 2. No painel de navegação à esquerda, navegue até **Personalização do Site**. ![Site customization page showing the Custom CSS and JavaScript option in the left navigation pane](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1770890215248.png) 1. **Clique em CSS & JavaScript Personalizados**. 2. Selecione a aba **JavaScript** . O editor de código JavaScript aparece. 3. Cole seu código JavaScript na área de texto. 4. Clique **em Salvar** para aplicar suas alterações. ![JavaScript tab in the Custom CSS and JavaScript editor showing a code snippet pasted in the editor](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom-JavaScript-Snippet.png) O JavaScript agora está ativo no seu site de base de conhecimento. Visite o site para verificar o comportamento. --- ## Exemplos de casos de uso Os exemplos a seguir mostram personalizações comuns que você pode alcançar com JavaScript personalizado. ### Mova artigos relacionados acima da seção de feedback ``` panel.onload = function () { $(".content_block_text").append("
"); $('.related-articles-container').appendTo('.content_block_text') } ``` ### Mostrar apenas a categoria ativa na barra lateral esquerda ``` /* Left sidebar category start */ let parent_data = null; function client_tree_data(data) { parent_data = data; window.clientData = data; const slug = window.location.pathname.split('/').filter(Boolean).pop(); if (slug === "docs") { return [data[0]]; } return data.filter(item => markIfContainsSlug(item, slug)); } function markIfContainsSlug(node, slug) { if (node.slug === slug) { node.found = true; return true; } return node.children?.some(child => markIfContainsSlug(child, slug)) || false; } /* Left sidebar category end */ ``` NOTA Para mais exemplos de casos de uso em JavaScript, veja os artigos [Dicas e Truques](https://docs.document360.com/docs/pt/customization-editor) . --- ## Melhores práticas - **Use o `articleload` evento para compatibilidade com SPA** - envolva todo o JavaScript que interage com o conteúdo do artigo para `panel.addEventListener('articleload', function() { ... })` garantir que ele dispare de forma confiável em toda navegação de artigo, não apenas no carregamento inicial da página. - **Mantenha scripts focados e mínimos** – JavaScript personalizado roda em cada página. Roteiros inchados ou lentos aumentam o tempo de carregamento da página para todos os leitores. Inclua apenas o que for necessário. - **Teste tanto no modo claro quanto no escuro** – scripts que manipulam elementos ou estilos DOM podem se comportar de forma diferente entre os temas. Sempre faça uma prévia de ambos antes de salvar. - **Comente seu código** - adicione comentários inline explicando o que cada bloco faz, especialmente se vários membros da equipe gerenciam o JavaScript. Exemplo: `/* Moves related articles above feedback — added June 2026 */` - **Remover scripts não utilizados** - scripts que não são mais necessários devem ser excluídos do editor. O código remanescente aumenta a complexidade e pode causar conflitos inesperados com mudanças futuras. - **JavaScript personalizado não aparece em links de pré-visualização compartilháveis** – para verificar o comportamento final, publique suas alterações e visualize diretamente o site da base de conhecimento ao vivo. --- ## FAQ **Por que meu JavaScript personalizado não funciona depois que um leitor navega para um novo artigo?** O Document360 utiliza um modelo de Aplicação de Página Única (SPA) — quando um leitor navega entre artigos, apenas o conteúdo do artigo é atualizado, não a página inteira. JavaScript que depende de eventos de carregamento ou atualização de página só será executado uma vez no carregamento inicial. Enrole seu código `panel.addEventListener('articleload', function() { ... })` para garantir que ele rode toda vez que o conteúdo do artigo mudar. **Por que o JavaScript personalizado não aparece no link de pré-visualização compartilhável?** O JavaScript personalizado é intencionalmente desativado em links de pré-visualização compartilháveis para garantir desempenho consistente e segurança quando o conteúdo é compartilhado externamente. Para verificar suas alterações em JavaScript, publique o artigo e acesse-o diretamente pelo site da base de conhecimento, ou use um ambiente sandbox. **Posso adicionar JavaScript diferente para cada espaço de trabalho?** Não. O JavaScript personalizado é configurado no nível do projeto e se aplica a todos os espaços de trabalho dentro do projeto. Não é possível adicionar JavaScript separado para espaços de trabalho individuais através das configurações de CSS & JavaScript personalizadas.