Problem
Outbound emails (ticket confirmation, agent reply, status change, test) currently use a generic styled card with a text-only header (`⚡ ZapDesk`) and footer (`Powered by ZapDesk`). They don't visually match the ZapDesk UI and don't carry the KnowAll AI brand mark, so to a customer they look more "system notification" than "branded support communication".
Expected
All outbound templates should pick up the same visual language as the ZapDesk web UI and include both logos.
Header:
- ZapDesk logo (image, not text) at top
- Same green primary color as the UI (`--primary` = `#22c55e`)
- Match the dark / light treatment used in the in-app header
Footer:
- KnowAll AI logo + "Powered by KnowAll AI" line, linking to https://knowall.ai
- Existing "Please reply to this email to update your ticket" guidance kept
Typography & spacing:
- Same font stack the UI uses (`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto` — already present)
- Same border radii, padding rhythm, and CTA button styling as the UI's primary button
Logos:
- Hosted as static assets under `public/email/` (e.g. `zapdesk-logo.png`, `knowall-logo.png`) so emails can reference absolute URLs (`${APP_URL}/email/zapdesk-logo.png`)
- PNG with transparent background, ~2x retina (e.g. 240×60 source rendered at 120×30)
- Include both logo URLs as configurable env vars (`ZAPDESK_LOGO_URL`, `KNOWALL_LOGO_URL`) so a deployment can override with externally-hosted assets if outbound mail can't reach the local server
Templates affected:
- `ticketConfirmationTemplate`
- `agentReplyTemplate` (also when history is included)
- `statusChangeTemplate`
- The test-email template in `sendTestEmail`
Current Behaviour
See `src/lib/email-templates.ts` — single `layoutWrapper` produces a header that's just `
⚡ ${APP_NAME}
` and a footer that's a single `Powered by ZapDesk` line.
Acceptance Criteria
Out of Scope
- Per-tenant white-labelling (different brand per client) — separate follow-up
- Inline images / embedded MIME parts — using hosted URLs is simpler and good enough for v1
Related
Problem
Outbound emails (ticket confirmation, agent reply, status change, test) currently use a generic styled card with a text-only header (`⚡ ZapDesk`) and footer (`Powered by ZapDesk`). They don't visually match the ZapDesk UI and don't carry the KnowAll AI brand mark, so to a customer they look more "system notification" than "branded support communication".
Expected
All outbound templates should pick up the same visual language as the ZapDesk web UI and include both logos.
Header:
Footer:
Typography & spacing:
Logos:
Templates affected:
Current Behaviour
See `src/lib/email-templates.ts` — single `layoutWrapper` produces a header that's just `
⚡ ${APP_NAME}
` and a footer that's a single `Powered by ZapDesk` line.Acceptance Criteria
Out of Scope
Related