​

Visual Content Plan: Videos & Screenshots

​

Current State

• 17 pages have visual content (videos and/or screenshots)
• 50 pages have zero visual content
• Airtable integration page is the gold standard — has a video + 6 annotated screenshots
• Quickstart guide has 6 screenshots showing the full setup flow
• Most feature pages, all use case pages, and the new PDF/eSign content have no visuals

​

Priority 1: Videos (High Impact)

​

Video 1: PDF Template Editor Walkthrough

1. Open an automation and click the template section
2. Show the toggle between “Google Docs” and “Existing PDF”
3. Select “Existing PDF”
4. Drag and drop a sample PDF (use a pre-designed invoice or certificate with clear empty fields)
5. Show the “X fields auto-detected” notification if the PDF has AcroForm fields
6. Click the edit button to open the placeholder editor
7. Pan the three-panel layout — left sidebar (field types), center (PDF viewer), right sidebar (properties)
8. Add a text placeholder — drag it from the sidebar onto a name field area on the PDF
9. Name it “customer_name” in the properties panel
10. Change the font to Roboto, size to 14, color to dark blue
11. Show the alignment dropdown (left/center/right)
12. Show the overflow dropdown — briefly explain “Shrink to fit” vs “Expand vertically”
13. Add an image placeholder — drag it onto a logo area
14. Add a checkbox placeholder
15. Add an e-signature field — show the “Add E-Sign Field” section in the left sidebar, add a signature field
16. Show multi-page — scroll down to page 2 and add a field there
17. Click Preview to show the live preview with sample data
18. Click Save
19. Brief voiceover: “The PDF itself is never modified — DocsAutomator overlays your data on top at generation time”

​

Video 2: E-Signature Setup & Signing Flow

1. Open a Google Doc template that has e-sign placeholders ({{esign.signature.1}}, {{esign.date.1}})
2. Go to the automation’s output settings
3. Enable “E-Signatures”
4. Configure Signer 1 — enter email field mapping, name field mapping
5. Add Signer 2 — show the “Add Signer” button
6. Show Signing Order toggle — explain “Sequential” vs “Parallel”
7. Show Email Configuration — subject, body with variables ({{signerName}}, {{documentName}}), button color
8. Show Reminder Settings — enable reminders, set frequency
9. Show Expiration Settings
10. Show Branding — upload a custom logo
11. Click Preview or generate a test document
12. Switch to the signer’s perspective — open the signing link in a new tab or incognito
13. Show the signing experience:
    • Review document
    • Click on signature field → draw or type signature
    • Date auto-fills
    • Fill in text field
    • Check the checkbox
    • Click “Complete Signing”
14. Show the completion screen with download option
15. Back in the app: show the signing session status changed to “completed”
16. Show the audit trail if visible

​

Video 3: Updated Platform Overview

1. Quick intro: “DocsAutomator turns your data into documents — PDFs, Google Docs, with optional e-signatures”
2. Show template choice: Google Docs (show a template with {{placeholders}}) AND PDF templates (show the visual editor briefly)
3. Show data source connection — pick Airtable, show base/table selection
4. Show field mapping — map a few fields
5. Show preview — generate a preview PDF
6. Show output settings — email, Drive, e-signatures
7. Show a generated document — the final PDF
8. Show the e-signing flow — 10 seconds showing a signer signing
9. End card: “Get started free at docsautomator.co”

​

Video 4: Quickstart — Full Setup in 5 Minutes

1. Log into the DocsAutomator dashboard
2. Click “New Automation”
3. Choose a data source (Airtable or Google Sheets)
4. Connect your account (show OAuth flow)
5. Google Doc path: Paste a template link, show Template Check
6. Brief PDF path: Show the toggle, upload a PDF, position 1-2 fields (keep this under 30 seconds — link to Video 1 for full details)
7. Select base/table
8. Map fields — show the field mapping interface
9. Generate a preview
10. Configure output settings (save PDF, send email)
11. Mention e-signatures as an option
12. Show the final generated document

​

Priority 2: Screenshots (Essential Pages)

​

Screenshots for: PDF Template Guide

​

Screenshots for: Google Doc Template Guide

​

Screenshots for: Quickstart Guide (supplement existing)

​

Screenshots for: E-Signature Pages

​

Screenshots for: Use Case Pages

​

Priority 3: Screenshots (Feature Pages)

​

Line Items

​

Conditional Content

​

AI Field Mapping

​

Output Settings

​

Other Feature Pages

​

Priority 4: Integration Page Videos

​

Screenshot Guidelines

​

Technical specs

• Resolution: Take at 2x (Retina) for crisp rendering, save at original size
• Format: PNG for UI screenshots, JPG for full-page captures (smaller file size)
• Browser: Use Chrome with a clean profile (no extensions in the toolbar)
• Window size: 1280px wide for full-page screenshots, crop for focused UI elements
• Dark mode: Use light mode for all screenshots (matches the docs theme)

​

Composition tips

• Crop tightly around the relevant UI — don’t include browser chrome or unrelated sidebar
• Highlight important elements with a subtle red/orange rectangle or arrow annotation (use Cleanshot X or similar)
• Use realistic data — “Acme Corp”, “INV-2025-001”, real-looking names and amounts. Avoid “test”, “asdf”, “foo”
• Consistent sample data across related screenshots — same invoice, same customer throughout a tutorial
• Show the happy path — all fields filled, no errors, clean state

​

Annotation style

• Red/orange rectangles for callouts (2px border, no fill)
• Numbered circles for step-by-step sequences
• Keep annotations minimal — the screenshot should mostly speak for itself

​

Video Guidelines

​

Technical specs

• Resolution: 1920x1080 minimum, 4K preferred
• Frame rate: 30fps
• Format: Upload to YouTube, embed with <Frame><iframe> in the docs
• Audio: Clear voiceover with no background music (or very subtle music)

​

Recording tips

• Clean browser — hide bookmarks bar, use a clean Chrome profile
• Zoom the UI to 125-150% so elements are clearly visible in the video
• Slow, deliberate mouse movements — don’t rush, viewers need to follow
• Pause briefly on important screens (2-3 seconds) before moving on
• Use realistic data — same guidelines as screenshots
• Record in one take if possible — cuts are fine but keep them smooth
• Add captions/subtitles on YouTube for accessibility

​

Voiceover script tips

• Narrate what you’re doing and WHY, not just clicking through
• Mention keyboard shortcuts when relevant (“I’ll press Cmd+Z to undo”)
• End with a clear call-to-action (“Check out the template guide for more details”)

​

File Structure

docs/images/
├── airtable/              (existing - 6 screenshots)
├── quickstart/            (existing - 7 screenshots, add 2 more)
├── pdf-template/          (new - 10 screenshots)
├── google-doc-template/   (new - 6 screenshots)
├── esign/                 (new - 8 screenshots)
├── use-cases/             (new - 12 screenshots)
├── line-items/            (new - 6 screenshots)
├── conditional/           (new - 5 screenshots)
├── ai-field-mapping/      (new - 2 screenshots)
├── output/                (new - 4 screenshots)
├── previews/              (new - 1 screenshot)
├── run-history/           (new - 2 screenshots)
├── folders/               (new - 1 screenshot)
├── team/                  (new - 1 screenshot)
└── workspaces/            (new - 1 screenshot)

​

Embedding Reference

​

Screenshot embed pattern

<Frame>
  <img src="/images/{section}/{filename}.png" alt="Descriptive alt text for accessibility" />
</Frame>

​

Video embed pattern

<Frame>
  <iframe
    width="100%"
    height="400"
    src="https://www.youtube.com/embed/{VIDEO_ID}"
    title="Video title"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</Frame>