Building a Social Proof Notification System with Val.town

Back in August, I wrote about building a Likes Tracking API with Val.town. Val.town makes it very simple to spin up small, useful APIs.

This time, I wanted to push it a little further. I wanted to see if I could re-implement a social proof app web use in our business to generate excitement and a sense of urgency on sales pages.

If you've been reading for more than 5 seconds, then you've seen it in action on this page!

How It Works

The system shows activity as toast notifications. When someone visits your page, they see messages like:

  • "Sarah from New York just purchased the Premium Course"
  • "47 people signed up for the Free Webinar in the last 2 hours"

These appear as toast messages in the corner of the screen.

The Architecture

The system runs on Val.town's Deno runtime using the Hono framework. Just like the Likes API, it's minimal but gets the job done:

  • SQLite storage for purchases and event signups
  • Webhook endpoints for ThriveCart and Stripe
  • API routes for fetching recent activity
  • Embeddable script that displays toast notifications on any site

Features

  • 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. I'm sending event signups as a webhook from our CRM automation.

Why It's Cool

I love how simple the implementation is. You just drop in a script tag on any page you want it to appear. Include data attributes for the event name or products you want to show notifications for, and there are more attributes you can add to customize the notifications.

Quick Start

You can "Remix" the Val from it's project page: https://www.val.town/x/Jamesllllllllll/social-proof

You will get your own custom base url for your new val, like this: https://your-username-UUID.web.val.run - use that as the base URL for sending webhooks and adding your script to webpages.

Purchase Notifications

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>

Event Signup Notifications

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.val.run/script.js"
  data-event-name="myAwesomeEvent"
  data-event-display-name="My Awesome Event">
</script>

Configuration Options

You can customize the behavior by adding data attributes to the script tag. Options include positioning, timing, display duration, clickable links, and time period filtering.

Examples

Time Period Filtering

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

Events and Purchases Together

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

Clickable Toasts

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>

Technical Details

The system uses webhooks to receive data from platforms like ThriveCart and Stripe. When someone makes a purchase or signs up, the webhook hits the Val.town endpoint, stores the data in SQLite, and the script will fetch current data to display toasts.

You can check out the Val.town project to see the full implementation and remix it for your own use. The entire system is open source and ready to go!

Building a Social Proof Notification System with Val.town - James Keezer