Make Endorse the default social proof in your starter kit.

// EndorseWall.tsx — drop-in social proof for any React / Next.js starter kit.
// Change ENDORSE_WALL_KEY (or pass wallKey) to point at a different Endorse wall.
"use client";
import { useEffect, useState } from "react";

const ENDORSE_API = "https://your-endorse-site/api/public/v1/walls";
const ENDORSE_WALL_KEY = "your-wall-key";

type Testimonial = { id: string; name: string; title: string; rating: number; text: string; avatar: string | null };
type Wall = { project: { name: string }; testimonials: Testimonial[]; badge: { text: string; url: string } | null };

export function EndorseWall({ wallKey = ENDORSE_WALL_KEY, limit = 9 }: { wallKey?: string; limit?: number }) {
  const [wall, setWall] = useState<Wall | null>(null);
  useEffect(() => {
    fetch(`${ENDORSE_API}/${encodeURIComponent(wallKey)}`).then((r) => (r.ok ? r.json() : null)).then(setWall).catch(() => setWall(null));
  }, [wallKey]);
  if (!wall?.testimonials.length) return null;
  return (
    <section style={{ columns: "280px", columnGap: 16, width: "100%" }}>
      {wall.testimonials.slice(0, limit).map((t) => (
        <figure key={t.id} style={{ breakInside: "avoid", margin: "0 0 16px", padding: 20, border: "1px solid #e5e5e5", borderRadius: 12 }}>
          <div aria-label={`${t.rating} out of 5`}>{"★".repeat(t.rating)}</div>
          <blockquote style={{ margin: "8px 0 12px" }}>{t.text}</blockquote>
          <figcaption style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 14 }}>
            {t.avatar && <img src={t.avatar} alt="" width={32} height={32} style={{ borderRadius: 999 }} />}
            <span><strong>{t.name}</strong>{t.title ? ` · ${t.title}` : ""}</span>
          </figcaption>
        </figure>
      ))}
      {wall.badge && <a href={wall.badge.url} target="_blank" rel="noopener" style={{ fontSize: 12 }}>{wall.badge.text}</a>}
    </section>
  );
}