social-proof-widgets

What this skill does

# Social Proof Widgets

## Overview

Social proof widgets — recent purchase notifications, visitor counts, review badges, and low-stock indicators — reduce purchase anxiety and increase conversion rates by 10–30% on product pages. For Shopify and WooCommerce, dedicated apps (Fomo, TrustPulse, ProveSource) install these widgets without code. Building custom widgets is only necessary for headless stores with specific design requirements.

## When to Use This Skill

- When product pages have good traffic but low conversion rates
- When launching a new product that lacks reviews and needs other trust signals
- When testing whether social proof elements meaningfully impact CVR (A/B test required)
- When wanting to add real-time purchase notifications
- When building a low-stock urgency display based on actual inventory data

## Core Instructions

### Step 1: Choose the right social proof tool

| Platform | Best For | Shopify | WooCommerce | BigCommerce | Price |
|----------|---------|---------|-------------|-------------|-------|
| **Fomo** | Real-time purchase notifications | App Store | Plugin | Via JS | $19+/mo |
| **TrustPulse** | Recent purchases + live visitor count | — | Plugin | Via JS | $5+/mo |
| **ProveSource** | All platforms, highly customizable | App Store | Via JS | Via JS | Free tier; $20+/mo |
| **Judge.me** | Review count badge + verified buyer badge | App Store | Plugin | App Marketplace | Free tier; $15/mo |
| **Custom** | Headless stores, specific design needs | Via API | Via API | Via API | Dev cost |

**Recommendation:** Use **Fomo** for Shopify (best purchase notifications) and **TrustPulse** for WooCommerce. For review badges, use your existing review platform (Judge.me, Yotpo) — they include star rating badges automatically.

### Step 2: Set up social proof widgets

---

#### Shopify with Fomo

1. Install **Fomo** from the Shopify App Store
2. Go to **Fomo → Events → Shopify Orders** — Fomo automatically imports recent orders from your store
3. Configure the notification template:
   - Display: first name and city (e.g., "Sarah from Chicago just purchased…")
   - Show the product name and image
   - Display within the last 48 hours
4. Go to **Fomo → Design** to customize the position and style of the notification toast (bottom-left by default)
5. Go to **Fomo → Rules** and set:
   - Show only on product pages (URL contains `/products/`)
   - Hide on cart and checkout pages
   - Minimum 3 notifications to show before displaying the widget (prevents showing a widget with only 1 event)
6. Go to **Fomo → A/B Testing** to split-test the widget against a control group — always measure lift before enabling sitewide

---

#### WooCommerce with TrustPulse

1. Install **TrustPulse** from the WordPress plugin directory
2. Go to **TrustPulse → Create Campaign** and select **Recent Activity**
3. Configure:
   - Data source: WooCommerce Recent Orders
   - Display: customer name, city, product purchased
   - Show: orders from the last 7 days
4. Set targeting rules: show only on product and shop pages; exclude checkout
5. For the visitor count widget, create a second **On Fire** campaign: "X people looking at this right now" — set a minimum visitor threshold of 5 before displaying

---

#### BigCommerce with ProveSource

1. Sign up for **ProveSource** and add the JavaScript snippet to your store via **Storefront → Script Manager**
2. Connect your BigCommerce store to ProveSource via the integration settings
3. Configure recent purchase notifications and visitor count widgets from the ProveSource dashboard

---

#### Custom / Headless

For headless stores, build a social proof API and client widget:

```typescript
// GET /api/products/:id/social-proof
// Returns real data only — never fabricate counts
export async function getProductSocialProof(req: Request, res: Response) {
  const productId = req.params.id;

  const [recentOrders, reviewSummary, stockLevel] = await Promise.all([
    db.orderLineItems.findAll({
      where: { productId, createdAt: { gte: subHours(new Date(), 48) } },
      include: ['order.shippingAddress'],
      limit: 10,
    }),
    db.productReviews.aggregate(productId),
    db.productVariants.findMinStock(productId),
  ]);

  // Anonymize PII — first name and city only
  const recentPurchases = recentOrders.map(item => ({
    firstName: item.order.shippingAddress.firstName,
    location: `${item.order.shippingAddress.city}, ${item.order.shippingAddress.stateCode}`,
    timeAgo: formatTimeAgo(item.createdAt),
    productName: item.productName,
  }));

  return res.json({
    recentPurchases,
    reviews: { average: reviewSummary.avgRating, total: reviewSummary.total },
    stockLevel: {
      isLow: stockLevel > 0 && stockLevel <= 5,
      quantity: stockLevel,
      isSoldOut: stockLevel === 0,
    },
  });
}
```

Client-side purchase notification toast — using DOM methods to prevent XSS:

```typescript
class SocialProofToast {
  private queue: Array<{ firstName: string; location: string; productName: string; timeAgo: string }> = [];
  private isShowing = false;

  async init(productId: string) {
    const response = await fetch(`/api/products/${productId}/social-proof`);
    const data = await response.json();
    this.queue = data.recentPurchases.slice(0, 5);
    this.showNext();
  }

  private showNext() {
    if (this.queue.length === 0 || this.isShowing) return;
    const purchase = this.queue.shift()!;
    this.isShowing = true;

    const toast = document.createElement('div');
    toast.className = 'sp-toast';

    const strong = document.createElement('strong');
    strong.textContent = `${purchase.firstName} from ${purchase.location}`; // textContent prevents XSS

    const span = document.createElement('span');
    span.textContent = ` purchased ${purchase.productName}`;

    const time = document.createElement('time');
    time.textContent = purchase.timeAgo;

    toast.appendChild(strong);
    toast.appendChild(span);
    toast.appendChild(time);
    document.body.appendChild(toast);

    setTimeout(() => {
      toast.remove();
      this.isShowing = false;
      setTimeout(() => this.showNext(), 8000); // 8-second gap between toasts
    }, 5000);
  }
}
```

### Step 3: Add low-stock urgency indicators

Low-stock messaging ("Only 3 left!") drives urgency effectively — but only show real inventory counts. Fake urgency destroys trust when customers notice it.

**In Shopify:** Install **Urgency Bear** or **Hurrify** from the Shopify App Store — they read your actual Shopify inventory and display "Only X left" messages on product pages.

**In WooCommerce:** Enable WooCommerce's built-in low-stock display:
1. Go to **WooCommerce → Settings → Products → Inventory**
2. Enable **Show stock management at product level**
3. Enable **Enable low stock threshold** and set to 5
4. WooCommerce automatically shows "Only 3 in stock" on product pages when inventory falls below the threshold

**Custom thresholds:** Use CSS to style the low-stock message based on quantity levels.

### Step 4: A/B test social proof impact

Always test before deploying sitewide. Both Fomo and TrustPulse have built-in A/B testing.

For manual A/B testing:
1. Enable the widget for 50% of visitors using your platform's experimentation tool
2. Measure for at least 2 weeks and 200+ conversions per group
3. Compare conversion rate, AOV, and revenue per visitor between the groups
4. Only keep the widget if it shows statistically significant lift (p < 0.05)

## Best Practices

- **Only show real data** — fabricated purchase counts or invented visitor numbers erode trust when discovered; use a minimum threshold (5+ events) before showing any widget
- **Anonymize purchase notifications** — show first name and city only; never include order IDs, full names, or email addresses
- **Load social proof asynchronously** — fetch after page load using `requestIdleCallback`; never block the critical render path
- **Hide the widget on cart and checkout pages** — sho