What This Script Does

This script automatically displays real-time capacity information on your event pages. When someone views an event, it shows:

How many spots are remaining (with color-coded alerts)
When an event is full (with registration buttons hidden)
Dynamic updates as registrations come in

Before You Start

You'll need to gather 4 pieces of information from your Knack application:

Your App ID
The Scene Key (where your events are displayed)
The Field ID for maximum capacity
The Field ID for current registrations

Script Configuration Section

At the very top of the script, you'll see this section:

var CONFIG = `{`
  appId: '[Application ID]',     // Your unique Knack App ID
  sceneKey: 'scene_XX',                  // The scene where events are shown
  maxCapacityField: 'field_XX',          // Field storing max attendees
  currentRegsField: 'field_XX'           // Field storing current registrations
`}`;

How to Find These Values:

App ID:

Log into your Knack account
Go to Settings → API & Code
Copy the "Application ID" value
Replace [Application ID] with your App ID

Scene Key:

Navigate to the page with your event details
Look in the browser's address bar for something like /scene_XX/
Replace scene_XX with your scene number

Field IDs:

Go to your Events object in the Builder
Find your "Maximum Capacity" field
Click on it and note the field number (e.g., field_XX)
Do the same for your "Current Registrations" field
Replace the field numbers accordingly

Understanding the Main Components

1. Initialization & Timing

The script waits different amounts of time to ensure the page loads.

// The script waits different amounts of time to ensure the page loads
setTimeout(checkCapacity, 500);   // Checks after half a second
setTimeout(checkCapacity, 1000);  // Checks after 1 second
setTimeout(checkCapacity, 2000);  // Checks after 2 seconds
setTimeout(checkCapacity, 3000);  // Checks after 3 seconds

Why multiple checks? Pages load at different speeds, so we check multiple times to catch the content when it's ready.

2. Page Change Detection

window.addEventListener('hashchange', function() `{`
  // Resets when user navigates to a different event
`}`);

What this does: Detects when someone clicks to view a different event and resets the script to check the new event's capacity.

3. The Observer

function startObserver() `{`
  // Watches for changes on the page
`}`

Purpose: Continuously monitors the page for updates (like new registrations) and rechecks capacity when things change.

4. Capacity Checking Process

The script follows this sequence:

Confirms you're on an event page - Looks for an event ID in the URL
Finds the event details - Locates where event information is displayed
Fetches current data - Gets the latest registration numbers from your database
Calculates availability - Compares current registrations to maximum capacity
Displays the message - Shows appropriate message based on availability

5. Message Display Functions

When Event is Full:

function showFullMessage() `{`
  // Shows red "Event is full" banner
  // Hides registration buttons
`}`

When Spots Available:

function showSpotsMessage(spots) `{`
  // Shows green message (6+ spots)
  // Shows orange warning (5 or fewer spots)
`}`

Customization Options

Changing the Warning Threshold

Currently warns when 5 or fewer spots remain. To change this:

// Find this line:
var color = spots <= 5 ? '#ff9800' : '#4CAF50';
// Change the 5 to your preferred number
var color = spots <= 10 ? '#ff9800' : '#4CAF50';  // Now warns at 10 spots

Modifying Messages

Find these sections to customize what users see:

Full Event Message:

msg.innerHTML = '<strong>🚫 This event is full.</strong><br>Registration is closed.';
// Change to:
msg.innerHTML = '<strong>🚫 Sorry, we\'re at capacity!</strong><br>Join the waitlist below.';

Available Spots Message:

msg.innerHTML = '<strong>✓ ' + spots + ' ' + (spots === 1 ? 'spot' : 'spots') + ' remaining</strong><br>Register now before this event fills up!';
// Change to your preferred wording

Adjusting Colors

Green (plenty of spots): #4CAF50
Orange (few spots): #ff9800
Red (full): #f44336

To change, find the color codes and replace with your brand colors.

Installation Steps

Copy the entire script
Update the CONFIG section with your specific values
In Knack:
- Go to Settings → API & Code
- Click "JavaScript" tab
- Paste the script
- Click "Save"
Test on an event page to ensure it's working

Troubleshooting

Message Not Appearing?

Check that your field IDs are correct
Ensure the script is added to the correct page/scene
Look for JavaScript errors in the browser console (F12)

Wrong Capacity Numbers?

Verify your field IDs match the actual capacity and registration fields
Check that these fields contain numeric values

Registration Button Still Visible When Full?

The script looks for buttons with text like "Register", "Sign up", or "Enroll". If your button uses different text, add it to this section:

if (text === 'register' || text.indexOf('sign up') !== -1 || text.indexOf('enroll') !== -1) `{`
  // Add your button text here
`}`

Important Notes

The script runs automatically - no user action needed
It updates in real-time as registrations occur
Works on detail pages showing individual events
Requires your Knack app to have API access enabled

Security Reminder

This script uses read-only API access to check capacity. It cannot:

Modify registration data
Access private user information
Change event settings

Support

If you encounter issues:

Double-check all configuration values
Ensure you're on the correct scene/page
Verify your capacity fields contain numbers
Check that JavaScript is enabled in your Knack app

Remember: You're not breaking anything by experimenting! The worst that happens is the message doesn't appear, and you can always remove the script to return to normal operation.