14 SaaS Product Emails — Sonar / Feedback
Free React Email NPS Survey Template
The whole survey inside the email — eleven tappable cells and one promised follow-up. Customize it in the free React Email playground and export production-ready TSX — no sign-up.
- Sample subject
- One question: how likely are you to recommend Sonar?
- Format
- React Email TSX · Free
Template details
What this nps survey template includes
The whole survey inside the email — eleven tappable cells and one promised follow-up. Customize it in the free React Email playground and export production-ready TSX — no sign-up. The source is standard TypeScript and React Email, so it can be sent with Resend or rendered to HTML for another email provider.
- Production-ready feedback email structure
- Editable in the visual React Email playground
- Free TSX source for personal and commercial projects
How to use it
- 1. Customize the copy and styles in the playground above.
- 2. Export or copy the typed TSX source.
- 3. Pass dynamic props and send it from a server route with your email provider.
React Email TSX source
Free for personal, commercial, and client projects under the site license.
View full source code
import * as React from 'react';
import {
Band,
Brand,
Display,
EmailLayout,
Kicker,
Lead,
Note,
Scale,
} from './components';
export interface FeedbackNpsEmailProps {
brand?: Brand;
subject?: string;
preview?: string;
label?: string;
kicker?: string;
headline?: React.ReactNode;
lead?: React.ReactNode;
/** Deep-link each score to a prefilled response. */
href?: (score: number) => string;
note?: React.ReactNode;
}
/**
* NPS — the whole survey is in the email. Eleven tappable cells, one follow-up
* promised, and no research panel in between.
*/
export function FeedbackNpsEmail({
brand,
subject = 'One question: how likely are you to recommend Sonar?',
preview = 'A single tap — 0 to 10. It goes straight to the product team.',
label = 'Feedback',
kicker = 'One question, one tap',
headline = (
<>
WOULD YOU
<br />
RECOMMEND
<br />
SONAR?
</>
),
lead = '0 means never, 10 means you already have. Answers go straight to the four people who build this — no research panel in between.',
href = (score) => `https://sonar.example.com/nps?s=${score}`,
note = 'Takes one click. If you pick something under 7, we’ll ask exactly one follow-up — and we do read every word.',
}: FeedbackNpsEmailProps = {}) {
return (
<EmailLayout
brand={brand}
subject={subject}
preview={preview}
label={label}
accent="mint"
>
<Band padding="48px 32px 0 32px">
<Kicker>{kicker}</Kicker>
<Display size={44}>{headline}</Display>
<Lead>{lead}</Lead>
</Band>
<Band padding="28px 32px 42px 32px">
<Scale href={href} margin="0" />
<Note>{note}</Note>
</Band>
</EmailLayout>
);
}
export default FeedbackNpsEmail;
Related templates
More from 14 SaaS Product Emails — Sonar.
