Components: social proof

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

Example

{
  "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`.

Example

{
  "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”

Example

{
  "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)

Example

{
  "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`.

Example

{
  "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"`.

Example

{
  "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

Example

{
  "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`.

Example

{
  "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`.

Example

{
  "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

Example

{
  "title": "20% OFF unlocked!",
  "text": "Applied automatically at checkout"
}

​Stat highlight

​Stats row

​User counter

​Marquee

​Testimonial

​Review summary

​Before / after

​Activity feed

​Rating badge

​Scratch reveal

Stat highlight

Stats row

User counter

Marquee

Testimonial

Review summary

Before / after

Activity feed

Rating badge

Scratch reveal