User Generated Content

User-Generated Content

Overview

User-generated content (UGC) — customer photos, Q&A, and recent purchase signals — increases product page conversion by giving new visitors authentic proof that real customers use and love the product. Review apps like Judge.me and Yotpo include UGC photo collection, product Q&A, and social proof widgets out of the box. Dedicated UGC platforms like Okendo, Loox, and Bazaarvoice provide more advanced sourcing from Instagram and TikTok. Only build a custom UGC pipeline if your moderation logic, rights management, or database requirements exceed what these tools support.

When to Use This Skill

• When product pages need authentic customer lifestyle photos beyond studio shots
• When building a Q&A section so customers can answer each other's questions
• When displaying "X people bought this in the last 24 hours" urgency signals
• When sourcing Instagram UGC tagged with your brand hashtag for the product page gallery
• When a third-party UGC platform is too expensive for the current scale

Core Instructions

Step 1: Determine platform and choose the right UGC tool

---

Step 2: Platform-specific setup

---

Shopify

Option A: Loox (recommended for photo-first UGC)

1. Install Loox from the Shopify App Store 2. Configure post-purchase photo request:

• Go to Loox → Emails → Photo Request Email
• Set send delay to 7 days after fulfillment
• Offer a discount incentive (e.g., 10% off next order) for submitting a photo review — Loox shows this offer in the request email

3. Configure the photo gallery widget:

• Go to Loox → Widgets → Product Widget
• Enable the photo carousel on your product template
• Set minimum photo count to show (only show gallery once you have 3+ photos per product)

4. Moderation:

• Go to Loox → Reviews → Pending to review and approve submitted photos
• Enable Auto-publish for verified purchase photo reviews

Option B: Okendo (full UGC including Q&A and Instagram)

1. Install Okendo from the App Store 2. Configure review forms to collect custom attributes: sizing, quality, value — these appear as filtered search options in the review widget 3. Set up Q&A in Okendo → Features → Q&A:

• Enable customer-to-customer Q&A below reviews
• Configure email notifications to your team when a new question is submitted
• Set up an auto-email notification to the question author when staff answers

4. Connect Instagram in Okendo → Channels → Instagram:

• Connect your brand Instagram account
• Okendo imports posts tagged with your hashtag and lets you request rights from the poster
• Only publish to product pages after rights are granted

Social proof notification widget (Loox and Okendo): Both apps include a "recent purchases" pop-up widget. Enable it in Loox → Widgets → Social Proof or Okendo → Widgets → Purchase Activity. Configure to show on product and collection pages, not on checkout.

---

WooCommerce

Yotpo for WooCommerce:

1. Install Yotpo Reviews from the WordPress plugin directory 2. Yotpo handles photo review requests, moderation, and gallery display 3. Configure post-purchase photo request timing in Yotpo → Settings → Review Requests 4. Enable Q&A under Yotpo → Features → Q&A

WooCommerce native reviews + photo upload: 1. Enable product reviews in WooCommerce → Settings → Products → Reviews 2. Install WooCommerce Product Reviews Pro extension to add:

• Photo upload field in the review form
• Verified purchase gating
• Upvote/helpful vote on individual reviews

3. For Q&A separately, install WooCommerce Product Q&A from WooThemes or a compatible plugin

Sourcing Instagram UGC: Use Tagembed or Smash Balloon Instagram Feed (WordPress plugins) to embed tagged Instagram posts on product pages. These pull posts by hashtag or mentions and let you curate which appear on each product.

---

BigCommerce

Okendo for BigCommerce:

1. Go to Apps → Search "Okendo" and install 2. Configuration is the same as the Shopify version — photo reviews, Q&A, and Instagram sourcing work identically 3. Okendo connects to BigCommerce orders for verified purchase gating automatically

Yotpo for BigCommerce: 1. Install from the BigCommerce App Marketplace 2. Includes photo reviews, Q&A, and SMS review requests 3. Yotpo's visual UGC tab imports Instagram and TikTok tagged content for use in the product gallery

---

Custom / Headless

For headless storefronts needing UGC in your own database:

// lib/ugc.ts

// Generate a presigned S3 URL for direct browser-to-S3 photo uploads
// Never route file uploads through your API server
export async function getPhotoUploadUrl(req: Request, res: Response) {
  const { productId, fileName, contentType } = req.body;
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(contentType)) {
    return res.status(400).json({ error: 'Only JPEG, PNG, and WebP accepted' });
  }

  const key = `ugc/pending/${productId}/${req.session.customerId}/${Date.now()}-${fileName}`;
  const command = new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: key, ContentType: contentType });
  const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 300 });

  await db.ugcPhotos.create({ data: { productId, customerId: req.session.customerId, s3Key: key, status: 'pending_upload' } });
  res.json({ uploadUrl, key });
}

// S3 ObjectCreated trigger: run content moderation then resize
export async function processUGCPhoto(s3Key: string) {
  const ugcRecord = await db.ugcPhotos.findFirst({ where: { s3Key } });
  if (!ugcRecord) return;

  // AWS Rekognition content moderation — auto-reject NSFW content
  const moderationResult = await rekognition.detectModerationLabels({
    Image: { S3Object: { Bucket: process.env.S3_BUCKET!, Name: s3Key } },
    MinConfidence: 75,
  });

  if ((moderationResult.ModerationLabels ?? []).length > 0) {
    await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: { status: 'rejected' } });
    return;
  }

  // Resize to thumbnail (200px), medium (600px), full (1200px) WebP variants
  const original = await s3.getObject({ Bucket: process.env.S3_BUCKET!, Key: s3Key });
  const buffer = Buffer.from(await original.Body!.transformToByteArray());

  for (const { suffix, width } of [{ suffix: 'thumbnail', width: 200 }, { suffix: 'medium', width: 600 }, { suffix: 'full', width: 1200 }]) {
    const resized = await sharp(buffer).resize(width).webp({ quality: 80 }).toBuffer();
    await s3.putObject({
      Bucket: process.env.S3_BUCKET!, Body: resized, ContentType: 'image/webp',
      Key: `ugc/approved/${ugcRecord.productId}/${ugcRecord.id}/${suffix}.webp`,
    });
  }

  // Auto-approve verified purchase photos; queue others for manual review
  const isVerifiedPurchase = await db.orderItems.findFirst({ where: { customerId: ugcRecord.customerId, productId: ugcRecord.productId } });
  await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: {
    status: isVerifiedPurchase ? 'approved' : 'pending_review',
    verifiedPurchase: !!isVerifiedPurchase,
  }});
}

// Product Q&A — submit and answer questions
export async function submitQuestion(req: Request, res: Response) {
  const { productId, question, authorName } = req.body;
  const q = await db.productQuestions.create({ data: { productId, question, authorName, authorEmail: req.session.customerEmail, status: 'pending' } });
  await notifyProductTeam({ questionId: q.id, productId, question });
  res.json({ questionId: q.id });
}

// Social proof feed: recent purchases cached for 5 minutes
export async function buildRecentPurchaseFeed() {
  const recentOrders = await db.orders.findMany({
    where: { createdAt: { gte: new Date(Date.now() - 86400000) }, status: 'completed' },
    include: { lineItems: { include: { product: true } }, customer: true },
    orderBy: { createdAt: 'desc' },
    take: 100,
  });

  const feed = recentOrders.flatMap(order =>
    order.lineItems.slice(0, 1).map(item => ({
      productId: item.productId,
      productName: item.product.name,
      buyerFirstName: order.customer.firstName,
      buyerLocation: order.customer.city ?? 'somewhere',
      purchasedAt: order.createdAt.toISOString(),
    }))
  );

  await redis.setex('social_proof_feed', 300, JSON.stringify(feed));
}

---

Step 3: Configure rights management for Instagram UGC

Before displaying any customer social media content on your store or in paid ads:

1. Request rights explicitly — Okendo and Yotpo have built-in rights request flows that DM the Instagram user asking for permission 2. Never use Instagram content in paid advertising without written consent — this creates legal liability 3. Track rights status per photo — only display content where rights are confirmed; Okendo and Yotpo track this automatically 4. For organic sourcing (no dedicated app), comment on the post or send a DM with a rights request and keep a record of the response

---

Step 4: Set up Q&A moderation

Unanswered questions damage trust more than having no Q&A at all:

In Okendo and Yotpo:

• Configure a daily email digest to your team listing all unanswered questions
• Set a 48-hour SLA for staff answers — questions older than 7 days without answers should be escalated

Best practice: Enable customer-to-customer answers (other buyers can answer) — this reduces the staff burden and customers often provide more authentic answers than support agents.

---

Step 5: Measure UGC impact

Best Practices

• Use Loox or Okendo before building custom — they handle S3 storage, content moderation, rights management, and Instagram import; building this from scratch takes 2–4 weeks
• Offer a small incentive for photo submissions — Loox's discount-for-photo feature increases submission rates by 3–5x compared to asking without an incentive
• Auto-approve verified purchase photos — these have lower risk and removing the manual review bottleneck dramatically increases UGC volume
• Show verified purchase badges on UGC photos — customers distinguish genuine-use photos from staged ones; the badge increases trust
• Always run AI content moderation before display — never approve photos without at least automated screening; AWS Rekognition or Google Vision SafeSearch catch NSFW content automatically
• Obtain explicit rights before using UGC in paid ads — using customer photos in advertising without written consent creates legal liability

Common Pitfalls

Related Skills

• @product-reviews-ratings
• @personalization-engine
• @customer-segmentation

UGC Photo Processing Lambda

Problem/Feature Description

An e-commerce platform has been receiving customer photo submissions stored in an S3 bucket under a ugc/pending/ prefix. The team wants to automate processing those uploads: screening them for inappropriate content, resizing them into multiple display variants, and deciding whether they can be published immediately or need manual review first.

Currently photos are going directly to the approved gallery without any content screening, which has already caused one incident where an offensive image appeared on a product page. The team also wants to serve images in web-friendly sizes rather than the raw originals, and they want to fast-track photos from customers who can be verified to have purchased the product.

Your job is to write the Lambda (or equivalent async worker) that handles the S3:ObjectCreated event for the pending prefix. The function should screen, resize, and update the status of each uploaded photo appropriately.

Output Specification

Produce a TypeScript source file (e.g. process-ugc-photo.ts) that contains the full photo-processing logic. The file should be self-contained with all imports, configuration, and helper functions.

Include a brief processing-notes.md that explains: (1) which service you chose for content moderation and why, (2) what confidence threshold you used, (3) how you decided which photos are published automatically versus held for review, and (4) how you handled image resizing and format choices.

Input Files

The following file provides type definitions and stub helpers to use as a starting point.

=============== FILE: inputs/types.ts =============== export interface S3Event { Records: Array<{ s3: { bucket: { name: string }; object: { key: string; size: number }; }; }>; }

export interface UGCPhoto { id: string; productId: string; customerId: string; s3Key: string; status: string; verifiedPurchase: boolean; }

// Stub db — replace with real ORM calls export const db = { ugcPhotos: { findByS3Key: async (key: string): Promise<UGCPhoto> => ({ id: 'stub-id', productId: 'prod-1', customerId: 'cust-1', s3Key: key, status: 'pending_upload', verifiedPurchase: false }), update: async (id: string, data: Partial<UGCPhoto>): Promise<void> => {}, }, orderItems: { exists: async (query: { customerId: string; productId: string }): Promise<boolean> => false, }, };

Customer Photo Upload API

Problem/Feature Description

A growing outdoor apparel brand wants to let post-purchase customers submit lifestyle photos of themselves using their gear. The marketing team has found that authentic customer photos on product pages drive significantly higher conversion than studio shots alone. The engineering team previously attempted to accept photo uploads directly through the Express API server, but this caused memory spikes and occasional crashes when customers uploaded high-resolution images simultaneously.

Your task is to implement the backend API endpoint that initiates a customer photo upload. The endpoint must allow post-purchase customers to submit a photo for a given product without routing the file through the application server. The implementation must include proper file type validation and must record the upload intent in the database as soon as the upload slot is created.

Output Specification

Produce a TypeScript source file (e.g. ugc-upload.ts) containing the implementation of the presign endpoint. The file should be self-contained and include all necessary imports, the S3 client initialisation, validation logic, database record creation, and the response payload.

Also produce a short design-notes.md file explaining the key architectural decisions you made — in particular, why files are not routed through the API server and how the database record relates to the upload lifecycle.

Input Files

The following file is provided as a starting point. Extract it before beginning.

=============== FILE: inputs/schema.ts =============== // Existing DB schema types (read-only reference) export interface UGCPhoto { id: string; productId: string; customerId: string | null; s3Key: string; status: 'pending_upload' | 'pending_review' | 'approved' | 'rejected'; rejectionReason?: string; verifiedPurchase: boolean; createdAt: Date; approvedAt: Date | null; }

// Stub db object — replace with your actual ORM calls export const db = { ugcPhotos: { create: async (data: Partial<UGCPhoto>): Promise<UGCPhoto> => ({ id: 'stub', ...data } as UGCPhoto), }, };

Social Proof Widget and Q&A Notification System

Problem/Feature Description

A DTC furniture brand is launching two product-page features: a live "recently purchased" social proof ticker and a customer Q&A section. The social proof ticker must show real recent purchases to build urgency, while the Q&A section needs to ensure customers get timely answers and can signal which questions are most helpful.

The engineering lead has flagged two operational concerns: the social proof feed must not hammer the database on every page view (the product pages receive thousands of visits per hour), and the Q&A section has historically gone stale — customers asked questions and never heard back, which damaged trust. A previous attempt at a social proof feature was pulled after the legal team flagged that some "recent purchase" entries were fabricated.

Your task is to implement: (1) the social proof feed builder and its read endpoint, (2) the Q&A submission, answer, and upvote endpoints, and (3) a mechanism to notify the product team about unanswered questions.

Output Specification

Produce the following TypeScript source files:

• social-proof.ts — feed builder and GET endpoint
• qa.ts — question submission, answer, and upvote endpoints
• qa-digest.ts — a scheduled job or function that sends a daily digest of unanswered questions to the product team

Also produce a ugc-api-notes.md explaining: how you prevent database overload on the social proof endpoint, how you ensure questions don't go unanswered indefinitely, and how duplicate upvotes are prevented.

Input Files

The following file provides database and cache stubs.

=============== FILE: inputs/stubs.ts =============== import { subHours } from 'date-fns';

export { subHours };

// Redis stub export const redis = { setex: async (key: string, ttl: number, value: string): Promise<void> => {}, get: async (key: string): Promise<string | null> => null, };

// DB stubs export const db = { orders: { findMany: async (query: any): Promise<any[]> => [], }, productQuestions: { create: async (data: any): Promise<any> => ({ id: 'q-stub', ...data }), update: async (id: string, data: any): Promise<void> => {}, findById: async (id: string, opts?: any): Promise<any> => ({ id, question: 'Is this available in blue?', authorEmail: 'customer@example.com', product: { name: 'Lounge Chair', slug: 'lounge-chair' }, }), increment: async (id: string, field: string, amount: number): Promise<void> => {}, findUnanswered: async (olderThanDays?: number): Promise<any[]> => [], }, questionVotes: { exists: async (query: any): Promise<boolean> => false, create: async (data: any): Promise<void> => {}, }, ugcPhotos: { findMany: async (query: any): Promise<any[]> => [], }, };

export async function notifyProductTeam(data: any): Promise<void> {} export async function sendTransactionalEmail(to: string, template: string, vars: any): Promise<void> {} export async function sendDigestEmail(recipients: string[], subject: string, body: any): Promise<void> {}