canviq — Email Editor: Variables, Data Import & Send

MOCKUP
Scene 1 — Email Template Editor

Three-column editor with draggable variable palette, WYSIWYG email canvas, and live merge preview. Variables are grouped by domain and color-coded for scannability.

Variables

Contact
{{first_name}}{{last_name}}{{email}}{{company}}
Survey
{{survey_title}}{{survey_link}}{{survey_deadline}}
Product
{{product_name}}{{plan_name}}{{account_id}}
Custom
{{custom_1}} {{custom_2}}
Dragging:
{{survey_deadline}}

Live Preview

Show merged data

Hi Sarah,

We value your opinion as a Pro user! We have put together a short survey to help us improve Revoir...

Take the Survey →

Please respond by Feb 28, 2026

Recipient 1 of 847

Design Notes

1

Drag-and-drop variables. Variable pills are dragged from the palette and dropped inline into the email body. Drop indicator shows a blue dashed zone at the cursor position.

2

Color-coded groups. Contact (blue), Survey (coral), Product (purple), Custom (amber). Colors persist as inline chips in the email body for quick identification.

3

Live merge preview. Right panel shows actual recipient data merged into the template. Prev/Next arrows cycle through imported CSV rows.

4

White email canvas. The email body uses a white background to accurately simulate the rendered email appearance, contrasting with the dark admin UI.

Scene 2 — Data Import & Column Mapping

Upload CSV or Excel files, auto-map columns to template variables, and preview imported data before proceeding.

Import Recipients

📄

Drop CSV or Excel file here, or browse files

Supported: .csv, .xlsx, .xls

nps_recipients.csv
847 rows · 6 columns · 234 KB
✓ 4 of 6 columns auto-mapped
CSV ColumnMapped VariableSample Data
emailsarah@acme.com
first_nameSarah
last_nameChen
companyAcme Corp
planPro
signup_date2025-08-14
emailfirst_namelast_namecompanyplansignup_date
sarah@acme.comSarahChenAcme CorpPro2025-08-14
james@globex.ioJamesParkGlobexTeam2025-09-02
maria@inicio.mxMariaLopezInicioPro2025-07-21
tom@wilsonco.comTomWilsonWilson CoFree2025-11-05
aiko@sushi.jpAikoTanakaSushi LabsEnterprise2025-06-10
Showing 5 of 847 rows

Design Notes

1

Auto-mapping. Column names are fuzzy-matched to variable names. Exact matches (email, first_name) auto-map; ambiguous columns (plan, signup_date) require manual selection.

2

Sample data preview. First row values shown beside each mapping to help admins verify correct column assignment before import.

3

Supported formats. CSV, XLSX, and XLS. Client-side parsing with Papa Parse (CSV) and SheetJS (Excel). No server upload needed for preview.

4

Incremental state. Upload zone fades after successful upload. File info card shows row count, column count, and size for confirmation.

Scene 3 — Data Validation & Cleaning

Automated data quality checks identify errors and warnings. Admins can fix, skip, or batch-resolve issues before sending.

Validate Data

Total Records
847
Valid
831
Warnings
12
Errors
4
Row 23: Invalid email format: john@
Row 156: Missing required field: email
Row 342: Duplicate email: sarah@acme.com
Row 701: Invalid email format: bad-email
8 rows: Missing optional field: company
4 rows: Long first_name (>50 chars)
After resolution: 843 valid, 4 skipped

Design Notes

1

Error severity. Errors (red) block sending. Warnings (amber) are informational. Admins must resolve or skip all errors before continuing.

2

Duplicate handling. Offers "Keep first", "Keep last", or "Skip all" for duplicate emails. Deduplication uses case-insensitive email matching.

3

Batch actions. "Fix All Auto-fixable" handles simple cases (trim whitespace, truncate long values). Complex issues require manual review.

4

Error report. Downloadable CSV of all flagged rows for offline review and correction. Allows re-import after manual fixes.

Scene 4 — Review & Send

Final preview with merged recipient data, test email sending, and campaign configuration before launch.

Template Import Validate Review Send

Hi Sarah,

We value your opinion as a Pro user! We have put together a short survey to help us improve Revoir and we would love to hear your thoughts.

Your responses to Q1 NPS Survey will directly influence our product roadmap.

Take the Survey →

Please respond by February 28, 2026

Preview as:
Test Send
Test sent to beau@revoir.software ✓
Configuration
From nameCanviq Team
From emailsurveys@canviq.app
Reply-tosupport@canviq.app
Schedule
TimingSend now
Batching50 / batch, 30s delay
Compliance
Unsubscribe footerAuto-included ✓
GDPR-compliant unsubscribe link automatically appended to all outgoing emails.

Design Notes

1

Step indicator. 5-step flow (Template, Import, Validate, Review, Send). Completed steps green, current coral, upcoming muted.

2

Rendered preview. Full email with merged data from selected recipient. White background simulates inbox rendering. Includes footer with unsubscribe.

3

Test send. Send a test email to any address. Confirms delivery before committing to full send. Test emails include "[TEST]" prefix in subject.

4

Batch sending. Sends in configurable batches (default 50) with delay between batches to respect rate limits and improve deliverability.

Scene 5 — Send Dashboard & Analytics

Real-time campaign monitoring with delivery, open, and click tracking. Actionable follow-up controls for non-openers.

Q1 NPS Survey Distribution

Sending
643/847 · Started 2:34 PM · ETA 2:41 PM
643
Sent
631
Delivered
98.1%
412
Opened
65.3%
287
Clicked
45.5%
12
Bounced
1.9%
3
Unsub
0.5%

Opens & Clicks Over Time

0h
1h
2h
3h
4h
5h
6h
7h
8h
OpensClicks
RecipientEmailStatusOpenedClickedSurvey
Sarah Chensarah@acme.comDelivered ✓2:36 PM2:37 PM
James Parkjames@globex.ioDelivered ✓2:41 PM
Maria Lopezmaria@inicio.mxDelivered ✓
Tom Wilsontom@wilsonco.comBounced ✗
Aiko Tanakaaiko@sushi.jpDelivered ✓2:45 PM2:46 PM
Raj Patelraj@techcorp.inPending...

Design Notes

1

Real-time progress. Campaign status updates via Supabase Realtime. Progress bar and counters reflect live sending state. Animated dot indicates active send.

2

Engagement funnel. Metrics flow left-to-right: Sent, Delivered, Opened, Clicked, Bounced, Unsubscribed. Percentages relative to Sent count.

3

CSS-only chart. Bar heights set via inline styles. No JS charting library needed. Opens (blue) and Clicks (coral) per hour since send.

4

Follow-up actions. "Resend to non-openers" creates a new campaign targeting recipients who did not open within 48 hours. Prevents survey fatigue.