Skip to main content
What can we help you with?
< All Topics
Print

Screenshot Capture Guide

Posted
Updated
ByPeter Westerman

Screenshot Capture Guide

Executive Advisor Board Plugin – End-User Documentation

Purpose: This guide provides detailed instructions for capturing the screenshots needed to complete the end-user documentation.

Login Credentials for Testing:

  • URL: https://it-influentials.com/virtual-board-of-directors/
  • Username:
  • Password:

## Required Screenshots List

### Priority 1: Essential Screenshots (Getting Started Guide)

#### Screenshot 1: Login Required Message

File name: 01-login-required.png

Where to capture: Navigate to the plugin page while logged out

What to show:

– The “Authentication Required” message

– Lock icon

– “Please log in to submit and view proposal evaluations” text

– “Log In” button

– Clean view of the page header

Annotations needed:

– Red box around the entire authentication message area

Screenshot 2: Executive Advisory Board Header

File name: 02-executive-header.png
Where to capture: Main plugin page after login
What to show:

  • “Executive Advisory Board” title with groups icon
  • Subtitle: “Submit your proposal…”
  • All eight agent badges (CEO, CFO, CHRO, CMO, COO, CTO, GC, Board)
  • Clean, full-width view of header area

Annotations needed:

  • Red box around the agent badges section
  • Optional: Number labels 1-8 on each agent badge

Screenshot 3: Section Navigation Bar

File name: 03-section-navigation.png
Where to capture: Form area showing the section tabs
What to show:

  • All 12 section navigation buttons
  • Icons for each section
  • One section highlighted as “active” (preferably “Proposal Basics”)
  • Clear view of the tabbed navigation layout

Annotations needed:

  • Red box around the active/highlighted section
  • Arrow pointing to the active section with label “Active Section”

Screenshot 4: GDPR Consent and Submit Button

File name: 04-gdpr-submit.png
Where to capture: Bottom of the form
What to show:

  • GDPR consent checkbox (unchecked state)
  • Privacy notice text
  • “Submit for Evaluation” button in blue
  • Note about optional fields
  • Clean view with good spacing

Annotations needed:

  • Red box #1 around the checkbox
  • Red box #2 around the Submit button
  • Arrow pointing to checkbox with label “Must check before submitting”

Screenshot 5: Progress Screen – Mixed States

File name: 05-progress-mixed-states.png
Where to capture: During evaluation processing
What to show:

  • Progress bar partially filled
  • Mix of agent states:
  • 2-3 showing “Complete” (green checkmark)
  • 1-2 showing “Processing” (spinner or animation)
  • 3-4 showing “Pending” (grey or waiting state)
  • “Processing Your Proposal” heading
  • Clean view of all agents

Annotations needed:

  • Red box around one “Complete” agent with label “Completed”
  • Red box around one “Processing” agent with label “Currently Processing”
  • Red box around one “Pending” agent with label “Waiting”

Note: This may require timing or video capture to get all three states in one shot. Alternatively, create three separate screenshots showing each state.

Priority 2: User Manual Screenshots

Screenshot 6: Full Interface Overview

File name: 06-full-interface.png
Where to capture: Main plugin page, logged in, before submission
What to show:

  • Complete view from top of page
  • Header with agents
  • Section navigation
  • At least 2-3 visible form fields
  • Shows the overall layout and structure

Annotations needed:

  • Numbered labels: “1. Header”, “2. Navigation”, “3. Form Fields”

Screenshot 7: Form Fields Example

File name: 07-form-fields-filled.png
Where to capture: Form section with content entered
What to show:

  • 3-4 form fields in the “Proposal Basics” section
  • At least one field with text entered (example content)
  • Field labels clearly visible
  • “(optional)” indicators visible
  • Field descriptions/placeholders visible

Annotations needed:

  • Red box around one field label
  • Red box around one field input area
  • Red box around one field description

Screenshot 8: Executive Summary Card

File name: 08-executive-summary.png
Where to capture: Results screen after evaluation
What to show:

  • “Executive Summary” heading
  • Summary content sections:
  • Overall Assessment
  • Consensus Points
  • Decision Conflicts
  • Critical Concerns
  • Key Recommendations
  • Action buttons (Copy, Download PDF)

Annotations needed:

  • Red boxes around the major sections
  • Labels for each section

Screenshot 9: Decision Overview Grid

File name: 09-decision-overview.png
Where to capture: Results screen, decision grid section
What to show:

  • Grid or list of all 8 agents
  • Each showing their decision (Approve, Approve with Modifications, etc.)
  • Agent icons/names
  • Color coding if present (green for approve, yellow for modifications, etc.)

Annotations needed:

  • Red box around one agent showing “Approve”
  • Red box around one agent showing “Approve with Modifications”
  • Labels explaining the color/visual indicators

Screenshot 10: Expanded Agent Evaluation

File name: 10-agent-evaluation-expanded.png
Where to capture: Results screen with one agent expanded
What to show:

  • One agent’s full evaluation expanded/open
  • Sections visible:
  • Decision and Rationale
  • Strengths
  • Concerns
  • Recommendations
  • Questions (if present)
  • Clear formatting of the detailed feedback

Annotations needed:

  • Red boxes around each major section
  • Optional: Number labels for the sections

Screenshot 11: Chat Panel Interface

File name: 11-chat-panel.png
Where to capture: Results screen with chat open
What to show:

  • Chat panel header “Advisory Chat”
  • Welcome message or example conversation
  • Chat input field at bottom
  • Send button
  • Minimize button
  • Clean, clear view of the chat interface

Annotations needed:

  • Red box around input field
  • Red box around send button
  • Arrow pointing to minimize button

Priority 3: Troubleshooting Guide Screenshots

Screenshot 12: Chrome Clear Browsing Data

File name: 12-chrome-clear-data.png
Where to capture: Chrome browser settings
How to capture:

  1. Open Chrome
  2. Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
  3. Capture the “Clear browsing data” dialog

What to show:

  • Time range dropdown set to “All time”
  • “Cookies and other site data” checkbox CHECKED
  • “Cached images and files” checkbox CHECKED
  • “Clear data” button
  • Basic/Advanced tabs if visible

Annotations needed:

  • Red box around time range dropdown
  • Red circles around the two checkboxes that should be checked
  • Red box around “Clear data” button

Screenshot 13: Firefox Clear Recent History

File name: 13-firefox-clear-history.png
Where to capture: Firefox browser
How to capture:

  1. Open Firefox
  2. Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac)
  3. Capture the “Clear Recent History” dialog

What to show:

  • Time range dropdown set to “Everything”
  • “Cookies” checkbox CHECKED
  • “Cache” checkbox CHECKED
  • “Clear Now” button

Annotations needed:

  • Red box around time range
  • Red circles around checkboxes
  • Red box around “Clear Now” button

Screenshot Capture Tools and Best Practices

Recommended Tools

Built-in OS Tools:

  • Windows: Windows + Shift + S (Snipping Tool)
  • Mac: Command + Shift + 4 (Screenshot tool)

Browser Extensions:

  • Full Page Screen Capture (Chrome/Firefox)
  • Nimbus Screenshot (Multi-browser)
  • Awesome Screenshot (Chrome/Firefox)

Annotation Tools:

  • Mac: Preview (built-in)
  • Windows: Paint or Snip & Sketch (built-in)
  • Cross-platform: GIMP (free), Snagit (paid), or online tools like Photopea

Screenshot Quality Standards

Resolution:

  • Minimum width: 1920px for full-screen captures
  • Minimum width: 1200px for partial captures
  • Keep aspect ratio natural

Format:

  • Save as PNG for UI screenshots (lossless, supports transparency)
  • Use JPG only if file size is a concern (use high quality setting)

Content:

  • Use realistic but generic example data
  • Avoid real sensitive information
  • Keep interface clean (close unnecessary tabs, notifications)
  • Use consistent browser theme/appearance across all screenshots

Annotation Guidelines

Colors:

  • Red boxes/arrows for highlighting (#ef4444 or similar)
  • Use 3-4px stroke weight for boxes
  • Use 2-3px stroke weight for arrows

Text Labels:

  • Sans-serif font (Arial, Helvetica)
  • Font size: 14-16pt
  • Color: Dark grey or black (#1f2937)
  • White background or semi-transparent white background for readability

Style:

  • Keep annotations minimal and clear
  • Use boxes for regions, arrows for specific elements
  • Number annotations when showing a sequence (1, 2, 3)

Creating the Screenshots

Option 1: Using Live Site (Recommended)

  1. Log in to the WordPress site using provided credentials
  2. Navigate through each screen needed
  3. Capture screenshots following the list above
  4. Annotate each screenshot as specified
  5. Save with the correct filename
  6. Organize in a /docs/images/ folder

Option 2: Using Test Environment

If you have a local development environment:

  1. Set up the plugin locally
  2. Create test data
  3. Follow the same capture process
  4. Ensure consistency with production appearance

Option 3: Mock Screenshots (If Live Access Not Available)

If live site access is limited:

  1. Capture what you can access
  2. Document missing screenshots in a list
  3. Use browser developer tools to simulate some states
  4. Note which screenshots need to be captured later

Integration into Documentation

Once screenshots are captured:

Step 1: Create Images Directory


docs/
  ├── images/
  │   ├── 01-login-required.png
  │   ├── 02-executive-header.png
  │   ├── ... (all other screenshots)

Step 2: Update HTML Files

Replace placeholder text like:


<div class="screenshot-placeholder">
    📸 Screenshot: Login required message on the evaluation page
</div>

With actual image markup:


<div class="screenshot">
    <img src="images/01-login-required.png" 
         alt="Login required message showing authentication prompt on the evaluation page" 
         style="max-width: 100%; border: 1px solid #e5e7eb; border-radius: 6px;">
    <p class="caption">Login required message on the evaluation page</p>
</div>

Step 3: Add CSS for Screenshots (if needed)

Add to the

Table of Contents
Privacy Policy Terms and Conditions Cookie Policy