Incrustación de contenido externo

Document360 permite incrustar contenido de terceros directamente en tus artículos —incluidos diagramas, vídeos y formularios interactivos— sin salir del portal de la base de conocimiento. La incrustación se realiza usando código iframe HTML pegado en la vista de código en el editor avanzado WYSIWYG, o directamente en el editor Markdown.

En este artículo se abordan tres tipos de incrustación:

¿Cuándo los usarías tú?

• Inserta un diagrama de flujo Draw.io o un diagrama de arquitectura junto a un procedimiento técnico para que los lectores puedan ver el contexto completo del sistema sin cambiar de herramienta
• Inserta un vídeo de formación de Microsoft Stream dentro de un artículo de incorporación para que los usuarios internos puedan verlo sin salir de la base de conocimientos
• Inserta un formulario de Google al final de un artículo para recopilar en línea los comentarios de los lectores, valoraciones de satisfacción o solicitudes de soporte
• Utiliza diagramas exportados como imágenes cuando necesites un visual ligero y siempre visible que no dependa de la disponibilidad de servicios externos

Incrustar Draw.io diagrama

Diagrams.net (comúnmente conocido como Draw.io) es una herramienta web de código abierto para crear diagramas de flujo, diagramas UML, relaciones de entidades, diagramas de red, maquetas y más.

Incrustar como etiqueta de imagen

Utiliza este enfoque en el editor Markdown o mediante la vista de código en el editor avanzado WYSIWYG.

1. En Diagrams.net, haz clic en Archivo > Incrustar y elige Imagen.
2. Haz clic en Incrustar.
3. Haz clic en Copiar para copiar la etiqueta de imagen generada.
4. En el editor de Markdown, pega el código copiado directamente en el artículo. En el editor avanzado WYSIWYG, haz clic en el icono de vista de código y pega el código en la ubicación deseada.

Puedes ajustar los valores de altura y anchura en la etiqueta según lo necesites.

Exportar como imagen y subir

Utiliza este enfoque para el editor avanzado WYSIWYG o cuando quieras almacenar el diagrama en Document360 Drive.

1. En Diagrams.net, haz clic en Archivo > Exportar como > PNG.
2. Haz clic en Exportar, nombra el archivo y guárdalo en tu ubicación preferida.
3. Haz clic en descargar.
4. En el editor de Document360, haz clic en Insertar imagen y selecciona Desde Subir/URL.
5. Selecciona la imagen descargada y haz clic en Insertar.

Incrustar vídeos de Microsoft Stream

Puedes incrustar tanto Microsoft SharePoint Stream como los últimos vídeos de Microsoft Stream en los artículos de Document360. La incrustación está soportada tanto en los editores Markdown como en Advanced WYSIWYG.

Obtención del código embed de Stream

1. Navega a la plataforma Stream y selecciona el vídeo que quieres incrustar.
2. Haz clic en Compartir en la parte superior derecha de la página del vídeo y luego selecciona Incrustar código.
3. En el panel de incrustación, configura las siguientes opciones si es necesario:
   • Empieza desde — establece una marca temporal específica (por ejemplo, 01:23)
   • Tamaño del jugador — elige una resolución (por ejemplo, 640×360, 1280×720)
4. Haz clic en Copiar código incrustado.

Incrustación en el editor avanzado WYSIWYG

1. Navega hasta el artículo deseado.
2. Haz clic en el icono de vista de códigos .
3. Pega el código de incrustación en la ubicación deseada.
4. Pulsa Ctrl + S para guardar.

Incrustación usando el comando de corte

1. Escribe /Video y pulsa Enter. Aparece el panel de Insertar vídeo .
2. En la pestaña de Incrustar código , pega el código de incrustación copiado.
3. Haz clic en Guardar.

Incrustar Google Forms

Puedes incrustar Google Forms directamente en los artículos de la base de conocimientos usando un código iframe HTML. Tras publicarlo, los lectores pueden interactuar con el formulario — rellenando encuestas, enviando comentarios o introduciendo datos — sin abandonar el artículo.

Obtener el código de incrustación de Google Forms

1. Ve a Google Forms e inicia sesión con tu cuenta de Google.
2. Abre un formulario existente o crea uno nuevo.
3. Haz clic en el botón Enviar en la parte superior del formulario.
4. En el panel Enviar formulario , selecciona la pestaña < > (Incrustar).
5. Haz clic en Copiar para copiar el código de incrustación de iframe.

Incrustación en el editor avanzado WYSIWYG

1. Navega hasta el artículo deseado.
2. Haz clic en el icono de vista de códigos .
3. Pega el código del iframe copiado en la ubicación deseada.
4. Pulsa Ctrl + S para guardar. El formulario aparecerá reflejado en el artículo.

Incrustación en el editor Markdown

1. Navega hasta el artículo deseado en el editor de Markdown.
2. Pega el enlace iframe src directamente en el editor en la ubicación deseada.

Mejores prácticas

• Siempre pon Draw.io diagramas públicos antes de incrustar: los diagramas privados parecerán rotos para los lectores en la base de conocimientos
• Utiliza el enfoque de exportación como imagen para Draw.io diagramas cuando quieras tener control total sobre lo visual sin depender de que un enlace de servicio externo siga activo
• Verifica los permisos de vídeo de Stream antes de publicar: los lectores que no tengan acceso al vídeo de Stream verán un error en lugar del vídeo
• Prueba los Google Forms integrados después de publicarlos para confirmar que se renderizan y envían correctamente para los lectores
• Mantén el contenido incrustado enfocado — un diagrama o formulario por sección. Apilar múltiples incrustaciones en un solo artículo puede afectar al rendimiento de carga de página
• Siempre previsualiza el artículo después de incrustarlo para confirmar que el contenido se renderiza correctamente antes de publicarlo