Customer docs — screenshots needed
Every [SCREENSHOT: …] marker in the customer-facing documentation, with capture instructions and backlinks.
Capture against the production dashboard with realistic-looking sample data (not “Lorem ipsum”). For workflows, use a single representative finder and reuse it across captures so the docs feel coherent.
Overview
| Capture | Page |
|---|---|
| Side-by-side composite — left: dashboard with Finder Builder open and a configured finder in Live Preview. Right: a real-looking customer website with the same finder embedded inline below “Find a store near you.” | overview/what-is-dropafinder.md:42 |
Getting started
| Capture | Page |
|---|---|
| Sign-up form showing email + password fields with “Create account” button. Annotate field labels and ToS link. | getting-started/create-account.md:16 |
| Dashboard immediately after login, empty state visible, sidebar fully expanded. Annotate “Locations” and “Finders”. | getting-started/create-account.md:33 |
| Add Location form with address fields populated and autocomplete suggestions dropdown visible. | getting-started/create-account.md:49 |
| Finder Builder split view: left rail (Setup section selected), center configuration form, right rail Live Preview with one location showing. | getting-started/create-account.md:68 |
| Embed snippet modal with the script tag visible and “Copy” action highlighted. | getting-started/create-account.md:82 |
| Visitor-facing widget rendered on a plain HTML test page, showing search input, list of one location, and map with one marker. | getting-started/create-account.md:92 |
Features
| Capture | Page |
|---|---|
| Locations panel with several locations populated, search bar, action buttons, one row expanded to reveal custom fields and tags. | features/locations.md:29 |
| Bulk CSV import wizard at column-mapping step — source CSV columns on left, DropAFinder fields on right. | features/locations.md:30 |
| AI Import Batch creation form with CSV uploaded and “Generate” action visible. | features/ai-location-import.md:27 |
| Batch review page showing several AI-drafted locations with per-row approve/reject controls. | features/ai-location-import.md:28 |
| Process tray showing an active AI import job with progress percentage. | features/ai-location-import.md:29 |
| Improvement Batch review page with a recommendation card showing original vs. suggested values side-by-side. | features/ai-location-improvement.md:33 |
| Annotated full-screen capture of the Finder Builder. Mark the three regions, the section nav, and the Save / Discard / Undo controls. | features/finder-builder.md:20 |
| Look & Feel section nav expanded showing all six items with the active one (Theme) highlighted. | features/finder-builder.md:66 |
| Live Preview rail with the same finder shown twice — top half published version, bottom half preview-mode version with an unsaved color change. | features/finder-builder.md:102 |
| Theme page with a selected preset, summary card, WCAG status pill in the green “Passes” state. | features/theme-and-colors.md:27 |
| Change theme drawer open, showing 16 cards grouped by Light/Bold/Dark/Warm. | features/theme-and-colors.md:28 |
| Contrast report drawer open, showing one failing pair with “Reset to preset” action. | features/theme-and-colors.md:29 |
| Typography page with body=Inter, heading=Space Grotesk, base size at default, and type sample showing h1/h2/body/button. | features/typography.md:25 |
| Shape page with preset row visible, “Default” preset selected, per-element editor disclosed below. | features/shape.md:25 |
| Layout page showing all 9 tiles with the active selection highlighted. | features/layout.md:24 |
| Live Preview showing the same finder under two different layouts side-by-side. | features/layout.md:25 |
| Map Style page showing the provider grid with TomTom selected and “Standard” variant highlighted. | features/map-style.md:25 |
| Language & Copy page with language picker and a few overridden strings, original values shown as placeholders. | features/language-and-copy.md:25 |
| Refinements page in the builder with a refinement being dragged to reorder. | features/refinements.md:26 |
| Live Preview showing the visitor-facing refinement bar matching the configuration. | features/refinements.md:27 |
| Behavior page in the builder with each toggle group expanded. | features/behavior.md:26 |
| Global search opened with a partial query showing results grouped by resource type. | features/search.md:25 |
| Sidebar with the workspace switcher open, showing two workspaces with the active one indicated. | features/workspaces.md:28 |
Customization
| Capture | Page |
|---|---|
| Theme gallery showing all 16 cards arranged in their four groups, with the WCAG AA banner visible at the top. | customization/index.md:41 |
| Contrast report drawer open with two failing pairs visible, ratios shown, and “Reset to preset” action highlighted on one row. | customization/index.md:60 |
| Change theme drawer fully open showing all 16 cards with the AA banner at the top. | customization/themes.md:25 |
| 2x2 grid showing the same finder rendered under each of the four map providers in standard style. | customization/map-providers.md:27 |
Embedding
| Capture | Page |
|---|---|
Browser dev-tools view of a host page with the finder embedded, showing <div id="finder-app"> in the elements panel and the rendered widget. | embedding/index.md:21 |
| The Embed snippet modal in the dashboard with a key visible and “Copy” action highlighted. Annotate that the placeholder in the snippet is the same token shown in the modal. | embedding/script-tag.md:26 |
Counts
- Overview: 1
- Getting started: 6
- Features: 22
- Customization: 4
- Embedding: 2
- Total: 35 screenshots needed
Capture conventions
- Browser frame: capture without the URL bar to avoid distracting localhost / staging URLs.
- Sample data: use a single fictional brand throughout (suggestion:
Acme Coffee— same locations across all captures). - Highlight color: use a single accent color for annotations across all screenshots for visual consistency.
- Resolution: 2x density (Retina) — image source size of at least 1920px wide for full-screen captures.