Screen capturing in Advanced WYSIWYG editor

Screen capturing is a quick and effective way to add visuals to your documentation. With Document360, you can capture screens directly from the Advanced WYSIWYG Editor or Drive, making it easy to insert and manage images within your articles. This feature allows you to capture entire tabs, specific windows, or selected areas and store them in Document360 Drive for future use.

This article provides step-by-step instructions on using the screen capture feature, from installation to inserting captured images into your articles.

Assume a technical writer is updating an article on configuring API keys. To add clarity, they use Document360’s screen capture feature in the Advanced WYSIWYG Editor to capture and insert key screenshots without switching tools. Later, while organizing content in Drive, they capture another screen, save it with tags and alt text, and reuse it in future articles. This streamlines the documentation process, making it more efficient and visually clear.

Screen capturing from the Advanced WYSIWYG editor

To capture a screen from the Advanced WYSIWYG editor, follow these steps:

1. Use the slash command /Screen capture and hit Enter.

2. Click Install to install the Document360 extension.

   NOTE

   This extension is exclusively supported in the Chrome browser.

   This action redirects you to the Chrome web store or the appropriate browser store page.

3. Once installed, return to the Knowledge base portal.

4. Select the desired screen to capture:

   • Chrome tab: Records only the selected Chrome tab.

   • Window: Records only the selected window.

5. Click Share to proceed.

If a Chrome tab is selected:

6. The selected Chrome tab will display a message: "Sharing this tab to portal.document360.io."

7. Click Stop sharing to cancel the capturing process.

8. A floating panel appears with the following options to capture the selected screen:

   • Visible tab area: Captures the entire tab.

   • Selected area: Captures a specific area of the tab.

9. Use the Drag and drop () icon to move this floating panel based on your preference.

10. Click Visible tab area to capture the entire tab.

11. Click Selected area and drag to select the desired capture area. You can extend the selection if needed. Once finalized, click Capture.

If a Window is selected:

12. The selected window is captured automatically.

13. After capturing, you are redirected to the Knowledge base portal.

    The captured image appears in a panel with advanced image editing tools such as Resize, crop, Flip, Rotate, Draw, Shape, Icon, Text, Filter, etc.,

    NOTE

    For more information, read the article on Image formatting in the Advanced WYSIWYG editor.

14. After customizing the image, click Insert to add it to the article.

15. Click Cancel to discard the capture.

NOTE

• If you navigate to the Knowledge base portal during screen capture, a panel appears indicating that the process is in progress.

• The maximum image size for screen capture is 150 MB.

• All captured images are automatically uploaded to Document360 Drive, stored in the default Images folder, and include metadata such as captions and alt text (if provided). These images can be reused in future articles.

To capture a screen from Drive, follow these steps:

1. Navigate to the desired location in Drive within the Knowledge base portal.

2. Click Upload files, and the Upload files panel will appear.

3. Click Screen capture.

4. Select the desired screen to capture:

   • Chrome tab: Records only the selected Chrome tab.

   • Window: Records only the selected window.

5. Click Share to proceed.

If a Chrome tab is selected:

6. The selected Chrome tab will display a message: Sharing this tab to portal.document360.io.

   • Click Stop sharing to cancel the process.

7. A floating panel appears with the following capture options:

   • Visible tab area: Captures the entire tab.

   • Selected area: Captures a specific area of the tab.

8. Use the Drag and drop () icon to reposition the floating panel.

9. Click Visible tab area to capture the full tab.

10. Click Selected area and drag to select the desired capture area. You can extend the selection if needed. Once finalized, click Capture.

If a Window is selected:

11. The selected window is captured automatically.

12. After capturing, you are redirected to the Knowledge base portal.

    The captured image appears in the Upload files panel.

13. You can add tags and alt text for the captured image.

14. Click Upload, and the image is stored in the selected Drive location.