Social Proof (SalesPop)

SalesPop displays real-time purchase and signup notifications on your website. These small toast-style popups build social proof and increase visitor trust, leading to higher conversion rates.

How to Embed

Add this script tag to your website. Replace your-slug with your project slug:

HTML

<script src="https://www.helpyap.com/salespop.js" data-project="your-slug"></script>

The SalesPop script is separate from the chat widget. You can use either or both on the same page.

Data Modes

SalesPop supports three data modes, configured in the admin panel.

Demo Mode

Displays simulated notifications using fake names, locations, and products that you configure. Useful for new sites that do not yet have real transaction data. The notifications look realistic with randomized time stamps like "2 minutes ago" or "just now".

Configure: names, locations, products, event types (purchased, subscribed, signed_up, added_to_cart), and time range.

Real Mode

Pulls live transaction data from your connected Stripe account. Notifications display actual customer names, products, and timestamps. This requires a Stripe API key with Charges: Read permission (restricted key recommended).

Hybrid Mode

Combines real Stripe data with demo data. When real transactions are available, they are shown first. Demo notifications fill in the gaps to ensure a consistent stream of social proof.

Stripe Integration (Recommended)

The easiest way to show real purchase notifications. Just paste your Stripe API key and purchases appear automatically — no code, no webhooks, no backend changes needed on your end.

Go to your Stripe Dashboard → API Keys
Create a Restricted key with only Charges: Read permission
Paste the key in Project Settings → Social Proof → Stripe Integration
Set the data mode to Real or Hybrid

That's it. HelpYap will automatically pull recent charges from Stripe and display them as social proof notifications on your site.

Security note: Always use a restricted Stripe key with the minimum required permissions. Never use your secret key. The key is encrypted at rest in our database using AES-256-GCM.

Customization

All settings are configured in the admin panel under Project Settings → Social Proof.

Position & Layout

Option	Description	Default
position	Corner of the screen	bottom-left
offsetX / offsetY	Pixel offset from the edge	20 / 20
maxWidth	Maximum popup width in pixels	340
mobileEnabled	Show notifications on mobile	true

Timing

Option	Description	Default
displayDuration	How long each popup is shown (ms)	5000
delayBetween	Pause between notifications (ms)	8000
initialDelay	Delay before the first popup (ms)	3000
animationDuration	Slide-in animation duration (ms)	400

Behavior

Option	Description	Default
loop	Repeat notifications after all have been shown	true
shuffle	Randomize the notification order	true
closeable	Allow visitors to dismiss notifications	true
pauseOnHover	Pause the timer when hovering	true
maxPerSession	Maximum popups per visitor session	50

Theme

Customize the appearance with these theme options:

Option	Description
backgroundColor	Popup background color
textColor	Primary text color
accentColor	Highlight color for product names
borderRadius	Corner rounding in pixels
fontFamily	Font family for the popup
gradientBorder	Enable animated gradient border effect
gradientColors	Array of colors for the gradient border

Verification Badge

Optionally display a verification badge on each notification to increase trust. Configure the badge text and icon in the admin panel.

Custom Events API (Advanced)

For events that don't come from Stripe — like signups, demo bookings, form submissions, or any other activity — you can push them from your backend server.

If you only want to show purchase notifications, you don't need this. The Stripe integration above handles that automatically.

1. Generate a push secret

Go to Project Settings → Social Proof → Custom Events API and click Generate Push Secret. Copy the secret and store it as an environment variable on your server (e.g. HELPYAP_PUSH_SECRET). Never put it in frontend code.

2. Send events from your server

Call the push endpoint from your backend whenever something happens that you want to display as social proof:

bash

curl -X POST https://app.helpyap.com/api/widget/salespop-push \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $HELPYAP_PUSH_SECRET" \
  -d '{
    "project": "your-slug",
    "type": "signed_up",
    "name": "Sarah K.",
    "location": "Austin, TX",
    "product": "Pro Plan"
  }'

Event fields

Field	Required	Description
project	Yes	Your project slug
type	Yes	Event type: purchased, subscribed, signed_up, added_to_cart, or custom
name	No	Customer name (e.g. "Sarah K.")
location	No	Customer location (e.g. "Austin, TX")
product	No	Product or plan name
message	No	Custom message text
image_url	No	Avatar or product image URL
url	No	Link to open when the notification is clicked

Security note: The push secret authenticates your server. Without it, the endpoint rejects all requests. This prevents anyone from injecting fake events into your social proof feed.