Social Proof Notification System

Display purchase or event signup toasts on your website.

• Purchase Notifications - Show recent purchases with customer names and product details
• Event Signup Notifications - Display signup counts for events
• Webhook Integration - Send purchases via ThriveCart or Stripe webhooks

Send a webhook to https://your-val.web.val.run/webhook/purchase

Note: The endpoint currently accepts Stripe and ThriveCart webhooks

Add this script to your page with product IDs to show toasts for recent purchases:

<script src="https://your-val.web.val.run/script.js" 
  data-product-ids="productID1,productID2,productID3">
</script>

Send a webhook to https://your-val.web.val.run/webhook/events/myAwesomeEvent` - replace myAwesomeEvent with your event name

Note: The endpoint ignores the webhook body, it just increments the event signup count by 1

Add this script with your event name to show a toast with current signup count:

<script src="https://your-val.web.run/script.js"
  data-event-name="myAwesomeEvent"
  data-event-display-name="My Awesome Event">
</script>

• bottom-left (default)
• bottom-right
• top-left
• top-right

Show signups from a specific time period:

<!-- Show signups from last 2 hours -->
<script src="https://your-val.web.val.run/script.js" 
  data-event-name="Free Webinar 2025"
  data-time-period-hours="2">
</script>

<!-- Show signups from last 3 days -->
<script src="https://your-val.web.val.run/script.js" 
  data-event-name="Free Webinar 2025"
  data-time-period-days="3">
</script>

The notification will display text like "In the last 2 hours" or "In the last 3 days".

<script src="https://your-val.web.val.run/script.js" 
  data-product-ids="product1,product2"
  data-event-name="Free Webinar 2025"
  data-min-signups="3"
  data-link-url="https://example.com/event-signup">
</script>

Make toasts clickable by adding a link URL:

<script src="https://your-val.web.val.run/script.js" 
  data-product-ids="product1,product2"
  data-link-url="https://example.com/shop">
</script>

Here's an example with all available data attributes:

<script src="https://your-val.web.val.run/script.js" 
  data-product-ids="course-123,ebook-456"
  data-event-name="summer-bootcamp-2025"
  data-event-display-name="Summer Bootcamp 2025"
  data-position="bottom-right"
  data-display-duration="5000"
  data-interval-delay="5000"
  data-max-display-count="15"
  data-limit="50"
  data-min-signups="5"
  data-time-period-hours="24">
</script>

This configuration will:

• Track purchases for course-123 and ebook-456
• Show a one-time signup notification for the "Summer Bootcamp 2025" event
• Show notifications in the bottom-right corner
• Display each notification for 5 seconds
• Show purchase notifications every 5 seconds
• Show up to 15 notifications per session
• Fetch up to 50 recent purchases
• Only show event notification when 5+ people have signed up
• Show signups from the last 24 hours

├── backend/
│   ├── database.ts          # SQLite database setup and queries
│   ├── README.md            # Backend documentation
│   ├── routes/
│   │   ├── events.ts        # Event signup API endpoints
│   │   └── purchases.ts     # Purchase API endpoints
│   └── webhooks/
│       ├── events.ts        # Event signup webhook handler
│       └── purchase.ts      # Purchase webhook handler
├── frontend/
│   └── index.html           # Demo page
├── shared/
│   └── types.ts             # Shared TypeScript types
├── deno.json                # Deno configuration
├── index.ts                 # Main HTTP handler using Hono
├── script.js                # Embeddable notification script
└── README.md                # This documentation