Einbettung externer Inhalte

Document360 unterstützt es, Inhalte von Drittanbietern direkt in Ihre Artikel einzubetten – einschließlich Diagrammen, Videos und interaktiven Formularen – ohne das Knowledge Base-Portal zu verlassen. Das Einbetten erfolgt mit HTML-iframe-Code, der im erweiterten WYSIWYG-Editor in die Code-Ansicht eingefügt wird oder direkt im Markdown-Editor.

In diesem Artikel werden drei Einbettungstypen behandelt:

Wann würdest du diese benutzen?

• Fügen Sie ein Draw.io Flussdiagramm oder Architekturdiagramm neben ein technisches Verfahren ein, damit die Leser den vollständigen Systemkontext sehen können, ohne das Werkzeug zu wechseln
• Fügen Sie ein Microsoft Stream-Schulungsvideo in einen Onboarding-Artikel ein, damit interne Nutzer es ansehen können, ohne die Wissensdatenbank zu verlassen
• Fügen Sie am Ende eines Artikels ein Google-Formular ein, um Leserfeedback, Zufriedenheitsbewertungen oder Supportanfragen direkt zu sammeln
• Verwenden Sie Diagramme, die als Bilder exportiert werden, wenn Sie ein leichtes, immer sichtbares Bild benötigen, das nicht von der Verfügbarkeit externer Dienste abhängt

Einbetten Draw.io Diagramm

Diagrams.net (allgemein als Draw.io bezeichnet) ist ein webbasiertes, Open-Source-Tool zur Erstellung von Flussdiagrammen, UML-Diagrammen, Entitätsbeziehungen, Netzwerkdiagrammen, Mockups und mehr.

Einbetten als Bild-Tag

Verwenden Sie diesen Ansatz im Markdown-Editor oder über die Code-Ansicht im erweiterten WYSIWYG-Editor.

1. In Diagrams.net klicken Sie auf Datei > Einbetten und wählen Sie Bild.
2. Klicken Sie auf Einbetten.
3. Klicken Sie auf Kopieren , um das generierte Bild-Tag zu kopieren.
4. Im Markdown-Editor fügen Sie den kopierten Code direkt in den Artikel ein. Im erweiterten WYSIWYG-Editor klicken Sie auf das Codeansichtssymbol und fügen Sie den Code an der gewünschten Stelle ein.

Du kannst die Höhen- und Breitenwerte im Tag nach Bedarf anpassen.

Als Bild exportieren und hochladen

Verwenden Sie diesen Ansatz für den Advanced WYSIWYG Editor oder wenn Sie das Diagramm im Document360 Drive speichern möchten.

1. In Diagrams.net klicken Sie auf Datei > Exportieren als > PNG.
2. Klicken Sie auf Export, benennen Sie die Datei und speichern Sie sie an Ihrem bevorzugten Ort.
3. Klicken Sie auf Herunterladen.
4. Im Document360-Editor klicken Sie auf Bild einfügen und wählen Sie Von Upload/URL.
5. Wählen Sie das heruntergeladene Bild aus und klicken Sie auf Einfügen.

Microsoft Stream-Videos einbetten

Sie können sowohl Microsoft SharePoint Stream als auch die neuesten Microsoft Stream-Videos in Document360-Artikel einbetten. Das Einbetten wird sowohl in den Markdown- als auch in den Advanced WYSIWYG-Editoren unterstützt.

Den Embed-Code von Stream erhalten

1. Navigiere zur Stream-Plattform und wähle das Video aus, das du einbetten möchtest.
2. Klicke oben rechts auf der Videoseite auf Teilen und wähle dann Code einbetten.
3. Im Embed-Panel konfigurieren Sie bei Bedarf folgende Optionen:
   • Beginnen Sie mit — setzen Sie einen bestimmten Zeitstempel (z. B. 01:23)
   • Spielergröße – wähle eine Auflösung (z. B. 640×360, 1280×720)
4. Klicken Sie auf Code einbetten.

Einbettung im Advanced WYSIWYG-Editor

1. Navigieren Sie zum gewünschten Artikel.
2. Klicken Sie auf das Code-Ansichts-Symbol .
3. Fügen Sie den Einbettungscode an die gewünschte Stelle ein.
4. Zum Speichern drücken Ctrl + S .

Einbettung mit dem Schrägstrich-Befehl

1. Geben Sie ein und /Video drücken EnterSie . Das Panel "Video einfügen " erscheint.
2. Im Reiter "Code einbetten " fügen Sie den kopierten Einbettungscode ein.
3. Klicken Sie auf Speichern.

Google Formulare einbetten

Sie können Google Forms direkt in Knowledge Base-Artikel einbetten, indem Sie einen HTML-iframe-Code verwenden. Nach der Veröffentlichung können Leser mit dem Formular interagieren – Umfragen ausfüllen, Feedback einreichen oder Daten eingeben – ohne den Artikel zu verlassen.

Den Einbettungscode von Google Forms erhalten

1. Gehe zu Google Forms und melde dich mit deinem Google-Konto an.
2. Öffnen Sie ein bestehendes Formular oder erstellen Sie ein neues.
3. Klicken Sie oben im Formular auf die Schaltfläche Senden .
4. Im Panel "Formular senden " wählen Sie den Tab < > (Einbetten).
5. Klicken Sie auf Kopieren , um den iframe-Einbettungscode zu kopieren.

Einbettung im Advanced WYSIWYG-Editor

1. Navigieren Sie zum gewünschten Artikel.
2. Klicken Sie auf das Code-Ansichts-Symbol .
3. Fügen Sie den kopierten iframe-Code an die gewünschte Stelle ein.
4. Zum Speichern drücken Ctrl + S . Das Formular wird im Artikel dargestellt.

Einbettung im Markdown-Editor

1. Navigiere im Markdown-Editor zum gewünschten Artikel.
2. Füge den iframe src-Link direkt in den Editor an der gewünschten Stelle ein.

Best Practices

• Setzen Sie Draw.io Diagramme immer auf öffentlich, bevor Sie einbetten – private Diagramme erscheinen den Lesern auf der Wissensdatenbank als fehlerhaft
• Nutze den Export-als-Bild-Ansatz für Draw.io Diagramme, wenn du volle Kontrolle über das Bild willst, ohne darauf angewiesen zu sein, dass eine externe Service-Verbindung aktiv bleibt
• Überprüfen Sie vor der Veröffentlichung die Stream-Video-Berechtigungen – Leser ohne Zugriff auf das Stream-Video sehen einen Fehler statt des Videos
• Teste eingebettete Google Forms nach der Veröffentlichung, um sicherzustellen, dass sie korrekt für Leser angezeigt und eingereicht werden
• Halte den eingebetteten Inhalt fokussiert – ein Diagramm oder Formular pro Abschnitt. Das Stapeln mehrerer Einbettungen in einem einzigen Artikel kann die Seitenladeleistung beeinträchtigen
• Schauen Sie den Artikel immer nach dem Einbetten vor, um sicherzustellen, dass der Inhalt korrekt wiedergegeben wird, bevor Sie veröffentlichen