engagement

Feedback Request Template

Ask customers for feedback or reviews

Preview

import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Link,
  Preview,
  Section,
  Text,
} from "@react-email/components";

type FeedbackRequestProps = {
  name: string;
  feedbackUrl: string;
  companyName: string;
};

export function FeedbackRequestEmail({
  name,
  feedbackUrl,
  companyName,
}: FeedbackRequestProps) {
  return (
    <Html>
      <Head />
      <Preview>How was your experience with {companyName}?</Preview>
      <Body style={main}>
        <Container style={container}>
          <Heading style={h1}>How are we doing?</Heading>
          <Text style={text}>Hi {name},</Text>
          <Text style={text}>
            We'd love to hear about your experience with {companyName}. Your
            feedback helps us improve!
          </Text>
          <Text style={textCenter}>How would you rate us?</Text>
          <Section style={emojiContainer}>
            <Link href={`${feedbackUrl}?rating=1`} style={emojiLink}>😞</Link>
            <Link href={`${feedbackUrl}?rating=2`} style={emojiLink}>😐</Link>
            <Link href={`${feedbackUrl}?rating=3`} style={emojiLink}>🙂</Link>
            <Link href={`${feedbackUrl}?rating=4`} style={emojiLink}>😊</Link>
            <Link href={`${feedbackUrl}?rating=5`} style={emojiLink}>🤩</Link>
          </Section>
          <Text style={muted}>Click an emoji to leave your feedback.</Text>
        </Container>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f6f9fc",
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
};

const container = {
  backgroundColor: "#ffffff",
  margin: "0 auto",
  padding: "40px 20px",
  maxWidth: "480px",
};

const h1 = {
  color: "#1f2937",
  fontSize: "24px",
  fontWeight: "600",
  margin: "0 0 20px",
};

const text = {
  color: "#374151",
  fontSize: "16px",
  lineHeight: "24px",
  margin: "0 0 16px",
};

const textCenter = {
  color: "#374151",
  fontSize: "18px",
  lineHeight: "24px",
  textAlign: "center" as const,
  margin: "24px 0 16px",
};

const emojiContainer = {
  textAlign: "center" as const,
  margin: "24px 0",
};

const emojiLink = {
  display: "inline-block",
  fontSize: "32px",
  textDecoration: "none",
  margin: "0 8px",
};

const muted = {
  color: "#6b7280",
  fontSize: "14px",
  lineHeight: "20px",
  textAlign: "center" as const,
};

Install: npm install @react-email/components

Template Variables

Pass these props to your email component:

Variable	Description
`name`	Customer's name
`feedbackUrl`	Link to feedback form
`companyName`	Your company name

Best Practices

Timing

•Send after key milestones (first purchase, 30 days active)
•Avoid immediately after negative experiences
•Don't over-ask—once per quarter max

Make It Easy

•One-click rating in email (NPS or emoji scale)
•Short form—3 questions max
•Mobile-friendly survey page

Follow Up

•Thank users who respond
•Act on negative feedback quickly
•Consider asking happy customers for public review

Ready to send emails?

Get started with 1,000 free emails per month.

Start for free