social-proof-widgets

name	social-proof-widgets
description	Pull live reviews from Google Places API (and other platforms) and embed them as responsive sliders/carousels in Next.js landing pages with Google branding. Use when the user asks to add reviews, testimonials, or social proof sections to a site.

Social Proof Widgets

Pull live third-party reviews and embed them as branded, responsive carousels on landing pages.

Trigger Conditions

• User asks to add Google reviews, Trustpilot reviews, Facebook reviews to a website
• User wants a "What Clients Say" or testimonials section with live data
• User wants to integrate review platform data into a Next.js/React landing page

Workflow

1. Fetch Reviews from Google Places API

# Step 1: Find the Place ID
curl -s "https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=<business name> <city>&inputtype=textquery&fields=place_id,name,rating&key=<API_KEY>"

# Step 2: Pull reviews (max 5 returned by API)
curl -s "https://maps.googleapis.com/maps/api/place/details/json?place_id=<ID>&fields=name,rating,user_ratings_total,reviews&key=<API_KEY>&language=en&reviews_sort=newest"

2. Maximize Review Count

The Google Places API hard-limits to 5 reviews per call. Multi-language calls return the same reviews translated — do not count them as unique. The only way to get more is:

• Scraping via the Google Maps web UI (often blocked by bot detection)
• Third-party services like Outscraper or SerpApi
• Accept the 5-review limit and supplement with the total count badge ("59 Google reviews")

For most landing pages, 4-5 quality reviews in a slider + the total count badge is sufficient social proof.

3. Build the Slider Component

See references/responsive-slider-pattern.md for the full component template.

Key architectural decisions:

• Client component ('use client') for motion/interactivity
• Framer Motion for card transitions (initial/animate/exit)
• Auto-advance via useEffect + setInterval (pause on hover via state)
• Manual prev/next buttons + dot indicators
• Google brand badge: Inline SVG G-logo + star row + count pill
• Profile pictures from Google photos array (use unoptimized to avoid Next.js image limits)
• External link to full Google Maps review page via CID

4. Mobile Optimization

Apply the standard responsive cascade on ALL elements:

mobile:  base classes (text-xs, p-5, w-8, h-8, round-2xl)
tablet+: md: prefix   (md:text-sm, md:p-10, md:w-10, md:h-10, md:rounded-3xl)
desktop: lg: prefix   (when needed)

Every visual element scales: badge size, star size, card padding, arrow buttons, profile photo, section padding, heading font size.

5. Deploy

Push to GitHub → Vercel auto-deploys. Verify at preview URL. Test at 375px, 768px, and 1440px.

Pitfalls

• API returns only 5 reviews: The Google Places API does not support pagination for reviews. Multi-language calls (language=nl, language=de) return the same 5 reviews translated — filter by unique text to avoid duplicates.
• Google Maps scraping blocks: Headless browsers navigating to google.com/maps often get empty pages or captchas. The Places API is the reliable path.
• git reset --soft with --no-verify: When cherry-picking specific changes, a soft reset stages EVERYTHING from the remote HEAD. Untracked imported files (like MetaEvents.tsx) get left behind, causing build failures. Use git cherry-pick for surgical commits or double-check git status for missing imports.
• Profile photo URLs: Google's profile_photo_url returns Google CDN URLs. Set unoptimized={true} on Next.js Image to avoid domain allowlist issues.===ME:social-proof-widgets