social-proof-widgets（社会证明小部件）

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

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

1. Go to Fomo → Design to customize the position and style of the notification toast (bottom-left by default)
2. 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)

1. 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

1. Set targeting rules: show only on product and shop pages; exclude checkout
2. 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:

// 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:

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 — showing purchase notifications during checkout distracts from conversion; disable on these pages
• Cap notification frequency — show a maximum of 3 toasts per page session with 8+ second gaps between them
• Use textContent for all customer-derived data — prevents XSS vulnerabilities; never use innerHTML with customer names or locations

Common Pitfalls

Related Skills

• @review-generation-engine
• @conversion-rate-optimization
• @exit-intent-popups
• @ugc-campaign-management
• @ab-testing-ecommerce