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.

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.

3. Haz clic en CSS y JavaScript personalizados.
4. Selecciona la pestaña JavaScript . Aparece el editor de código JavaScript.
5. Pega tu código JavaScript en el área de texto.
6. Haz clic en Guardar para aplicar tus cambios.

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("<div class=\"sperator\"><hr></div>");
  $('.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 */

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