Review Embed

Third-party reviews rendered on the site (e.g. Google reviews).

html

<div class="review review--Google">
  <div class="review__head">
    <span class="review__mark">Google</span>
    <span class="review__stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
  </div>
  <p class="review__text">&ldquo;Switched from a competitor and never looked back. Support alone is worth it.&rdquo;</p>
  <p class="review__meta"><strong>Alex Rivera</strong> &middot; 482 reviews on Google</p>
</div>
<style>
.review { font: 15px system-ui, sans-serif; color: #241430; max-width: 320px; padding: 20px; border-radius: 14px; border: 1px solid #24143022; background: #FAF7F2; }
.review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.review__mark { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; color: #FAF7F2; }
.review--Google .review__mark { background: #4285F4; }
.review--Trustpilot .review__mark { background: #00B67A; }
.review--Facebook .review__mark { background: #1877F2; }
.review__stars { color: #E8A020; letter-spacing: 2px; }
.review__text { margin: 0 0 12px; color: #241430dd; }
.review__meta { margin: 0; font-size: 13px; color: #241430aa; }
</style>

tailwind

<div class="review-tw review-tw--Google font-sans text-[15px] text-[#241430] max-w-[320px] p-5 rounded-2xl border border-[#24143022] bg-[#FAF7F2]">
  <div class="flex items-center justify-between mb-2.5">
    <span class="review-tw__mark font-extrabold text-[13px] uppercase tracking-wide px-2.5 py-0.5 rounded-md text-[#FAF7F2]">Google</span>
    <span class="text-[#E8A020] tracking-widest" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
  </div>
  <p class="m-0 mb-3 text-[#241430]/85">&ldquo;Switched from a competitor and never looked back. Support alone is worth it.&rdquo;</p>
  <p class="m-0 text-[13px] text-[#241430]/65"><strong>Alex Rivera</strong> &middot; 482 reviews on Google</p>
</div>
<style>
.review-tw--Google .review-tw__mark { background: #4285F4; }
.review-tw--Trustpilot .review-tw__mark { background: #00B67A; }
.review-tw--Facebook .review-tw__mark { background: #1877F2; }
</style>

react

export function ReviewEmbed({
  platform = "Google",
  reviewerName = "Alex Rivera",
  reviewText = "Switched from a competitor and never looked back. Support alone is worth it.",
  reviewCount = 482,
}) {
  const markColor = { Google: "#4285F4", Trustpilot: "#00B67A", Facebook: "#1877F2" }[platform] ?? "#4285F4";
  return (
    <div style={{ font: "15px system-ui, sans-serif", color: "#241430", maxWidth: 320, padding: 20, borderRadius: 14,
      border: "1px solid #24143022", background: "#FAF7F2" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <span style={{ fontWeight: 800, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.04em",
          padding: "3px 9px", borderRadius: 6, color: "#FAF7F2", background: markColor }}>{platform}</span>
        <span aria-label="5 out of 5 stars" style={{ color: "#E8A020", letterSpacing: 2 }}>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
      </div>
      <p style={{ margin: "0 0 12px", color: "#241430dd" }}>&ldquo;{reviewText}&rdquo;</p>
      <p style={{ margin: 0, fontSize: 13, color: "#241430aa" }}><strong>{reviewerName}</strong> &middot; {reviewCount} reviews on {platform}</p>
    </div>
  );
}