nuxt-x-affiliate
Social Proof Toast
Rotating recent-activity toast driven by real, timestamped events.
Social Proof Toast
A corner toast cycling through recent activity — "Jamie R. bought the Model X · 4 minutes ago".
events is required and has no default. The marketing component this was
ported from shipped three invented notifications as its default value, so dropping
it onto a page immediately displayed purchase activity that never happened. On a
site earning affiliate commission that is a deceptive representation under the FTC
Act and the Endorsement Guides (16 CFR §255) — the same rules requiring the
disclosures the rest of this layer renders.Pass real events. An empty array renders nothing.Components
<XAFSocialProofToast />
<XAFSocialProofToast :events="events" placement="bottomLeft" />
<script setup>
// Real, timestamped, and anonymised by you before it reaches the component.
const { data: events } = await useFetch('/api/recent-activity')
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
events | SocialProofEvent[] | required | Real activity to cycle through |
interval | number | 12000 | Time from one toast appearing to the next (ms) |
initialDelay | number | 5000 | Delay before the first toast (ms) |
displayDuration | number | 5000 | How long each toast stays on screen (ms) |
placement | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'bottomLeft' | Corner |
showIcon | boolean | true | Show the verified check icon |
once | boolean | false | Stop after every event has shown once |
SocialProofEvent object
| Key | Type | Description |
|---|---|---|
name | string | Who — anonymise before passing, e.g. "Jamie R." |
action | string | What they did, e.g. "bought the Model X" |
at | string | ISO timestamp of when it actually happened |
avatar | string | Optional photo. Falls back to a monogram |
href | string | Optional link to the product involved |
Events
| Event | Payload | Description |
|---|---|---|
dismiss | — | Visitor closed the toast; cycling stops for the session |
Tips
atis an ISO timestamp formatted live throughuseXafDateFormat, not a frozen string. The marketing original tooktime: "2 minutes ago"as a literal, which still claimed "2 minutes ago" a year later.- Announces via
role="status", notrole="alert"— ambient information should not interrupt a screen reader mid-sentence every few seconds. - The slide transform is dropped under
prefers-reduced-motion; only opacity animates.
AI Context
component: XAFSocialProofToast
package: "@xenterprises/nuxt-x-affiliate"
use-when: Rotating recent-activity toast backed by real event data