Skip to content

Screenshot Guide

Yes, screenshots can be embedded

Use standard Markdown images with project-relative paths.

Example: 

![Message Center inbox](./assets/message-center/inbox-list.png)

If the image is referenced from a file inside a subfolder, use the relative path from that file.

Example from docs/manual/workflows/message-center-new-inbound.md: 

![Thread view](../assets/message-center/thread-view.png)


docs/manual/
  assets/
    message-center/
    leads/
    broadcasts/
    admin/
    shared/

File Naming Rules

  • use lowercase
  • use hyphen-separated names
  • make the file name describe the screen and purpose

Examples: - inbox-list.png - thread-context-panel.png - lead-search-filters.png - broadcast-wizard-step-1.png - admin-ai-settings.png

  • use a consistent browser width
  • avoid personal or production-sensitive data
  • use seeded or sanitized training data
  • crop only when it improves clarity
  • one screenshot per major step, not every click

Where To Embed Screenshots

Best places: - below the “Purpose” or “Overview” section for orientation - after a numbered step when the screen is important - in troubleshooting sections when pointing out a failure state

Suggested Pattern

## Open The Thread
1. Select the thread from the inbox.
2. Review the most recent inbound message.

![Selected thread in Message Center](./assets/message-center/thread-selected.png)

If Screenshots Are Not Ready Yet

Use a placeholder comment so future writers know what to add: 

<!-- Screenshot: assets/message-center/thread-selected.png -->

Video Support

The same screenshot asset folders can also hold: - annotated stills - thumbnail images - frame captures for training decks

For video scripts, keep the screenshots aligned with the same workflow names used in docs/manual/workflows/.