# SocialProofPopup

> Toast notifications showing recent purchases or activity

Canonical URL: https://fa7e86e3d553:3005/islands/social-proof/social-proof-popup

> Toast notifications showing recent purchases or activity. Creates urgency. Place once per page.

## Preview

**Category**: Social Proof

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| events | array | yes | [] | Array of event objects with name, product, location (optional), time (optional), image (optional) |
| delay | number | no | 3000 | Initial delay before first popup (ms) |
| interval | number | no | 8000 | Time between popups (ms) |
| duration | number | no | 4000 | How long each popup stays visible (ms) |
| position | enum | no | bottom-left | Popup position: 'bottom-left' or 'bottom-right' |

## Embed Example

```html
<lx-island name="SocialProofPopup">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

Place in a **hidden section** (once per page) — the island positions itself fixed on screen:

```html
<lx-island name="SocialProofPopup">
  <script type="application/json">
{}
  </script>
</lx-island>
```

Popups cycle through events array, showing one at a time.

## Tips

- Use sparingly — too many popups hurt credibility
- Keep messages short (under 50 chars)
- position:'bottom-right' works better for RTL languages
- Avoid on mobile if using exit-intent popup (visual clash)
- 3-5 event messages is optimal rotation length
- Set longer interval (10000+ms) on PDPs, shorter on collection pages

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [ReviewCarousel](/islands/social-proof/review-carousel) — Persistent review display, use both for maximum social proof
- [ReviewList](/islands/social-proof/review-list) — Longer review browsing