Skip to content

Brand outbound emails with ZapDesk UI styling + ZapDesk and KnowAll AI logos #361

@akash2017sky

Description

@akash2017sky

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

  • All four outbound email templates use the new branded header (ZapDesk logo)
  • All four outbound email templates use the new branded footer (KnowAll AI logo + link)
  • CTA button (`View Ticket #N`) matches the in-app primary button style
  • Logos rendered as `` with explicit width/height to avoid layout shift in slow-rendering clients
  • Logo URLs configurable via env vars with sensible defaults pointing at `${APP_URL}/email/...`
  • Email renders correctly in: Gmail web, Outlook desktop, Outlook web, Apple Mail
  • Works in dark-mode email clients (Outlook for Windows / Apple Mail dark mode) — logos visible against dark backgrounds

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

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions