Graphics & Images Placeholder List

📋 Running List of Graphics/Images Needed

This document tracks all locations where placeholder graphics have been added and need to be replaced with actual images before production deployment.

---

Placeholder Locations

1. Channels Overview Page

Location: /docs/getting-started/channels/index.md (Line ~16-28) Description: Main channels overview banner image Placeholder Code:

<div style={{
  width: '100%',
  height: '400px',
  backgroundColor: '#f8f9fa',
  border: '2px dashed #dee2e6',
  borderRadius: '8px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '24px',
  color: '#6c757d',
  marginBottom: '30px'
}}>
  📞 Channels Overview Image<br/>
  <small>(Coming Soon)</small>
</div>

Suggested Image: Overview diagram showing all 6 channels converging into unified desktop

---

2. Web Chat Channel Page

Location: /docs/getting-started/channels/web-chat.md (Line ~15-27) Description: Web chat interface demonstration Placeholder Code:

<div style={{
  width: '100%',
  height: '400px',
  backgroundColor: '#f8f9fa',
  border: '2px dashed #dee2e6',
  borderRadius: '8px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '24px',
  color: '#6c757d',
  marginBottom: '30px'
}}>
  💬 Web Chat Interface Demo<br/>
  <small>(Coming Soon)</small>
</div>

Suggested Image: Screenshot of actual web chat widget in action

---

3. Roles & Permissions - CRM Integration Flow

Location: /docs/getting-started/roles-permissions.md (Line ~189-201) Description: CRM integration flow diagram Placeholder Code:

<div style={{
  width: '100%',
  height: '300px',
  backgroundColor: '#f8f9fa',
  border: '2px dashed #dee2e6',
  borderRadius: '8px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '18px',
  color: '#6c757d',
  marginBottom: '20px'
}}>
  📊 CRM Integration Flow Diagram<br/>
  <small>(Coming Soon)</small>
</div>

Suggested Image: Flow diagram showing data collection → external lookup → task context → agent display

---

Additional Graphics Opportunities (Not Yet Placeholders)

Pages That Would Benefit from Graphics:

1. System Requirements Page

   • Network architecture diagram
   • Browser compatibility matrix visual
   • Bandwidth requirements infographic

2. Voice Channel Page

   • Call flow diagram
   • Agent interface screenshot
   • Call controls visual guide

3. Email Channel Page

   • Email routing workflow
   • Template management interface
   • Threading visualization

4. SMS/Text Channel Page

   • Two-way messaging interface
   • MMS capabilities demonstration
   • Template examples

5. Fax Channel Page

   • Digital fax workflow
   • Fax viewer interface
   • Integration points diagram

6. Social Media Channel Page

   • Multi-platform dashboard mockup
   • Unified inbox screenshot
   • Platform integration status chart

7. Unified Channel Manager Page

   • Agent workspace screenshot
   • Supervisor dashboard view
   • Admin configuration interface
   • Channel switching workflow

8. Feature Overview Page

   • Feature lifecycle diagram (Production → Beta → Experimental → Roadmap)
   • Connect, Engage, Deliver framework visual
   • Feature availability matrix

---

Image Format Requirements

When creating graphics, please ensure:

• Format: PNG or SVG preferred (JPG for photos only)
• Resolution: 2x for retina displays (e.g., 1600px wide for 800px display width)
• File Size: Optimize for web (under 500KB per image ideally)
• Accessibility: Include descriptive alt text for all images
• Naming Convention: [page-name]-[description]-[version].png
  • Example: channels-overview-unified-desktop-v1.png

---

Priority Levels

🔴 High Priority (User-facing, key concepts)

1. Channels Overview banner
2. Web Chat interface demo
3. Unified Channel Manager workspace

🟡 Medium Priority (Enhances understanding)

1. CRM Integration flow diagram
2. Voice call flow diagram
3. System architecture diagram

🟢 Nice to Have (Polish and professionalism)

1. Channel-specific interface screenshots
2. Feature availability matrix
3. Browser compatibility visuals

---

Notes for Graphics Creation

• Brand Colors: Use Connie brand colors (need brand guide)
• Style: Clean, modern, professional suitable for nonprofit sector
• Consistency: Maintain consistent visual language across all graphics
• Annotations: Include helpful callouts and labels where appropriate
• Responsive: Consider mobile viewing when designing

---

Tracking Status

Location	Description	Priority	Status	Assigned To	Notes
Channels Overview	Banner image	High	Placeholder	TBD	Need unified desktop mockup
Web Chat	Interface demo	High	Placeholder	TBD	Use actual widget screenshot
Roles & Permissions	CRM flow	Medium	Placeholder	TBD	Create flow diagram

---

Last Updated: August 2025 Maintained by: Chief Documentation Officer (CDO)