Event Capacity Check

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:

1. Your App ID
2. The Scene Key (where your events are displayed)
3. The Field ID for maximum capacity
4. 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:

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

Scene Key:

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

Field IDs:

1. Go to your Events object in the Builder
2. Find your "Maximum Capacity" field
3. Click on it and note the field number (e.g., field_XX)
4. Do the same for your "Current Registrations" field
5. 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:

1. Confirms you're on an event page - Looks for an event ID in the URL
2. Finds the event details - Locates where event information is displayed
3. Fetches current data - Gets the latest registration numbers from your database
4. Calculates availability - Compares current registrations to maximum capacity
5. 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

1. Copy the entire script
2. Update the CONFIG section with your specific values
3. In Knack:
   • Go to Settings → API & Code
   • Click "JavaScript" tab
   • Paste the script
   • Click "Save"
4. 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:

1. Double-check all configuration values
2. Ensure you're on the correct scene/page
3. Verify your capacity fields contain numbers
4. 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.