Social Proof API

Display purchase or event signup toasts on your website.

\n\n

Event Signup Notifications

Send a webhook to increment the signup count for an event:

https://your-val.web.val.run/webhook/events/myAwesomeEvent

I'm sending a webhook with a CRM automation - the endpoint ignores the contents and only\n increments\n the signup count.

Show a notification for your event:

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

\n \n

\n\n

Purchase Notifications

Send a webhook to increment the purchase count for a product:

https://your-val.web.val.run/webhook/purchase

Show a notification for recent purchases:

\n <script src=\"https://your-val.web.val.run/script.js\" data-product-ids=\"product1,product2\"></script>\n \n

\n\n

Event Data For this Val

Loading events...

\n\n

Purchase Data For this Val

Not showing for this demo - remove code comments to show on your own remix!

\n \n

\n\n \n\n\n",[],[230,236],{"_103":244,"_96":245,"_158":246,"_160":231,"_161":141,"_162":163,"_164":118,"_105":247,"_100":32,"_166":184,"_168":248,"_169":22,"_170":-5,"_171":249,"_99":250},"7f79b252-8fe9-11f0-90c8-0224a6c84d84","js.js","01993e72-fe7f-7209-a73f-e83d3226466e",["D",1757689347651],"async function loadEvents() {\n try {\n console.log('Fetching events from:', '/api/events/signups');\n const response = await fetch('/api/events/signups');\n \n if (!response.ok) {\n if (response.status === 404) {\n if (globalThis.location.protocol === 'file:' || globalThis.location.hostname === 'localhost' || globalThis.location.hostname === '127.0.0.1') {\n throw new Error('Deploy to Val Town to see live data.');\n }\n }\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n \n const text = await response.text();\n let data;\n try {\n data = JSON.parse(text);\n } catch (parseError) {\n throw new Error(`Invalid JSON response: ${parseError.message}. Response: ${text.substring(0, 200)}...`);\n }\n\n const eventsList = document.getElementById('events-list');\n\n if (data.signups && data.signups.length > 0) {\n // Group signups by event name and count them\n const eventCounts = {};\n data.signups.forEach(signup => {\n eventCounts[signup.event_name] = (eventCounts[signup.event_name] || 0) + 1;\n });\n\n eventsList.innerHTML = `\n \n \n \n \n \n \n \n \n ${Object.entries(eventCounts)\n .sort(([, a], [, b]) => b - a)\n .map(([eventName, count]) =>\n `\n \n \n `\n ).join('')}\n \n

Event Name	Signups
${eventName}	${count}

\n `;\n } else {\n eventsList.innerHTML = '

Event stats will appear here when the first event is created

';\n }\n } catch (error) {\n document.getElementById('events-list').innerHTML = `

Error loading events: ${error.message}

`;\n }\n }\n\n async function loadPurchases() {\n try {\n console.log('Fetching purchases from:', '/api/purchases');\n const response = await fetch('/api/purchases');\n \n if (!response.ok) {\n if (response.status === 404) {\n if (globalThis.location.protocol === 'file:' || globalThis.location.hostname === 'localhost' || globalThis.location.hostname === '127.0.0.1') {\n throw new Error('Deploy to Val Town to see live data.');\n }\n }\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n \n const text = await response.text();\n let data;\n try {\n data = JSON.parse(text);\n } catch (parseError) {\n throw new Error(`Invalid JSON response: ${parseError.message}. Response: ${text.substring(0, 200)}...`);\n }\n\n const purchasesList = document.getElementById('purchases-list');\n\n if (data.purchases && data.purchases.length > 0) {\n // Group purchases by product and count them\n const productCounts = {};\n data.purchases.forEach(purchase => {\n const key = purchase.product_id;\n if (!productCounts[key]) {\n productCounts[key] = {\n count: 0,\n product_name: purchase.product_name,\n product_id: purchase.product_id\n };\n }\n productCounts[key].count++;\n });\n\n purchasesList.innerHTML = `\n \n \n \n \n \n \n \n \n \n ${Object.values(productCounts)\n .sort((a, b) => b.count - a.count)\n .map(productData => {\n return `\n \n \n \n `;\n }).join('')}\n \n

ID	Product	Purchases
${productData.product_id}	${productData.product_name}	${productData.count}

\n `;\n } else {\n purchasesList.innerHTML = '

Purchase stats will appear here when the first purchase is made

';\n }\n } catch (error) {\n document.getElementById('purchases-list').innerHTML = `

Error loading purchases: ${error.message}

`;\n }\n }\n\n loadEvents();\n loadPurchases();\n\n function showPurchaseNotification(duration = 5000, linkUrl = null) {\n let container = document.querySelector('.social-proof-container');\n if (!container) {\n container = document.createElement('div');\n container.className = 'social-proof-container bottom-left';\n document.body.appendChild(container);\n }\n\n // Set the duration for the border animation\n container.style.setProperty('--toast-duration', duration + 'ms');\n\n // Create notification with exact same structure as live version\n const notification = document.createElement('div');\n notification.className = 'social-proof-notification';\n notification.style.position = 'relative';\n\n notification.innerHTML = `\n \n \n `;\n\n notification.addEventListener('click', (e) => {\n // Don't navigate if clicking the close button\n if (e.target.classList.contains('social-proof-close')) {\n return;\n }\n \n if (linkUrl) {\n globalThis.location.href = linkUrl;\n }\n \n notification.remove();\n });\n\n container.appendChild(notification);\n\n // Trigger animation\n setTimeout(() => {\n notification.classList.add('show');\n }, 10);\n\n // Remove after specified duration with exit animation\n setTimeout(() => {\n // Add exit animation\n notification.style.transition = 'all 0.4s ease';\n notification.style.transform = 'translateY(100%) scale(1)';\n notification.style.opacity = '0';\n\n // Remove after animation completes\n setTimeout(() => {\n notification.remove();\n }, 400);\n }, duration);\n }\n\n function showEventSignupNotification(duration = 5000, linkUrl = null) {\n // Create container if it doesn't exist\n let container = document.querySelector('.social-proof-container');\n if (!container) {\n container = document.createElement('div');\n container.className = 'social-proof-container bottom-left';\n document.body.appendChild(container);\n }\n\n // Set the duration for the border animation\n container.style.setProperty('--toast-duration', duration + 'ms');\n\n // Create notification with exact same structure as live version\n const notification = document.createElement('div');\n notification.className = 'social-proof-notification';\n notification.style.position = 'relative';\n\n notification.innerHTML = `\n \n \n `;\n\n notification.addEventListener('click', (e) => {\n // Don't navigate if clicking the close button\n if (e.target.classList.contains('social-proof-close')) {\n return;\n }\n \n if (linkUrl) {\n globalThis.location.href = linkUrl;\n }\n \n notification.remove();\n });\n\n container.appendChild(notification);\n\n // Trigger animation\n setTimeout(() => {\n notification.classList.add('show');\n }, 10);\n\n // Remove after specified duration with exit animation\n setTimeout(() => {\n // Add exit animation\n notification.style.transition = 'all 0.4s ease';\n notification.style.transform = 'translateY(100%) scale(1)';\n notification.style.opacity = '0';\n\n // Remove after animation completes\n setTimeout(() => {\n notification.remove();\n }, 400);\n }, duration);\n }",[],[230,245],{"_103":252,"_96":253,"_158":254,"_160":231,"_161":141,"_162":163,"_164":118,"_105":255,"_100":32,"_166":239,"_168":256,"_169":22,"_170":-5,"_171":257,"_99":258},"7f79ba18-8fe9-11f0-90c8-0224a6c84d84","styles.css","01993e72-fe7f-7209-a73f-ef062349bdfe",["D",1757689347651],"h2:first-child:not(hgroup,blockquote,header) {\n margin-top: 0;\n}\n\npre {\n background: #f3f3f3;\n}\n\nsvg {\n fill: #000;\n}\n\n@media (prefers-color-scheme: dark) {\n pre {\n background-color: #303030 !important;\n }\n svg {\n fill: #fff;\n }\n}\n\n.social-proof-container {\n position: fixed;\n z-index: 9999;\n pointer-events: none;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.social-proof-container.bottom-left {\n bottom: 20px;\n left: 20px;\n}\n\n.social-proof-notification {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(0, 0, 0, 0.1);\n \n border-radius: 8px;\n padding: 12px 16px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n max-width: 350px;\n min-width: 300px;\n transform: translateY(100%) scale(1);\n opacity: 0;\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n pointer-events: auto;\n cursor: pointer;\n overflow: hidden;\n z-index: 1000;\n}\n\n.social-proof-notification.show {\n transform: translateY(0) scale(1);\n opacity: 1;\n}\n\n.social-proof-notification:hover {\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\n}\n\n.social-proof-notification::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, #667eea, #764ba2);\n transform: scaleX(1);\n transform-origin: left;\n transition: transform var(--toast-duration, 8s) linear;\n}\n\n.social-proof-notification.show::before {\n transform: scaleX(0);\n}\n\n.social-proof-header {\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.social-proof-icon {\n width: 32px;\n height: 32px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 12px;\n font-size: 16px;\n}\n\n.social-proof-content {\n flex: 1;\n}\n\n.social-proof-name {\n font-weight: 600;\n font-size: 14px;\n color: #1f2937;\n margin: 0;\n}\n\n.social-proof-action {\n font-size: 13px;\n color: #6b7280;\n margin: 2px 0 0 0;\n}\n\n.social-proof-product {\n font-weight: 500;\n color: #374151;\n}\n\n.social-proof-time {\n font-size: 12px;\n color: #9ca3af;\n margin-top: 4px;\n}\n\n.social-proof-close {\n position: absolute;\n top: 8px;\n right: 8px;\n background: none;\n border: none;\n font-size: 18px;\n color: #9ca3af;\n cursor: pointer;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: all 0.2s ease;\n}\n\n.social-proof-close:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #374151;\n}",[],[230,253],[230],{"_103":261,"_96":262,"_158":263,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":264,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":265,"_99":274},"7f79be8c-8fe9-11f0-90c8-0224a6c84d84","shared","01993e72-fe7f-7209-a73f-f92251e4ad69",["D",1757689347651],[266],{"_103":267,"_96":268,"_158":269,"_160":263,"_161":141,"_162":163,"_164":118,"_105":270,"_100":32,"_166":184,"_168":271,"_169":22,"_170":-5,"_171":272,"_99":273},"7f79bda6-8fe9-11f0-90c8-0224a6c84d84","types.ts","01993e72-fe7f-7209-a73f-f696cbd8a1a7",["D",1757689347651],"export interface ThriveCartWebhookPayload {\n event?: string;\n customer?: { first_name?: string };\n base_product_name?: string;\n base_product?: string;\n order?: { date_iso8601?: string };\n order_date?: string;\n}\n\nexport interface StripeWebhookPayload {\n object?: string;\n type?: string;\n data?: {\n object?: {\n id?: string;\n payment_status?: string;\n customer_details?: { name?: string };\n display_items?: Array<{\n custom?: { name?: string };\n description?: string;\n }>;\n created?: number;\n description?: string;\n billing_details?: { name?: string };\n customer_name?: string;\n metadata?: Record;\n };\n };\n}\n\n",[],[262,268],[262],{"_103":276,"_96":277,"_158":278,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":279,"_100":32,"_166":239,"_168":280,"_169":22,"_170":-5,"_171":281,"_99":282},"7f79bf72-8fe9-11f0-90c8-0224a6c84d84",".cursorrules","01993e72-fe7f-7209-a73f-fd098f23aa40",["D",1757689347651],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[277],{"_103":284,"_96":285,"_158":286,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":287,"_100":32,"_166":239,"_168":288,"_169":22,"_170":-5,"_171":289,"_99":290},"7f79cc1a-8fe9-11f0-90c8-0224a6c84d84",".vtignore","01993e72-fe7f-7209-a740-0027fcc126df",["D",1757689347651],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[285],{"_103":292,"_96":293,"_158":294,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":295,"_100":32,"_166":239,"_168":296,"_169":22,"_170":-5,"_171":297,"_99":298},"7f79cddc-8fe9-11f0-90c8-0224a6c84d84","README.md","01993e72-fe7f-7209-a740-0528f2924e61",["D",1757689347651],"# Social Proof Notification System\n\nDisplay purchase or event signup toasts on your website.\n\n## Features\n\n- **Purchase Notifications** - Show recent purchases with customer names and product details\n- **Event Signup Notifications** - Display signup counts for events\n- **Webhook Integration** - Send purchases via ThriveCart or Stripe webhooks\n\n## Quick Start\n\n### Purchase Notifications\n\nSend a webhook to `https://your-val.web.val.run/webhook/purchase`\n\n> Note: The endpoint currently accepts Stripe and ThriveCart webhooks\n\nAdd this script to your page with **product IDs** to show toasts for recent purchases:\n\n```html\n\n```\n\n### Event Signup Notifications\n\n`Send a webhook to `https://your-val.web.val.run/webhook/events/myAwesomeEvent` - replace `myAwesomeEvent` with your event name\n\n> Note: The endpoint ignores the webhook body, it just increments the event signup count by 1\n\nAdd this script with your event name to show a toast with current signup count:\n\n```html\n\n```\n\n## Configuration Options\n\n### Data Attributes\n\n| Attribute | Description | Default | Example |\n|-----------|-------------|---------|---------|\n| `data-product-ids` | Comma-separated product IDs to track | - | `\"product1,product2\"` |\n| `data-event-name` | Name of event to show signup count for | - | `\"Free Webinar 2025\"` |\n| `data-event-display-name` | Custom display name for the event | Auto-formatted from event name | `\"Amazing Workshop\"` |\n| `data-position` | Notification position | `\"bottom-left\"` | `\"top-right\"` |\n| `data-display-duration` | How long to show each notification in ms (min 1000, max 30000) | `5000` | `\"6000\"` |\n| `data-interval-delay` | Time between notifications (ms) | `10000` | `\"5000\"` |\n| `data-max-display-count` | Max notifications per session | `10` | `\"15\"` |\n| `data-limit` | Number of recent purchases to fetch | `20` | `\"50\"` |\n| `data-min-signups` | Minimum signups required to show notification | `1` | `\"5\"` |\n| `data-time-period-hours` | Show signups from last X hours | - | `\"2\"` |\n| `data-time-period-days` | Show signups from last X days | - | `\"3\"` |\n| `data-link-url` | URL to navigate to when toast is clicked | - | `\"https://example.com\"` |\n\n### Position Options\n\n- `bottom-left` (default)\n- `bottom-right`\n- `top-left`\n- `top-right`\n\n## Examples\n\n### Time Period Filtering\n\nShow signups from a specific time period:\n\n```html\n\n\n\n\n\n```\n\nThe notification will display text like \"In the last 2 hours\" or \"In the last 3 days\".\n\n### Events and Purchases Together\n\n```html\n\n```\n\n### Clickable Toasts\n\nMake toasts clickable by adding a link URL:\n\n```html\n\n```\n\n### Complete Configuration Example\n\nHere's an example with all available data attributes:\n\n```html\n\n```\n\nThis configuration will:\n- Track purchases for `course-123` and `ebook-456`\n- Show a one-time signup notification for the \"Summer Bootcamp 2025\" event\n- Show notifications in the bottom-right corner\n- Display each notification for 5 seconds\n- Show purchase notifications every 5 seconds\n- Show up to 15 notifications per session\n- Fetch up to 50 recent purchases\n- Only show event notification when 5+ people have signed up\n- Show signups from the last 24 hours\n\n\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database.ts # SQLite database setup and queries\n│ ├── README.md # Backend documentation\n│ ├── routes/\n│ │ ├── events.ts # Event signup API endpoints\n│ │ └── purchases.ts # Purchase API endpoints\n│ └── webhooks/\n│ ├── events.ts # Event signup webhook handler\n│ └── purchase.ts # Purchase webhook handler\n├── frontend/\n│ └── index.html # Demo page\n├── shared/\n│ └── types.ts # Shared TypeScript types\n├── deno.json # Deno configuration\n├── index.ts # Main HTTP handler using Hono\n├── script.js # Embeddable notification script\n└── README.md # This documentation\n```\n",[],[293],{"_103":300,"_96":301,"_158":302,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":303,"_100":32,"_166":239,"_168":304,"_169":22,"_170":-5,"_171":305,"_99":306},"7f79d2be-8fe9-11f0-90c8-0224a6c84d84","deno.json","01993e72-fe7f-7209-a740-092a9a54c387",["D",1757689347651],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[],[301],{"_103":308,"_96":309,"_158":116,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":310,"_100":32,"_166":311,"_168":312,"_169":22,"_170":-5,"_171":313,"_99":314},"7f79d3cc-8fe9-11f0-90c8-0224a6c84d84","index.ts",["D",1757689347651],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport * as Sentry from \"https://deno.land/x/sentry/index.mjs\";\nimport { initDatabase } from \"./backend/database.ts\";\nimport { handlePurchaseWebhook } from \"./backend/webhooks/purchase.ts\";\nimport { handleEventSignupWebhook } from \"./backend/webhooks/events.ts\";\nimport purchases from \"./backend/routes/purchases.ts\";\nimport events from \"./backend/routes/events.ts\";\n\nconst app = new Hono();\n\n// Initialize Sentry\nconst sentryDsn = Deno.env.get(\"SENTRY_DSN\");\nif (sentryDsn) {\n Sentry.init({\n dsn: sentryDsn,\n });\n} else {\n console.warn(\"SENTRY_DSN not found\");\n}\n\n// Enable CORS for cross-origin requests from websites\napp.use(\n \"*\",\n cors({\n origin: \"*\", // Allow requests from any origin\n allowMethods: [\"GET\", \"POST\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\"],\n }),\n);\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n throw err;\n});\n\n\nawait initDatabase();\n\n// A 200 response from GET is required to save a webhook in Thrivecart\napp.get(\"/webhook/purchase\", (c) => {\n return c.json({ success: true, message: \"Purchase webhook endpoint hit\" }, 200);\n});\n\napp.post(\"/webhook/purchase\", async (c) => {\n console.log(\"Purchase webhook endpoint hit\");\n try {\n const body = await c.req.json();\n console.log(\"Webhook received - platform:\", body.event || body.object || 'unknown');\n const result = await handlePurchaseWebhook(body);\n return c.json(result, 200);\n } catch (error) {\n console.error(\"Error processing purchase webhook:\", error);\n Sentry.captureException(error);\n return c.json({ success: true }, 200);\n }\n});\n\napp.post(\"/webhook/events/:eventName\", async (c) => {\n try {\n const eventName = c.req.param(\"eventName\");\n \n if (!eventName || \n eventName.length > 255 || \n eventName.length < 1 ||\n !/^[a-zA-Z0-9_-]+$/.test(eventName)) {\n return c.json({ success: true, ignored: true, reason: \"Invalid event name\" }, 200);\n }\n \n const result = await handleEventSignupWebhook(eventName);\n return c.json(result, 200);\n } catch (error) {\n console.error(\"Error processing event signup webhook:\", error);\n Sentry.captureException(error);\n return c.json({ success: true }, 200);\n }\n});\n\n// API routes\napp.route(\"/api/purchases\", purchases);\napp.route(\"/api/events\", events);\n\n// Serve static files using Val Town utilities\napp.get(\"/script.js\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve the frontend HTML with initial data injection\napp.get(\"/\", async (c) => {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html, 200);\n } catch (error) {\n console.error(\"Error reading frontend file:\", error);\n return c.json({ error: \"Frontend not available\" }, 500);\n }\n});\n\n// Test Sentry endpoint\napp.get(\"/test-sentry\", (c) => {\n if (sentryDsn) {\n Sentry.captureMessage(\"Test message for Sentry - this is intentional\", \"info\");\n return c.json({ success: true, message: \"Test message sent to Sentry\" });\n } else {\n return c.json({ success: false, message: \"Sentry DSN not configured - check SENTRY_DSN environment variable\" });\n }\n});\n\nexport default app.fetch;\n",[],[309],{"_103":316,"_96":317,"_158":318,"_160":-5,"_161":141,"_162":140,"_164":118,"_105":319,"_100":163,"_166":184,"_168":320,"_169":22,"_170":-5,"_171":321,"_99":322},"1edb23d8-9019-11f0-b1f4-0224a6c84d84","script.js","01993e72-fe7f-7209-a740-137add473ed5",["D",1757709801455],"(function () {\n \"use strict\";\n\n // Get the current script's src to determine API base URL\n const currentScript = document.currentScript;\n const API_BASE_URL = currentScript\n ? currentScript.src.replace(\"/script.js\", \"\")\n : \"\";\n\n // Configuration\n const DEFAULT_CONFIG = {\n displayDuration: 5000, // How long to show each notification\n intervalDelay: 10000, // Time between notifications\n maxDisplayCount: 10, // Max notifications to show per session\n position: \"bottom-left\", // Position of notifications\n limit: 20, // Number of recent purchases to fetch\n eventName: null, // Event name for signup notifications\n minSignups: 1, // Minimum number of signups required to show notification\n timePeriodHours: null, // Show signups from last X hours (null = all time)\n timePeriodDays: null, // Show signups from last X days (null = all time)\n linkUrl: null, // URL to link to when toast is clicked\n };\n\n let config = { ...DEFAULT_CONFIG };\n let displayCount = 0;\n const isActive = true;\n let notificationQueue = [];\n\n // Inject CSS styles for purchase notifications\n function injectStyles() {\n if (document.getElementById(\"social-proof-styles\")) return;\n\n const style = document.createElement(\"style\");\n style.id = \"social-proof-styles\";\n style.textContent = `\n /* Social Proof Notification Styles - Sonner Inspired */\n :root {\n --social-proof-gray1: hsl(0, 0%, 99%);\n --social-proof-gray2: hsl(0, 0%, 97.3%);\n --social-proof-gray3: hsl(0, 0%, 95.1%);\n --social-proof-gray4: hsl(0, 0%, 93%);\n --social-proof-gray5: hsl(0, 0%, 90.9%);\n --social-proof-gray6: hsl(0, 0%, 88.7%);\n --social-proof-gray7: hsl(0, 0%, 85.8%);\n --social-proof-gray8: hsl(0, 0%, 78%);\n --social-proof-gray9: hsl(0, 0%, 56.1%);\n --social-proof-gray10: hsl(0, 0%, 52.3%);\n --social-proof-gray11: hsl(0, 0%, 43.5%);\n --social-proof-gray12: hsl(0, 0%, 9%);\n --social-proof-bg: #ffffff;\n --social-proof-border: var(--social-proof-gray4);\n --social-proof-text: var(--social-proof-gray12);\n --social-proof-text-muted: var(--social-proof-gray9);\n --social-proof-border-radius: 8px;\n }\n \n .social-proof-container {\n position: fixed;\n z-index: 999999999;\n pointer-events: none;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n display: flex;\n flex-direction: column;\n gap: 8px;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n list-style: none;\n outline: none;\n transition: transform 400ms ease;\n }\n \n .social-proof-container.bottom-left {\n bottom: 20px;\n left: 20px;\n }\n \n .social-proof-container.bottom-right {\n bottom: 20px;\n right: 20px;\n }\n \n .social-proof-container.top-left {\n top: 20px;\n left: 20px;\n flex-direction: column-reverse;\n }\n \n .social-proof-container.top-right {\n top: 20px;\n right: 20px;\n flex-direction: column-reverse;\n }\n \n .social-proof-notification {\n --y: translateY(100%);\n --lift-amount: calc(var(--lift) * var(--gap));\n z-index: var(--z-index, 1000);\n position: relative;\n opacity: 0;\n transform: var(--y);\n filter: blur(0);\n touch-action: none;\n transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;\n box-sizing: border-box;\n outline: none;\n overflow-wrap: anywhere;\n background: var(--social-proof-bg) !important;\n border: 1px solid var(--social-proof-border) !important;\n color: var(--social-proof-text) !important;\n border-radius: var(--social-proof-border-radius);\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);\n width: 350px;\n font-size: 13px !important;\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif !important;\n font-weight: normal !important;\n line-height: normal !important;\n letter-spacing: normal !important;\n text-align: left !important;\n text-decoration: none !important;\n text-transform: none !important;\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 16px !important;\n margin: 0 !important;\n pointer-events: auto;\n cursor: pointer;\n overflow: hidden;\n list-style: none !important;\n text-indent: 0 !important;\n vertical-align: baseline !important;\n }\n \n .social-proof-container.top-left .social-proof-notification,\n .social-proof-container.top-right .social-proof-notification {\n --y: translateY(-100%);\n --lift: 1;\n --lift-amount: calc(1 * var(--gap));\n }\n \n .social-proof-notification.show {\n --y: translateY(0);\n opacity: 1;\n }\n \n .social-proof-notification.stack-1 {\n --scale: 0.95;\n --y: translateY(-8px) scale(calc(-1 * var(--scale)));\n height: var(--front-toast-height, auto);\n }\n \n .social-proof-notification.stack-2 {\n --scale: 0.9;\n --y: translateY(-16px) scale(calc(-1 * var(--scale)));\n height: var(--front-toast-height, auto);\n }\n \n .social-proof-notification.stack-3 {\n --scale: 0.85;\n --y: translateY(-24px) scale(calc(-1 * var(--scale)));\n height: var(--front-toast-height, auto);\n }\n \n .social-proof-notification:hover {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n }\n \n .social-proof-notification:focus-visible {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);\n }\n \n .social-proof-notification::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, #667eea, #764ba2);\n transform: scaleX(1);\n transform-origin: left;\n transition: transform var(--toast-duration, 5s) linear;\n }\n \n .social-proof-notification.show::before {\n transform: scaleX(0);\n }\n \n .social-proof-header {\n display: flex;\n align-items: center;\n gap: 6px;\n flex: 1;\n }\n \n .social-proof-icon {\n display: flex;\n height: 50px;\n width: 50px;\n position: relative;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n margin-left: -3px;\n margin-right: 12px;\n border-radius: 50%;\n overflow: hidden;\n }\n \n .social-proof-icon > * {\n flex-shrink: 0;\n }\n \n .social-proof-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n margin: 0 !important;\n padding: 0 !important;\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n }\n \n .social-proof-name {\n font-weight: 500 !important;\n line-height: 1.5 !important;\n color: var(--social-proof-text) !important;\n margin: 0 !important;\n padding: 0 !important;\n font-size: 13px !important;\n font-family: inherit !important;\n text-decoration: none !important;\n text-transform: none !important;\n letter-spacing: normal !important;\n text-align: left !important;\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n }\n \n .social-proof-action {\n font-weight: 400 !important;\n line-height: 1.4 !important;\n color: var(--social-proof-text) !important;\n margin: 0 !important;\n padding: 0 !important;\n font-size: 13px !important;\n font-family: inherit !important;\n text-decoration: none !important;\n text-transform: none !important;\n letter-spacing: normal !important;\n text-align: left !important;\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n display: inline !important;\n }\n \n .social-proof-product {\n font-weight: 600 !important;\n color: var(--social-proof-text) !important;\n text-decoration: none !important;\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n font-style: italic !important;\n text-transform: capitalize !important;\n letter-spacing: 0.025em !important;\n display: inline !important;\n font-size: inherit !important;\n line-height: inherit !important;\n }\n \n .social-proof-time {\n font-size: 12px !important;\n color: var(--social-proof-text-muted) !important;\n margin: 2px 0 0 0 !important;\n padding: 0 !important;\n font-family: inherit !important;\n font-weight: normal !important;\n line-height: normal !important;\n text-decoration: none !important;\n text-transform: none !important;\n letter-spacing: normal !important;\n text-align: left !important;\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n }\n \n .social-proof-close {\n display: none !important;\n }\n \n .social-proof-close:focus-visible {\n box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2) !important;\n }\n \n .social-proof-notification:hover .social-proof-close:hover {\n background: var(--social-proof-gray2) !important;\n border-color: var(--social-proof-gray5) !important;\n }\n \n /* Reset all inherited properties for all child elements */\n .social-proof-notification *,\n .social-proof-notification *::before,\n .social-proof-notification *::after {\n box-sizing: border-box !important;\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n vertical-align: baseline !important;\n text-decoration: none !important;\n word-spacing: normal !important;\n text-shadow: none !important;\n box-shadow: none !important;\n background: transparent !important;\n outline: none !important;\n list-style: none !important;\n quotes: none !important;\n content: none !important;\n text-indent: 0 !important;\n direction: ltr !important;\n unicode-bidi: normal !important;\n writing-mode: horizontal-tb !important;\n text-rendering: auto !important;\n color: inherit !important;\n font-family: inherit !important;\n text-align: inherit !important;\n }\n \n /* Specific resets for common elements */\n .social-proof-notification div,\n .social-proof-notification span,\n .social-proof-notification p,\n .social-proof-notification a,\n .social-proof-notification button {\n background: transparent !important;\n border: none !important;\n box-shadow: none !important;\n text-decoration: none !important;\n color: inherit !important;\n font-family: inherit !important;\n text-align: inherit !important;\n margin: 0 !important;\n padding: 0 !important;\n outline: none !important;\n appearance: none !important;\n -webkit-appearance: none !important;\n -moz-appearance: none !important;\n cursor: inherit !important;\n }\n \n .social-proof-notification img {\n display: block !important;\n max-width: 100% !important;\n height: auto !important;\n border: none !important;\n outline: none !important;\n background: transparent !important;\n box-shadow: none !important;\n margin: 0 !important;\n padding: 0 !important;\n vertical-align: top !important;\n }\n \n @media (max-width: 600px) {\n .social-proof-container {\n position: fixed;\n right: 20px;\n left: 20px;\n width: 100%;\n }\n \n .social-proof-notification {\n left: 0;\n right: 0;\n width: calc(100% - 40px);\n }\n }\n \n @media (prefers-reduced-motion) {\n .social-proof-notification,\n .social-proof-notification > * {\n transition: none !important;\n animation: none !important;\n }\n }\n `;\n\n document.head.appendChild(style);\n }\n\n // Create notification container\n function createNotificationContainer() {\n let container = document.getElementById(\"social-proof-container\");\n if (container) return container;\n\n container = document.createElement(\"div\");\n container.id = \"social-proof-container\";\n container.className = `social-proof-container ${config.position}`;\n document.body.appendChild(container);\n\n return container;\n }\n\n // Sanitize HTML\n function sanitizeHtml(str) {\n if (typeof str !== \"string\") return \"\";\n\n return str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\")\n .replace(/\\//g, \"/\")\n .substring(0, 1000); // Length limit\n }\n\n // Validate and sanitize config\n function validateConfig(config) {\n const sanitized = { ...config };\n\n const validPositions = [\n \"bottom-left\",\n \"bottom-right\",\n \"top-left\",\n \"top-right\",\n ];\n sanitized.position = validPositions.includes(config.position)\n ? config.position\n : \"bottom-left\";\n\n sanitized.displayDuration = Math.max(\n 1000,\n Math.min(30000, parseInt(config.displayDuration) || 5000),\n );\n sanitized.intervalDelay = Math.max(\n 1000,\n Math.min(60000, parseInt(config.intervalDelay) || 10000),\n );\n sanitized.maxDisplayCount = Math.max(\n 1,\n Math.min(50, parseInt(config.maxDisplayCount) || 10),\n );\n sanitized.limit = Math.max(1, Math.min(100, parseInt(config.limit) || 20));\n sanitized.minSignups = Math.max(\n 1,\n Math.min(1000, parseInt(config.minSignups) || 1),\n );\n sanitized.timePeriodHours = config.timePeriodHours\n ? Math.max(1, Math.min(8760, parseInt(config.timePeriodHours)))\n : null;\n sanitized.timePeriodDays = config.timePeriodDays\n ? Math.max(1, Math.min(365, parseInt(config.timePeriodDays)))\n : null;\n\n sanitized.eventName =\n config.eventName && /^[a-zA-Z0-9_-]{1,255}$/.test(config.eventName)\n ? config.eventName\n : null;\n\n sanitized.eventDisplayName = config.eventDisplayName\n ? config.eventDisplayName.replace(/[<>'\"&]/g, \"\").substring(0, 255)\n : null;\n\n // Validate and sanitize link URL\n if (config.linkUrl && typeof config.linkUrl === \"string\") {\n // Basic URL validation and sanitization\n const cleanUrl = config.linkUrl.trim();\n if (cleanUrl.length > 0 && cleanUrl.length <= 2048) {\n sanitized.linkUrl = cleanUrl;\n }\n }\n\n return sanitized;\n }\n\n // Validate and sanitize product IDs\n function validateProductIds(productIdsString) {\n if (!productIdsString || typeof productIdsString !== \"string\") {\n return [];\n }\n\n const ids = productIdsString.split(\",\").map((id) => {\n const trimmed = id.trim();\n return /^[a-zA-Z0-9_-]+$/.test(trimmed) ? trimmed : null;\n }).filter((id) => id !== null && id.length > 0 && id.length <= 255);\n\n return ids;\n }\n\n // Format time ago\n function formatTimeAgo(dateString) {\n const date = new Date(dateString);\n const now = new Date();\n const diffInSeconds = Math.floor((now - date) / 1000);\n\n if (diffInSeconds < 60) return \"just now\";\n if (diffInSeconds < 3600) {\n return `${Math.floor(diffInSeconds / 60)} minutes ago`;\n }\n if (diffInSeconds < 86400) {\n return `${Math.floor(diffInSeconds / 3600)} hours ago`;\n }\n return `${Math.floor(diffInSeconds / 86400)} days ago`;\n }\n\n // Create purchase notification element\n function createPurchaseNotification(purchase) {\n const notification = document.createElement(\"div\");\n notification.className = \"social-proof-notification\";\n notification.style.position = \"relative\";\n\n const timeAgo = formatTimeAgo(purchase.purchase_time);\n\n notification.innerHTML = `\n \n \n \n `;\n\n // Add click handler - either close notification or navigate to link\n notification.addEventListener(\"click\", (e) => {\n // Don't navigate if clicking the close button\n if (e.target.classList.contains(\"social-proof-close\")) {\n return;\n }\n\n // If link is configured, navigate to it\n if (config.linkUrl) {\n globalThis.location.href = config.linkUrl;\n }\n\n // Always close the notification after click\n hideNotification(notification);\n });\n\n return notification;\n }\n\n // Create event signup notification element\n function createEventSignupNotification(\n eventName,\n signupCount,\n firstSignupTime,\n ) {\n const notification = document.createElement(\"div\");\n notification.className = \"social-proof-notification\";\n notification.style.position = \"relative\";\n\n // Calculate time period from first signup timestamp\n let timePeriodText = \"just now\";\n if (firstSignupTime) {\n try {\n const now = new Date();\n // Parse the UTC timestamp properly by adding 'Z' to indicate UTC\n const firstSignup = new Date(firstSignupTime + \"Z\");\n const diffMs = now - firstSignup;\n const diffMinutes = Math.floor(diffMs / (1000 * 60));\n const diffHours = Math.floor(diffMs / (1000 * 60 * 60));\n const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));\n\n if (diffMinutes < 60) {\n timePeriodText = `in the last ${diffMinutes} minute${\n diffMinutes !== 1 ? \"s\" : \"\"\n }`;\n } else if (diffHours < 24) {\n timePeriodText = `in the last ${diffHours} hour${\n diffHours !== 1 ? \"s\" : \"\"\n }`;\n } else {\n timePeriodText = `in the last ${diffDays} day${\n diffDays !== 1 ? \"s\" : \"\"\n }`;\n }\n } catch (error) {\n console.error(\"Error calculating time period:\", error);\n timePeriodText = \"recently\";\n }\n }\n\n // Use custom display name if provided, otherwise format the event name\n const formattedEventName = config.eventDisplayName || eventName\n .replace(/([A-Z])/g, \" $1\") // Add space before capital letters\n .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter\n .replace(/\\b\\w/g, (l) => l.toUpperCase()) // Capitalize each word\n .trim();\n\n notification.innerHTML = `\n \n \n \n `;\n\n // Add click handler - either close notification or navigate to link\n notification.addEventListener(\"click\", (e) => {\n // Don't navigate if clicking the close button\n if (e.target.classList.contains(\"social-proof-close\")) {\n return;\n }\n\n // If link is configured, navigate to it\n if (config.linkUrl) {\n globalThis.location.href = config.linkUrl;\n }\n\n // Always close the notification after click\n hideNotification(notification);\n });\n\n return notification;\n }\n\n // Stack existing notifications\n function stackNotifications(container) {\n const notifications = container.querySelectorAll(\n \".social-proof-notification\",\n );\n notifications.forEach((notification, index) => {\n // Remove any existing stack classes\n notification.classList.remove(\"stack-1\", \"stack-2\", \"stack-3\");\n\n // Ensure all notifications have the show class for transitions\n notification.classList.add(\"show\");\n\n if (index === notifications.length - 1) {\n // Latest notification - full size and position (uses .show class)\n notification.style.zIndex = \"1000\";\n } else {\n // Previous notifications - add appropriate stack class\n const stackLevel = notifications.length - 1 - index;\n if (stackLevel <= 3) {\n notification.classList.add(`stack-${stackLevel}`);\n } else {\n // For more than 3 notifications, use inline styles for deeper stacking\n const offset = stackLevel * 8;\n const scale = Math.max(0.9 - stackLevel * 0.1, 0.7);\n notification.style.transform =\n `translateY(-${offset}px) scale(${scale})`;\n }\n notification.style.zIndex = (1000 - index).toString();\n }\n });\n }\n\n // Show purchase notification\n function showPurchaseNotification(purchase) {\n if (!isActive || displayCount >= config.maxDisplayCount) return;\n\n const container = createNotificationContainer();\n\n // Set the duration for the border animation\n container.style.setProperty(\n \"--toast-duration\",\n config.displayDuration + \"ms\",\n );\n\n const notification = createPurchaseNotification(purchase);\n\n container.appendChild(notification);\n\n // Trigger show animation\n setTimeout(() => {\n notification.classList.add(\"show\");\n // Stack all notifications after the new one is shown\n stackNotifications(container);\n }, 10);\n\n displayCount++;\n\n // Auto-hide after duration\n setTimeout(() => {\n hideNotification(notification);\n }, config.displayDuration);\n }\n\n // Show event signup notification\n function showEventSignupNotification(\n eventName,\n signupCount,\n firstSignupTime,\n ) {\n if (!isActive || displayCount >= config.maxDisplayCount) return;\n\n const container = createNotificationContainer();\n\n // Set the duration for the border animation\n container.style.setProperty(\n \"--toast-duration\",\n config.displayDuration + \"ms\",\n );\n\n const notification = createEventSignupNotification(\n eventName,\n signupCount,\n firstSignupTime,\n );\n\n container.appendChild(notification);\n\n // Trigger show animation\n setTimeout(() => {\n notification.classList.add(\"show\");\n // Stack all notifications after the new one is shown\n stackNotifications(container);\n }, 10);\n\n displayCount++;\n\n // Auto-hide after duration\n setTimeout(() => {\n hideNotification(notification);\n }, config.displayDuration);\n }\n\n // Hide notification\n function hideNotification(notification) {\n // Add smooth exit animation\n notification.style.transition = \"all 0.4s ease\";\n notification.style.transform = \"translateY(100%) scale(1)\";\n notification.style.opacity = \"0\";\n\n // Remove after animation completes\n setTimeout(() => {\n if (notification.parentElement) {\n const container = notification.parentElement;\n notification.remove();\n // Restack remaining notifications\n stackNotifications(container);\n }\n }, 400);\n }\n\n // Fetch recent purchases\n async function fetchRecentPurchases(productIds) {\n try {\n const productIdsParam = Array.isArray(productIds)\n ? productIds.join(\",\")\n : productIds;\n const response = await fetch(\n `${API_BASE_URL}/api/purchases/recent?product_ids=${\n encodeURIComponent(productIdsParam)\n }&limit=${config.limit}`,\n );\n\n if (!response.ok) throw new Error(\"Failed to fetch purchases\");\n\n const data = await response.json();\n return data.purchases || [];\n } catch (error) {\n console.error(\"Error fetching recent purchases:\", error);\n return [];\n }\n }\n\n // Fetch event signup data (count and first signup time)\n async function fetchEventSignupData(eventName) {\n try {\n if (\n !eventName || typeof eventName !== \"string\" || eventName.length > 255\n ) {\n console.warn(\"Invalid event name provided:\", eventName);\n return { signupCount: 0, firstSignupTime: null };\n }\n\n let url = `${API_BASE_URL}/api/events/${\n encodeURIComponent(eventName)\n }/signups`;\n\n // Use time period API if configured\n if (config.timePeriodHours || config.timePeriodDays) {\n url = `${API_BASE_URL}/api/events/${\n encodeURIComponent(eventName)\n }/signups/period`;\n const params = new URLSearchParams();\n if (config.timePeriodHours) {\n params.append(\"hours\", config.timePeriodHours.toString());\n }\n if (config.timePeriodDays) {\n params.append(\"days\", config.timePeriodDays.toString());\n }\n url += `?${params.toString()}`;\n }\n\n const response = await fetch(url);\n\n if (!response.ok) {\n if (response.status === 400) {\n console.warn(\"Invalid event name or request:\", eventName);\n } else {\n console.error(\n \"Failed to fetch event signup data:\",\n response.status,\n response.statusText,\n );\n }\n return { signupCount: 0, firstSignupTime: null };\n }\n\n const data = await response.json();\n return {\n signupCount: data.signupCount || 0,\n firstSignupTime: data.firstSignupTime || null,\n };\n } catch (error) {\n console.error(\"Error fetching event signup data:\", error);\n return { signupCount: 0, firstSignupTime: null };\n }\n }\n\n // Show one-time event signup notification on page load\n async function showEventSignupOnLoad(eventName) {\n try {\n const { signupCount, firstSignupTime } = await fetchEventSignupData(\n eventName,\n );\n\n if (signupCount >= config.minSignups) {\n // Wait 5 seconds before showing the notification\n setTimeout(() => {\n showEventSignupNotification(eventName, signupCount, firstSignupTime);\n }, 5000);\n }\n } catch (error) {\n console.error(\"Error fetching event signup data on load:\", error);\n }\n }\n\n // Start showing purchase notifications\n function startPurchaseNotifications(productIds) {\n if (!productIds || !isActive) return;\n\n fetchRecentPurchases(productIds).then((purchases) => {\n if (purchases.length === 0) return;\n\n // Shuffle and queue purchases\n const shuffled = [...purchases].sort(() => 0.5 - Math.random());\n notificationQueue = shuffled.slice(0, config.maxDisplayCount);\n\n // Show first notification after initial delay\n setTimeout(() => {\n showNextPurchaseNotification();\n }, Math.random() * 3000 + 2000); // 2-5 seconds initial delay\n });\n }\n\n // Show next purchase notification in queue\n function showNextPurchaseNotification() {\n if (\n !isActive || notificationQueue.length === 0 ||\n displayCount >= config.maxDisplayCount\n ) {\n return;\n }\n\n const purchase = notificationQueue.shift();\n showPurchaseNotification(purchase);\n\n // Schedule next notification\n if (notificationQueue.length > 0 && displayCount < config.maxDisplayCount) {\n setTimeout(showNextPurchaseNotification, config.intervalDelay);\n }\n }\n\n // Initialize social proof\n function initSocialProof() {\n injectStyles();\n\n // Look for configuration in script tag or data attributes\n const scriptTag = document.querySelector('script[src*=\"script.js\"]');\n if (scriptTag) {\n const productIds = scriptTag.getAttribute(\"data-product-ids\");\n const eventName = scriptTag.getAttribute(\"data-event-name\");\n const position = scriptTag.getAttribute(\"data-position\");\n const displayDuration = scriptTag.getAttribute(\"data-display-duration\");\n const intervalDelay = scriptTag.getAttribute(\"data-interval-delay\");\n const maxDisplayCount = scriptTag.getAttribute(\"data-max-display-count\");\n const limit = scriptTag.getAttribute(\"data-limit\");\n const minSignups = scriptTag.getAttribute(\"data-min-signups\");\n const timePeriodHours = scriptTag.getAttribute(\"data-time-period-hours\");\n const timePeriodDays = scriptTag.getAttribute(\"data-time-period-days\");\n const eventDisplayName = scriptTag.getAttribute(\n \"data-event-display-name\",\n );\n const linkUrl = scriptTag.getAttribute(\"data-link-url\");\n\n // Update config with validation\n const newConfig = { ...config };\n if (position) newConfig.position = position;\n if (displayDuration) {\n newConfig.displayDuration = parseInt(displayDuration);\n }\n if (intervalDelay) newConfig.intervalDelay = parseInt(intervalDelay);\n if (maxDisplayCount) {\n newConfig.maxDisplayCount = parseInt(maxDisplayCount);\n }\n if (limit) newConfig.limit = parseInt(limit);\n if (minSignups) newConfig.minSignups = parseInt(minSignups);\n if (eventName) newConfig.eventName = eventName;\n if (timePeriodHours) {\n newConfig.timePeriodHours = parseInt(timePeriodHours);\n }\n if (timePeriodDays) newConfig.timePeriodDays = parseInt(timePeriodDays);\n if (eventDisplayName) newConfig.eventDisplayName = eventDisplayName;\n if (linkUrl) newConfig.linkUrl = linkUrl;\n\n // Validate and apply sanitized config\n config = validateConfig(newConfig);\n\n // Start purchase notifications if product IDs are provided\n if (productIds) {\n const validatedProductIds = validateProductIds(productIds);\n if (validatedProductIds.length > 0) {\n startPurchaseNotifications(validatedProductIds);\n }\n }\n\n // Show one-time event signup notification if event name is provided\n if (eventName) {\n showEventSignupOnLoad(eventName);\n }\n }\n }\n\n // Initialize when DOM is ready\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", initSocialProof);\n } else {\n initSocialProof();\n }\n})();",[],[317],"files",[155,173,179,188,197,203,210,219,228,234,243,251,260,266,275,283,291,299,307,315],"counts",{"_327":32,"_328":163,"_329":32,"_330":331},"pulls","branches","forks","envVars",{"_332":163,"_333":32},"count","emptyCount","contents",[336,339,342,345,348,351,354,357,360],{"_103":156,"_96":157,"_158":159,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":337,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":338},["D",1757689347651],[157],{"_103":229,"_96":230,"_158":231,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":340,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":341},["D",1757689347651],[230],{"_103":261,"_96":262,"_158":263,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":343,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_99":344},["D",1757689347651],[262],{"_103":276,"_96":277,"_158":278,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":346,"_100":32,"_166":239,"_168":280,"_169":22,"_170":-5,"_99":347},["D",1757689347651],[277],{"_103":284,"_96":285,"_158":286,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":349,"_100":32,"_166":239,"_168":288,"_169":22,"_170":-5,"_99":350},["D",1757689347651],[285],{"_103":292,"_96":293,"_158":294,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":352,"_100":32,"_166":239,"_168":296,"_169":22,"_170":-5,"_99":353},["D",1757689347651],[293],{"_103":300,"_96":301,"_158":302,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":355,"_100":32,"_166":239,"_168":304,"_169":22,"_170":-5,"_99":356},["D",1757689347651],[301],{"_103":308,"_96":309,"_158":116,"_160":-5,"_161":141,"_162":163,"_164":118,"_105":358,"_100":32,"_166":311,"_168":312,"_169":22,"_170":-5,"_99":359},["D",1757689347651],[309],{"_103":316,"_96":317,"_158":318,"_160":-5,"_161":141,"_162":140,"_164":118,"_105":361,"_100":163,"_166":184,"_168":320,"_169":22,"_170":-5,"_99":362},["D",1757709801455],[317],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history",{"_94":95,"_96":97,"_98":44,"_101":371,"_376":32,"_377":378,"_500":22},{"_103":104,"_96":97,"_105":372,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":118,"_120":-5,"_121":32,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":373,"_135":374,"_138":375,"_152":22},["D",1757689347651],{"_94":95,"_133":134},{"_94":95,"_137":134,"_14":114},{"_100":140,"_96":44,"_103":141,"_142":104,"_143":-5,"_144":-5,"_145":146,"_147":148,"_149":122,"_150":97,"_151":95},"page","history",[379,393],{"_103":380,"_161":141,"_105":381,"_100":140,"_16":122,"_160":382,"_383":-5,"_23":384,"_239":385,"_386":-5,"_387":-5,"_388":-5,"_389":-5,"_390":391},"1edd6260-9019-11f0-b1f4-0224a6c84d84",["D",1757709801455],"7f7ccba4-8fe9-11f0-90c8-0224a6c84d84","incomingCommitId",{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":318,"_96":317,"_166":184},"pull","merge","revert","multiple","commits",[392],{"_103":380,"_161":141,"_105":381,"_100":140,"_16":122,"_160":382,"_383":-5,"_23":384,"_239":385,"_386":-5,"_387":-5,"_388":-5},{"_103":382,"_161":141,"_105":394,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":396,"_239":397,"_386":-5,"_387":398,"_388":-5,"_389":401,"_390":403},["D",1757689347651],"75d0c628-8fe9-11f0-bf23-0224a6c84d84",{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":286,"_96":285,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},"93055b86-813a-11f0-bb46-0224a6c84d84",134,{"_332":402},20,[404,405,410,415,420,425,430,435,440,445,450,455,460,465,470,475,480,485,490,495],{"_103":382,"_161":141,"_105":394,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":396,"_239":397,"_386":-5,"_387":398,"_388":-5},{"_103":382,"_161":141,"_105":406,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":407,"_239":408,"_386":-5,"_387":409,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":269,"_96":268,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":411,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":412,"_239":413,"_386":-5,"_387":414,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":254,"_96":253,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":416,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":417,"_239":418,"_386":-5,"_387":419,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":263,"_96":262,"_166":167},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":421,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":422,"_239":423,"_386":-5,"_387":424,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":318,"_96":317,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":426,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":427,"_239":428,"_386":-5,"_387":429,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":176,"_96":175,"_166":167},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":431,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":432,"_239":433,"_386":-5,"_387":434,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":294,"_96":293,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":436,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":437,"_239":438,"_386":-5,"_387":439,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":213,"_96":212,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":441,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":442,"_239":443,"_386":-5,"_387":444,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":191,"_96":190,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":446,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":447,"_239":448,"_386":-5,"_387":449,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":200,"_96":199,"_166":167},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":451,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":452,"_239":453,"_386":-5,"_387":454,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":116,"_96":309,"_166":311},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":456,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":457,"_239":458,"_386":-5,"_387":459,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":237,"_96":236,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":461,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":462,"_239":463,"_386":-5,"_387":464,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":231,"_96":230,"_166":167},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":466,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":467,"_239":468,"_386":-5,"_387":469,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":205,"_96":181,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":471,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":472,"_239":473,"_386":-5,"_387":474,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":182,"_96":181,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":476,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":477,"_239":478,"_386":-5,"_387":479,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":302,"_96":301,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":481,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":482,"_239":483,"_386":-5,"_387":484,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":222,"_96":221,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":486,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":487,"_239":488,"_386":-5,"_387":489,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":278,"_96":277,"_166":239},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":491,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":492,"_239":493,"_386":-5,"_387":494,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":159,"_96":157,"_166":167},{"_161":399,"_96":44,"_100":400,"_107":-5},{"_103":382,"_161":141,"_105":496,"_100":163,"_16":122,"_160":-5,"_383":395,"_23":497,"_239":498,"_386":-5,"_387":499,"_388":-5},["D",1757689347651],{"_103":114,"_16":122,"_94":95,"_137":134},{"_158":246,"_96":245,"_166":184},{"_161":399,"_96":44,"_100":400,"_107":-5},"hasNext","actionData","errors"]

Jamesllllllllll

social-proof

History