# Add Screenshots to Documentation Screenshots help you explain product interfaces, user tasks, and important product states visually. Use the screenshot management area to add visual assets that make your documentation easier to follow. ## Overview Visual documentation combines written instructions with images of the screens your readers use. A well-placed screenshot can help users recognize the correct page, confirm that they completed a step, or understand what information they need to enter before continuing. You can manage screenshots from the documentation area by selecting **Manage Screenshots β†’**. Screenshot management is available for enterprise documentation and for individual project versions, so you can keep images aligned with the documentation they support. Use screenshots when written labels alone may not be enough. For example, include an image when you need to show a complex page layout, identify a feature location, distinguish between product states, or guide a new user through a multi-step **User Flow**. > πŸ“· _Screenshot pending: The documentation area showing the Manage Screenshots β†’ action._ ## Prerequisites Before you begin, make sure you have the following: - Access to the relevant enterprise documentation area or project version. - Documentation that needs a visual explanation, such as a **User Guide** or **User Manual**. - Screenshot image files that accurately represent the current product interface. - Permission to update the documentation workspace, if your organization limits editing access. - A clear understanding of the task or screen state that each image should explain. - Finalized product content where possible, so screenshots do not show temporary, outdated, or incomplete interfaces. ## Step-by-Step Instructions 1. Open the documentation workspace where you want to manage visual assets. 2. Select **User Docs** to work with end-user documentation. 3. Select **πŸ“‹ User Manuals** if you are preparing screenshots for a user manual or help-center style guide. 4. Select **Manage Screenshots β†’** to open the screenshot management area. > πŸ“· _Screenshot pending: The screenshot management area opened from Manage Screenshots β†’._ 5. Choose the documentation scope that matches the content you are updating. 6. Select the relevant project version if the screenshots are specific to a particular version of a project. 7. Add the screenshot image that represents the interface, task, or product state you want to explain. 8. Review the added image to confirm that the visible screen matches the current product experience. 9. Associate the screenshot with the documentation content it supports. 10. Use the screenshot near the instruction or explanation where readers need visual confirmation. 11. Repeat the process for each additional screen in the user journey. 12. Open **View Your Documentation β†’** to review how the completed documentation reads for end users. 13. Check that each screenshot appears next to the correct instruction and supports the surrounding text. 14. Update or replace any image that shows an old label, incomplete state, or unrelated product area. 15. Select **Export Documentation** when you need to distribute the completed documentation outside the workspace. ## Tips and Best Practices Use screenshots to clarify, not to replace, written instructions. Your readers should still be able to follow the task from the numbered steps, field names, and button labels. The image should confirm what they are looking for rather than force them to infer the action. Capture the state that matters. If you are documenting a task with a meaningful beginning and end, consider using images for the key stages: the starting screen, the screen where the user makes the main change, and the completed result. This is especially helpful for a **User Flow** that spans several pages. Keep screenshots focused on the user’s task. Avoid including unrelated browser tabs, personal information, development-only content, or large empty areas. If the important action is a small portion of a busy page, make sure the relevant area is clearly visible. Use the exact labels readers see in the product. For example, if your instructions tell users to select **Manage Screenshots β†’**, the corresponding image should visibly include that action. Consistent wording makes it easier for readers to connect the text to the interface. Review screenshots whenever the interface changes. Documentation is most useful when its images match the current product. If a button label, layout, or workflow changes, replace the affected screenshot before publishing or exporting the documentation. Keep user-manual images appropriate for end users. The documentation workspace supports different documentation styles, including user-facing manuals and other documentation types. When preparing content for **User Guides** or **πŸ“‹ User Manuals**, show the actions and outcomes that a business user needs, rather than internal implementation details. ## Related Pages - [Generate Documentation](#generate-documentation) - [View Your Documentation](#view-your-documentation) - [Export Documentation](#export-documentation) - [User Guides](#user-guides) - [User Manuals](#user-manuals) - [Documentation Templates](#documentation-templates) ## Troubleshooting ### You cannot find the screenshot management area Return to the documentation workspace and look for **Manage Screenshots β†’**. If the action is unavailable, confirm that you are in the correct enterprise documentation area or project version and that you have permission to edit documentation. ### The screenshot does not match the written instructions Compare the image with the current product screen and the exact labels in your steps. Replace the image if it shows an earlier interface, a different project version, or a different user state than the one described. ### Readers cannot tell what the screenshot is showing Place the screenshot directly after the relevant numbered instruction and make the written instruction specific. Refer to visible labels such as **User Docs**, **πŸ“‹ User Manuals**, **Manage Screenshots β†’**, or **View Your Documentation β†’** so readers know exactly what to locate.