--- title: "JavaScript personalizado" slug: "custom-javascript" updated: 2026-06-22T08:47:53Z published: 2026-06-22T08:47:53Z 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 El JavaScript personalizado en Document360 te permite añadir tu propio código JavaScript para extender la funcionalidad de tu base de conocimientos más allá de lo que ofrecen los ajustes integrados. Pegas código directamente en el portal y se ejecuta en todas las páginas de tu base de conocimiento. Esta es la herramienta adecuada cuando necesitas añadir comportamiento dinámico, interactuar con elementos de página, integrar scripts de terceros o automatizar interacciones que no pueden configurarse con los ajustes estándar. --- ## Cuándo usar JavaScript personalizado Utiliza JavaScript personalizado cuando necesites comportamientos o funcionalidades que CSS y los ajustes integrados no puedan proporcionar: - **Modifica la estructura de la página dinámicamente** : reordena, muestra u oculta elementos en la página según las condiciones. Por ejemplo, mueve la sección de artículos relacionados por encima de la sección de feedback, o oculta la barra de navegación izquierda para lectores específicos. - **Añade interactividad en la cabecera** : añade iconos de redes sociales, enlaces dinámicos de feedback o botones personalizados al encabezado de navegación usando JavaScript. - **Integra herramientas de terceros** : incrusta scripts analíticos, widgets de chat, herramientas de feedback o seguimiento personalizado que deban ejecutarse en cada página. - **Mostrar solo la categoría activa en la barra lateral izquierda** : filtra el árbol de categorías para que solo la categoría actualmente activa y sus subcategorías sean visibles, reduciendo el desorden de navegación para los lectores. --- ## Antes de que empieces - Debes tener una cuenta de equipo con acceso a nivel de administrador al portal de la Base de conocimientos. - El JavaScript personalizado se aplica globalmente a todo el sitio de la base de conocimiento: se ejecuta en todas las páginas y afecta a todos los lectores. - Document360 no valida ni altera tu código JavaScript. - Los errores no se detectarán automáticamente y los scripts rotos pueden interrumpir la experiencia del sitio. Prueba bien tus cambios antes de guardar. NOTA El sitio de la base de conocimientos de Document360 utiliza un modelo de Aplicación de Página Única (SPA). Esto significa que solo el contenido del artículo se actualiza cuando un lector navega, no la página completa. El JavaScript personalizado que depende de eventos de carga o actualización de página puede no funcionar como se espera. Utiliza el `articleload` evento en su lugar: ``` panel.addEventListener('articleload', function() { // Your custom JavaScript code here }); ``` --- ## Cómo añadir JavaScript personalizado 1. Navega a Configuración () > Sitio de la base de conocimientos en la barra de navegación izquierda del portal de la Base de Conocimiento. 2. En el panel de navegación izquierdo, navega hasta **personalización del sitio**. ![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. Haz clic **en CSS y JavaScript personalizados**. 2. Selecciona la pestaña **JavaScript** . Aparece el editor de código JavaScript. 3. Pega tu código JavaScript en el área de texto. 4. Haz clic **en Guardar** para aplicar tus cambios. ![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) El JavaScript ahora está activo en tu sitio de base de conocimiento. Visita la web para verificar el comportamiento. --- ## Ejemplos de casos de uso Los siguientes ejemplos muestran personalizaciones comunes que puedes lograr con JavaScript personalizado. ### Mover artículos relacionados por encima de la sección de comentarios ``` panel.onload = function () { $(".content_block_text").append("
"); $('.related-articles-container').appendTo('.content_block_text') } ``` ### Mostrar solo la categoría activa en la barra lateral izquierda ``` /* 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 más ejemplos de casos de uso de JavaScript, consulta los artículos [de Trucos y Trucos](https://docs.document360.com/docs/es/customization-editor) . --- ## Mejores prácticas - **Utiliza el `articleload` evento para compatibilidad con SPA** : envuelve todo el JavaScript que interactúa con el contenido del artículo para `panel.addEventListener('articleload', function() { ... })` asegurarte de que se ejecuta de forma fiable en cada navegación del artículo, no solo en la carga inicial de la página. - **Mantén los scripts enfocados y mínimos** : JavaScript personalizado se ejecuta en cada página. Guiones inflados o lentos aumentan el tiempo de carga de la página para todos los lectores. Solo incluye lo necesario. - **Prueba tanto en modo claro como oscuro** : los scripts que manipulan elementos o estilos del DOM pueden comportarse de forma diferente según los temas. Siempre previsualiza ambos antes de guardar. - **Comenta tu código** : añade comentarios en línea explicando qué hace cada bloque, especialmente si varios miembros del equipo gestionan JavaScript. Ejemplo: `/* Moves related articles above feedback — added June 2026 */` - **Elimina los scripts no utilizados** : los scripts que ya no sean necesarios deben eliminarse del editor. El código sobrante aumenta la complejidad y puede causar conflictos inesperados con cambios futuros. - **El JavaScript personalizado no aparece en los enlaces de vista previa compartidos** : para verificar el comportamiento final, publica tus cambios y consulta directamente la base de conocimiento en vivo. --- ## Preguntas frecuentes **¿Por qué mi JavaScript personalizado no funciona después de que un lector navegue a un nuevo artículo?** Document360 utiliza un modelo de Aplicación de Página Única (SPA): cuando un lector navega entre artículos, solo se actualiza el contenido del artículo, no la página completa. JavaScript que depende de eventos de carga o actualización de página solo se ejecutará una vez en la carga inicial. Envuelve tu código `panel.addEventListener('articleload', function() { ... })` para asegurarte de que se ejecute cada vez que el contenido del artículo cambie. **¿Por qué no aparece JavaScript personalizado en el enlace de vista previa compartible?** El JavaScript personalizado está intencionadamente deshabilitado en los enlaces de vista previa compartibles para garantizar un rendimiento y seguridad consistentes cuando el contenido se comparte externamente. Para verificar tus cambios en JavaScript, publica el artículo y accede directamente desde la base de conocimientos, o utiliza un entorno sandbox. **¿Puedo añadir JavaScript diferente para cada espacio de trabajo?** No. JavaScript personalizado se configura a nivel de proyecto y se aplica a todos los espacios de trabajo dentro del proyecto. No es posible añadir JavaScript separado para espacios de trabajo individuales a través de la configuración de CSS y JavaScript personalizados.