nuxt-x-marketing
SocialProofToast
Floating activity toast that cycles through social proof notifications (signups, upgrades) on a configurable interval.
SocialProofToast
A fixed-position floating notification that cycles through a list of recent activity items (signups, upgrades, trials). Each notification shows for displayDuration ms before fading out, then the next one appears after interval ms. The first notification is delayed by initialDelay ms to avoid competing with page load animations.
Components
<XMarkSocialProofToast />
A fixed-position floating notification that cycles through a list of recent activity items (signups, upgrades, trials). Each notification shows for displayDuration ms before fading out, then the next one appears after interval ms. The first notification is delayed by initialDelay ms to avoid competing with page load animations.
<XMarkSocialProofToast
:notifications="[
{ name: 'Alex M.', action: 'just signed up', time: '2 minutes ago' },
{ name: 'Sarah K.', action: 'upgraded to Pro', time: '5 minutes ago', avatar: '/avatars/sarah.jpg' },
{ name: 'James T.', action: 'started a free trial', time: '8 minutes ago' },
]"
placement="bottomLeft"
type="success"
:interval="4000"
:initial-delay="5000"
:display-duration="3000"
:show-icon="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
notifications | Array | 3 example notifications | Notification objects [{ name, action, time, avatar? }] |
interval | Number | 4000 | Milliseconds between notifications |
initialDelay | Number | 5000 | Delay before first notification appears (ms) |
displayDuration | Number | 3000 | How long each notification is visible (ms) |
placement | String | 'topRight' | Screen corner: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' |
type | String | 'success' | Icon theme: 'success', 'error', 'warning', 'info' |
showIcon | Boolean | true | Show status icon in the toast |
AI Context
category: SocialProof
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkSocialProofToast
use-when: >
Adding live-activity urgency to key conversion pages by cycling through
recent user actions (signups, upgrades) as floating toast notifications.
typical-page-section: Persistent overlay — place in app.vue or layout for visibility site-wide on key pages.