PurchaseNotification

Purchase Notifications – real-time social proof for higher conversions

Turn casual visitors into buyers by showing tasteful “Someone just purchased…” popups on your page. This component adds instant social proof, reduces doubt, and nudges users to act now—without extra tooling or code edits.

Why it converts

• Social proof: visitors see real purchase activity and trust you faster.

• Momentum: a steady trickle of notifications creates urgency without feeling spammy.

• Relevance: show the exact product purchased so shoppers picture themselves buying.

• Credibility: location + name initial feels real while protecting privacy.

What you can do

• Connect to your API for live sales, or use the built-in demo generator.

• Control timing: initial delay, cadence, and how long each message stays on screen.

• Style to match your brand: colors, radius, opacity, shadow, emoji on/off, 4 variants.

• Place it anywhere: top/bottom, left/right/center; responsive on mobile.

• Accessibility: keyboard dismiss, ARIA labels, optional subtle sound.

How it decides what to show

• Test Mode = On: always uses built-in demo data (ignores any API).

• Test Mode = Off:

  • If API Endpoint is set and returns valid JSON, items from your API are shown.

  • If the API fails, is empty, or returns the wrong shape, it safely falls back to built-in demo data.

• The component polls every New Every seconds and shows one toast per tick.

API support

• Any HTTPS GET endpoint that returns JSON for recent purchases.

• Auth headers supported when you set “API Key”:

  • Authorization: Bearer <apiKey>

  • X-API-Key: <apiKey>

• Response shape: a single object or an array of objects is accepted.

Example JSON (single object)

{ "id": "evt_12345", "name": "Alex T.", "location": "Toronto", "product": "Premium Bundle", "time": "just now" }

Example JSON (array)

[ { "id": "evt_1732391234", "name": "Alex T.", "location": "Toronto", "product": "Premium Bundle", "time": "just now" }, { "id": "evt_1732392235", "name": "Sarah K.", "location": "Vancouver", "product": "Starter Package", "time": "1 minute ago" } ]

Headers the component sends

• Authorization: Bearer <apiKey> (if “API Key” is set)

• X-API-Key: <apiKey> (if “API Key” is set)

Note: it does not set Content-Type on GET.

Fast setup in Framer

1. Drop the component onto your canvas.

2. In the right panel:

• API Endpoint: https://yourdomain.com/api/purchase (optional)

• API Key: abc123… (optional)

• New Every: 12–20

• Show For: 5–8

• Initial Delay: 2–5

• Max Visible: 2–3

• Position: Bottom Right (or as you like)

• Test Mode: toggle on to simulate purchases while wiring up your API; turn off for live data.

Mapping notes

• If your API only has IDs (productId/customerId), map them on your server to this schema (name/location/product/time) for best results.

• time can be any short string. If omitted, the component generates one.

Best practices

• Cadence: 10–20s with 5–8s display feels natural.

• Use real data when possible; keep Test Mode for previews and early seeding.

• Keep copy neutral and trustworthy; let authentic activity do the selling.

• For professional sites, “minimal” or “corporate” variants fit best.

Common gotchas

• CORS: your endpoint must allow the site origin (Access-Control-Allow-Origin). For quick tests, allow your Framer domain.

• HTTPS only: use https in production.

• Rate limits: the component polls—use New Every ≥ 10s or cache responses.

• Arrays vs single: arrays are supported; the component cycles through items. If you prefer just the latest, have your server return a single object.

What’s refundable

• You’re eligible for a full refund within 7 days of purchase if: – The product is not as described on the sales page, or – You hit a technical issue we can’t fix after reasonable troubleshooting.

What’s not refundable

• Change of mind or “I don’t need it anymore.”

• Difficulty learning or using the product without attempting our setup steps.

• Discount requests after purchase or price changes.

• Bundles partially consumed.