> ## Documentation Index
> Fetch the complete documentation index at: https://docs.funeli.top/llms.txt
> Use this file to discover all available pages before exploring further.

# Components: social proof

> Reference for the Funeli social proof components: what each one is for, every setting with its type and default, and a working example.

Micro-rewards between questions and trust on the paywall. Add these components to a step in the editor and change their settings in the inspector, or ask an agent to; the settings below are the same in both.

## Stat highlight

Type `StatHighlight`. Spotlights a key number. Large primary-colour value with a caption, centred; a micro-reward between questions. Value is literal text (no placeholders). Static.

| Setting | Type | Required | Description |
| - | - | - | - |
| `value` | string | yes | Big number as literal text, \<=16 chars, e.g. "87%" or "2M+"; placeholders are not resolved here |
| `caption` | string | yes | What the number means, keep \<=90 chars (wraps within \~288px) |
| `icon` | "activity" \| "alarm" \| "apple" \| "award" \| "baby" \| "battery" \| "bed" \| "bike" \| "brain" \| "calendar" \| "check" \| "chart" \| "clock" \| "coffee" \| "dumbbell" \| "flame" \| "flower" \| "footprints" \| "gift" \| "heart" \| "leaf" \| "lightning" \| "lock" \| "moon" \| "mountain" \| "music" \| "person" \| "ruler" \| "salad" \| "scale" \| "shield" \| "smile" \| "sparkles" \| "star" \| "sun" \| "target" \| "thumbs-up" \| "timer" \| "trophy" \| "upload" \| "users" \| "water" \| "yoga" \| "x" \| "zap" \| "heart-pulse" \| "stethoscope" \| "pill" \| "syringe" \| "thermometer" \| "weight" \| "hand-heart" \| "eye" \| "ear" \| "bone" \| "carrot" \| "cherry" \| "cookie" \| "pizza" \| "sandwich" \| "egg" \| "fish" \| "beef" \| "wheat" \| "cup-soda" \| "wine" \| "candy" \| "soup" \| "milk" \| "waves" \| "medal" \| "flag" \| "goal" \| "bed-double" \| "cloud-moon" \| "sunrise" \| "sunset" \| "wind" \| "feather" \| "brain-circuit" \| "book-open" \| "headphones" \| "glasses" \| "home" \| "briefcase" \| "car" \| "plane" \| "map-pin" \| "globe" \| "dog" \| "cat" \| "shopping-bag" \| "wallet" \| "credit-card" \| "piggy-bank" \| "gamepad" \| "tv" \| "smartphone" \| "laptop" \| "camera" \| "palette" \| "graduation-cap" \| "smile-plus" \| "frown" \| "meh" \| "laugh" \| "angry" \| "heart-crack" \| "party-popper" \| "check-circle" \| "x-circle" \| "alert-triangle" \| "info" \| "help-circle" \| "plus" \| "minus" \| "arrow-right" \| "trending-up" \| "trending-down" \| "bar-chart" \| "pie-chart" \| "percent" \| "tag" \| "badge-check" \| "crown" \| "gem" \| "rocket" \| "key" \| "bell" \| "mail" \| "phone" \| "message-circle" \| "search" \| "settings" \| "sliders" \| "refresh" \| "infinity" \| "hourglass" \| "calendar-check" \| "list-checks" \| "clipboard" \| "file-text" \| "lightbulb" \| "puzzle" \| "magnet" \| "anchor" \| "user-check" \| "user-plus" \| "users-round" \| "handshake" \| "thumbs-down" \| "star-half" | no | Icon above the number |

> [accordion] Example
>
> ```json theme={null}
> {
>   "value": "87%",
>   "caption": "of users like you saw results in the first month"
> }
> ```

## Stats row

Type `StatsRow`. A row of small live-feeling stats. 2-4 equal columns (value, caption, optional icon); live jitter/grow animate client-side only (first paint is exact; off under reduced motion). Values are literal and display-only: keep them truthful.

| Setting | Type | Required | Description |
| - | - | - | - |
| `items` | object\[] | yes | 2-4 stats side by side, equal width |
| `dividers` | boolean | no | Thin inset divider between items Default: `true`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "items": [
>     {
>       "value": "1.2B",
>       "caption": "Records",
>       "icon": "file-text"
>     },
>     {
>       "value": "265",
>       "caption": "Online",
>       "icon": "users",
>       "live": "jitter"
>     },
>     {
>       "value": "94%",
>       "caption": "Matched",
>       "icon": "target"
>     },
>     {
>       "value": "1,686",
>       "caption": "Today",
>       "icon": "search",
>       "live": "grow"
>     }
>   ]
> }
> ```

## User counter

Type `UserCounter`. An avatar stack with a live-feeling count. Sentence with \{\{count}} beside overlapping portraits (decorative); count is static, live only adds a pulsing dot. Layouts card, inline, stacked. Keep claims truthful.

| Setting | Type | Required | Description |
| - | - | - | - |
| `text` | string | no | Sentence containing \{\{count}}, which is replaced by the formatted count; keep \<=60 chars Default: `"Over {{count}} people started today"`. |
| `count` | integer | no | Number shown for \{\{count}} and the +N bubble. Static, so set a truthful figure; it does not update Default: `8165`. |
| `countFormat` | "full" \| "compact" | no | full: "8,165". compact: "8.2k" Default: `"full"`. |
| `avatars` | integer | no | How many built-in portraits in the overlapping stack, 2-6; ignored when images is set Default: `5`. |
| `photoSet` | "women" \| "men" \| "mixed" | no | Built-in portrait pool: women, men or mixed (alternates); ignored when images is set Default: `"mixed"`. |
| `images` | string\[] | no | Custom avatar URLs (\<=6, square) replacing the built-in portraits; decorative |
| `showOverflow` | boolean | no | Adds a "+N" bubble (compact count, e.g. "+8.2k") as the last avatar Default: `true`. |
| `layout` | "card" \| "inline" \| "stacked" | no | card: filled surface. inline: no surface, sits on the page background. stacked: avatars centred above the text Default: `"card"`. |
| `avatarsPosition` | "start" \| "end" | no | Avatar stack before (start) or after (end) the text; ignored when layout is stacked Default: `"end"`. |
| `live` | boolean | no | Adds a pulsing green dot before the text, e.g. for "people searching right now" (static under reduced motion) Default: `false`. |
| `badge` | object | no | Optional pill centred above the counter, e.g. "LIVE" |

> [accordion] Example
>
> ```json theme={null}
> {
>   "text": "Over {{count}} people started today",
>   "count": 8165,
>   "countFormat": "full",
>   "avatars": 5,
>   "photoSet": "mixed",
>   "showOverflow": true,
>   "layout": "card",
>   "avatarsPosition": "end",
>   "badge": {
>     "text": "POPULAR",
>     "tone": "primary",
>     "style": "soft"
>   }
> }
> ```

## Marquee

Type `Marquee`. A looping row of social-proof chips, trust badges, or short prompts. 2-12 labels scroll continuously (static row under reduced motion, pauses on hover/press); only part is visible at once, so never hide essential info here. Writes no answer.

| Setting | Type | Required | Description |
| - | - | - | - |
| `items` | string \| object\[] | yes | 2-12 short labels that repeat in a seamless scrolling row (the copy used for the loop is hidden from screen readers). Plain strings are enough; objects can add an icon |
| `variant` | "chips" \| "badges" \| "text" | no | chips: pill tags like intent/search terms. badges: compact trust claims, best with icons. text: quiet separated words, e.g. press names Default: `"chips"`. |
| `tone` | "neutral" \| "primary" \| "success" \| "accent" | no | Colour role of chips and icons: neutral grey, primary brand, success green, accent pink Default: `"neutral"`. |
| `speedSeconds` | integer | no | Seconds for one full loop, 8-80; higher is slower. Use more seconds the more items you have Default: `30`. |
| `direction` | "left" \| "right" | no | Scroll direction; left reads naturally, right suits a second stacked row Default: `"left"`. |
| `fadeEdges` | boolean | no | Soft fade masks at the left and right edges Default: `true`. |
| `pauseOnHover` | boolean | no | Pause the loop while the row is hovered or pressed Default: `true`. |
| `secondRow` | object | no | Add a second scrolling row with its own items, speed and direction |
| `chipStyle` | object | no | Chip look from tokens: fill, border, shadow, glow, text colour (chips and badges variants) |

> [accordion] Example
>
> ```json theme={null}
> {
>   "items": [
>     "Find hidden dating profiles",
>     "See where your photos are",
>     "Catfish check",
>     "Social media finder",
>     "Reverse face search",
>     "Verify who they really are"
>   ],
>   "variant": "chips",
>   "tone": "neutral",
>   "fadeEdges": true
> }
> ```

## Testimonial

Type `Testimonial`. Shares a review or swipeable gallery. One card (name, stars, quote, optional result chip) or, with items (2-6), a looping gallery with dots; initials appear when no avatar or photoSet. photoSet picks built-in portraits, avatar is a custom URL override. Use genuine reviews.

| Setting | Type | Required | Description |
| - | - | - | - |
| `name` | string | yes | Reviewer display name, e.g. "Jessica, 34" (truncates on one line); literal. Also the source of the fallback initials |
| `text` | string | yes | The quote, keep \<=180 chars; in a gallery keep all reviews a similar length so slides do not jump |
| `rating` | integer | no | Whole stars, 1-5 Default: `5`. |
| `meta` | string | no | Result chip above the quote, aim \<=30 chars, e.g. "Lost 6 kg in 5 weeks"; literal |
| `avatar` | string | no | Custom square avatar URL; overrides photoSet. If both are omitted, initials are shown. Decorative (no alt) |
| `photoSet` | "women" \| "men" \| "mixed" | no | Built-in portrait pool: women, men or mixed (alternates). In a gallery set it on each review; portraits rotate without repeats; avatar overrides it |
| `items` | object\[] | no | 2-6 reviews shown as a swipeable, looping gallery with dots (replaces the single review above, whose fields stay as the fallback). Omit for one static review |
| `autoplaySeconds` | integer | no | Seconds between reviews in the gallery, 1-20; 0 = swipe only; ignored unless items is set Default: `4`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "name": "Jessica, 34",
>   "text": "I finally found something I can stick with. 15 minutes and I feel amazing.",
>   "meta": "Lost 6 kg in 5 weeks",
>   "photoSet": "women"
> }
> ```

## Review summary

Type `ReviewSummary`. Shows rating and review count. Stars (fractional fill) plus count in four layouts; rating, count and source are literal display values, so set truthful ones. Static.

| Setting | Type | Required | Description |
| - | - | - | - |
| `rating` | number | no | Average rating, 1-5 with one decimal (3.8 fills 80% of the fourth star); display only, set a truthful figure Default: `4.8`. |
| `count` | string | yes | Number of ratings as literal text, e.g. "12,500+" |
| `label` | string | no | Noun after the count, e.g. "ratings" or "reviews"; literal Default: `"ratings"`. |
| `verdict` | string | no | Word before the stars in the inline layout, e.g. "Great" or "Excellent"; ignored by other layouts |
| `layout` | "card" \| "inline" \| "stacked" \| "compact" | no | card: filled surface with a big number beside the stars. inline: one wrapping line, "Great ★★★★☆ 3.8 based on 44,578 reviews". stacked: big number over stars over caption, centred. compact: just the stars and the number Default: `"card"`. |
| `showNumber` | boolean | no | Show the rating as one decimal (4.8); applies to card and compact, always shown in inline and stacked Default: `true`. |
| `countPrefix` | string | no | Text before the count, e.g. "based on"; used by inline, stacked and card |
| `source` | "none" \| "appstore" \| "googleplay" \| "trustpilot" | no | Small store mark beside the rating; only set it if the rating really comes from that store Default: `"none"`. |
| `laurels` | boolean | no | Wreath around the number (card and stacked layouts), like an "App of the Day" badge Default: `false`. |
| `size` | "sm" \| "md" \| "lg" | no | Scale of stars and number: sm 12px stars, md 16px, lg 20px Default: `"md"`. |
| `align` | "left" \| "center" | no | Horizontal alignment of the card, inline and compact layouts; stacked is always centred Default: `"center"`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "rating": 4.8,
>   "count": "12,500+",
>   "label": "ratings",
>   "countPrefix": "based on",
>   "layout": "card",
>   "source": "appstore",
>   "laurels": true,
>   "size": "lg",
>   "align": "center"
> }
> ```

## Before / after

Type `BeforeAfter`. Compares results side by side. Two columns (red before, green after) of 1-5 labelled bars, 0-100 fill; each bar is read as 'label: N%'; still say the improvement in the label. Static.

| Setting | Type | Required | Description |
| - | - | - | - |
| `beforeLabel` | string | no | Heading of the left (red) column, keep \<=12 chars; placeholders ok Default: `"Now"`. |
| `afterLabel` | string | no | Heading of the right (green) column, keep \<=12 chars; placeholders ok Default: `"With plan"`. |
| `metrics` | object\[] | yes | 1-5 metrics, each drawn as a bar in both columns |

> [accordion] Example
>
> ```json theme={null}
> {
>   "metrics": [
>     {
>       "label": "Energy level",
>       "before": 30,
>       "after": 85
>     },
>     {
>       "label": "Flexibility",
>       "before": 25,
>       "after": 80
>     },
>     {
>       "label": "Sleep quality",
>       "before": 42,
>       "after": 88
>     },
>     {
>       "label": "Daily comfort",
>       "before": 35,
>       "after": 82
>     },
>     {
>       "label": "Confidence",
>       "before": 40,
>       "after": 90
>     }
>   ]
> }
> ```

## Activity feed

Type `ActivityFeed`. Shows recent user activity. 1-8 rows (avatar, name + flag, relative time, message) that appear one by one when reveal is on and are announced politely. Illustrative content; keep it plausible and honest. Static otherwise.

| Setting | Type | Required | Description |
| - | - | - | - |
| `title` | string | no | Heading with a pulsing dot, keep \<=30 chars, e.g. "Happening right now" |
| `items` | object\[] | yes | 1-8 rows, newest first; illustrative content, keep it plausible and honest |
| `reveal` | boolean | no | Rows appear one by one every \~1.4 s like a live feed (announced politely); false = all rows at once Default: `true`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "title": "Happening right now",
>   "reveal": true,
>   "items": [
>     {
>       "name": "Olivia",
>       "text": "got her scan results",
>       "time": "2 min ago",
>       "photoSet": "women",
>       "country": "GB"
>     },
>     {
>       "name": "James",
>       "text": "started a 28-day plan",
>       "time": "5 min ago",
>       "photoSet": "men",
>       "country": "US"
>     },
>     {
>       "name": "Sofia",
>       "text": "completed her profile",
>       "time": "8 min ago",
>       "photoSet": "women",
>       "country": "ES"
>     },
>     {
>       "name": "Noah",
>       "text": "unlocked a full report",
>       "time": "11 min ago",
>       "photoSet": "men",
>       "country": "CA"
>     },
>     {
>       "name": "Mia",
>       "text": "saved her recommendations",
>       "time": "14 min ago",
>       "photoSet": "women",
>       "country": "DE"
>     },
>     {
>       "name": "Leo",
>       "text": "finished the assessment",
>       "time": "18 min ago",
>       "photoSet": "men",
>       "country": "FR"
>     }
>   ]
> }
> ```

## Rating badge

Type `RatingBadge`. Highlights a rating or claim. Compact pill with icon, optional rating + stars and a claim; sticky pins it to the top bar. The laurel variant needs rating. Static.

| Setting | Type | Required | Description |
| - | - | - | - |
| `icon` | "activity" \| "alarm" \| "apple" \| "award" \| "baby" \| "battery" \| "bed" \| "bike" \| "brain" \| "calendar" \| "check" \| "chart" \| "clock" \| "coffee" \| "dumbbell" \| "flame" \| "flower" \| "footprints" \| "gift" \| "heart" \| "leaf" \| "lightning" \| "lock" \| "moon" \| "mountain" \| "music" \| "person" \| "ruler" \| "salad" \| "scale" \| "shield" \| "smile" \| "sparkles" \| "star" \| "sun" \| "target" \| "thumbs-up" \| "timer" \| "trophy" \| "upload" \| "users" \| "water" \| "yoga" \| "x" \| "zap" \| "heart-pulse" \| "stethoscope" \| "pill" \| "syringe" \| "thermometer" \| "weight" \| "hand-heart" \| "eye" \| "ear" \| "bone" \| "carrot" \| "cherry" \| "cookie" \| "pizza" \| "sandwich" \| "egg" \| "fish" \| "beef" \| "wheat" \| "cup-soda" \| "wine" \| "candy" \| "soup" \| "milk" \| "waves" \| "medal" \| "flag" \| "goal" \| "bed-double" \| "cloud-moon" \| "sunrise" \| "sunset" \| "wind" \| "feather" \| "brain-circuit" \| "book-open" \| "headphones" \| "glasses" \| "home" \| "briefcase" \| "car" \| "plane" \| "map-pin" \| "globe" \| "dog" \| "cat" \| "shopping-bag" \| "wallet" \| "credit-card" \| "piggy-bank" \| "gamepad" \| "tv" \| "smartphone" \| "laptop" \| "camera" \| "palette" \| "graduation-cap" \| "smile-plus" \| "frown" \| "meh" \| "laugh" \| "angry" \| "heart-crack" \| "party-popper" \| "check-circle" \| "x-circle" \| "alert-triangle" \| "info" \| "help-circle" \| "plus" \| "minus" \| "arrow-right" \| "trending-up" \| "trending-down" \| "bar-chart" \| "pie-chart" \| "percent" \| "tag" \| "badge-check" \| "crown" \| "gem" \| "rocket" \| "key" \| "bell" \| "mail" \| "phone" \| "message-circle" \| "search" \| "settings" \| "sliders" \| "refresh" \| "infinity" \| "hourglass" \| "calendar-check" \| "list-checks" \| "clipboard" \| "file-text" \| "lightbulb" \| "puzzle" \| "magnet" \| "anchor" \| "user-check" \| "user-plus" \| "users-round" \| "handshake" \| "thumbs-down" \| "star-half" | no | Icon at the start of the pill Default: `"trophy"`. |
| `rating` | number | no | Shows the number (one decimal) and stars before the text, 1-5; omit to hide. Required for the laurel variant to show its wreath |
| `text` | string | yes | The claim, keep \<=40 chars, e.g. "#1 in Health & Fitness" or "Top rated app" |
| `variant` | "pill" \| "laurel" | no | pill: icon, rating and text inline. laurel: wreath around the rating number, like an "App of the Day" mark (needs rating) Default: `"pill"`. |
| `sticky` | boolean | no | Pin to the top bar of the screen (like CountdownTimer); false = scrolls with the content Default: `false`. |

> [accordion] Example
>
> ```json theme={null}
> {
>   "icon": "trophy",
>   "rating": 4.9,
>   "text": "#1 in Health & Fitness",
>   "variant": "pill",
>   "sticky": false
> }
> ```

## Scratch reveal

Type `ScratchReveal`. Reveals a discount on tap. A cover button (tap or Enter, no real scratching) fades away to show title and text; stays revealed for the screen. Purely visual: it never changes prices, so the discount must exist in the plans. Place right before the paywall.

| Setting | Type | Required | Description |
| - | - | - | - |
| `icon` | "activity" \| "alarm" \| "apple" \| "award" \| "baby" \| "battery" \| "bed" \| "bike" \| "brain" \| "calendar" \| "check" \| "chart" \| "clock" \| "coffee" \| "dumbbell" \| "flame" \| "flower" \| "footprints" \| "gift" \| "heart" \| "leaf" \| "lightning" \| "lock" \| "moon" \| "mountain" \| "music" \| "person" \| "ruler" \| "salad" \| "scale" \| "shield" \| "smile" \| "sparkles" \| "star" \| "sun" \| "target" \| "thumbs-up" \| "timer" \| "trophy" \| "upload" \| "users" \| "water" \| "yoga" \| "x" \| "zap" \| "heart-pulse" \| "stethoscope" \| "pill" \| "syringe" \| "thermometer" \| "weight" \| "hand-heart" \| "eye" \| "ear" \| "bone" \| "carrot" \| "cherry" \| "cookie" \| "pizza" \| "sandwich" \| "egg" \| "fish" \| "beef" \| "wheat" \| "cup-soda" \| "wine" \| "candy" \| "soup" \| "milk" \| "waves" \| "medal" \| "flag" \| "goal" \| "bed-double" \| "cloud-moon" \| "sunrise" \| "sunset" \| "wind" \| "feather" \| "brain-circuit" \| "book-open" \| "headphones" \| "glasses" \| "home" \| "briefcase" \| "car" \| "plane" \| "map-pin" \| "globe" \| "dog" \| "cat" \| "shopping-bag" \| "wallet" \| "credit-card" \| "piggy-bank" \| "gamepad" \| "tv" \| "smartphone" \| "laptop" \| "camera" \| "palette" \| "graduation-cap" \| "smile-plus" \| "frown" \| "meh" \| "laugh" \| "angry" \| "heart-crack" \| "party-popper" \| "check-circle" \| "x-circle" \| "alert-triangle" \| "info" \| "help-circle" \| "plus" \| "minus" \| "arrow-right" \| "trending-up" \| "trending-down" \| "bar-chart" \| "pie-chart" \| "percent" \| "tag" \| "badge-check" \| "crown" \| "gem" \| "rocket" \| "key" \| "bell" \| "mail" \| "phone" \| "message-circle" \| "search" \| "settings" \| "sliders" \| "refresh" \| "infinity" \| "hourglass" \| "calendar-check" \| "list-checks" \| "clipboard" \| "file-text" \| "lightbulb" \| "puzzle" \| "magnet" \| "anchor" \| "user-check" \| "user-plus" \| "users-round" \| "handshake" \| "thumbs-down" \| "star-half" | no | Icon on the cover Default: `"gift"`. |
| `coverText` | string | no | Prompt on the cover, keep \<=30 chars Default: `"Tap to reveal your discount"`. |
| `title` | string | yes | Revealed headline, keep \<=30 chars, e.g. "20% OFF unlocked!" |
| `text` | string | no | Revealed subtext, keep \<=60 chars, e.g. a promo code or how it applies |

> [accordion] Example
>
> ```json theme={null}
> {
>   "title": "20% OFF unlocked!",
>   "text": "Applied automatically at checkout"
> }
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.