Creative In/Out™ Documentation

Product Overview

Creative In/Out™ is an employee presence board for businesses of any size. It shows who is In, Out, or Away at a glance — from any browser, on any device, with no app to install and no per-seat fees. It also doubles as a built-in company directory with photos, phone numbers, and email accessible from every person's card.

Key Features

• Three statuses: In, Out, and a customizable third status (Away, Lunch, WFH, Remote, etc.)
• Built-in company directory: Photos, direct lines, cell numbers, and email — one click from any status card
• Notes & quick presets: Each person can have a short note. Admins define common presets for one-tap entry
• Optional PIN authentication: 4-digit PINs identify who makes each change and ensure employees can only update their own status. Can be turned on or off.
• Company Access Code: Optional 4-digit code required to view the public board — keeps the board private from anyone who stumbles across the URL. Stored locally on each device once entered. Change it any time to re-prompt all users.
• Admin panel: Full management of people, settings, and configuration
• CSV export: Point-in-time snapshot for attendance records or HR documentation
• Auto-Out: Automatically marks everyone still In as Out at a set time each day (requires cron job)
• Light/dark theme: Toggle between modes per browser
• Mobile friendly & PWA: Fully responsive, can be added to phone home screen

What It Is Not

Creative In/Out is a presence board, not a time clock or payroll system. It does not track hours worked or integrate directly with payroll software. The optional Time Clock Reminder can prompt employees to clock in/out of a separate system when they change their status.

Installation Guide

Requirements

• Web server with PHP 7.4 or higher
• Write permissions on the installation directory
• OpenSSL extension enabled (standard on most hosts including Dreamhost)

Files Included

Installation Steps

1. 1
   Upload all files to a directory on your web server via FTP or SFTP. A dedicated subdirectory is recommended — e.g. yourdomain.com/inout/ or a subdomain like board.yourdomain.com.
2. 2
   Set directory permissions to 755. PHP needs write access to create inout-data.json.
3. 3
   Create an images/ folder in the same directory and set its permissions to 755. This is where staff photos will be stored.
4. 4
   Rename htaccess.txt to .htaccess (note the leading dot). This activates security headers and prevents search engines from indexing your board. Required for Apache hosting including Dreamhost.
5. 5
   Visit the board in your browser. On first load, PHP creates inout-data.json with sample data automatically.
6. 6
   Proceed to First-Time Setup — see Section 3.

Dreamhost-Specific Notes

• PHP is available by default — no configuration needed
• The installation directory needs write permissions (755)
• If you see "Could not load board data", confirm inout-data.php and license-validator.php are both uploaded to the same directory

First-Time Setup

Accessing Admin

Click the Creative In/Out logo icon in the top-left corner of the public board, or navigate directly to inout-admin.html. On first load with no admins configured, you will see a setup banner and can access admin freely to create your first admin user.

Creating Your First Admin

1. 1
   Click Add in the settings bar
2. 2
   Fill in the person's name and set a 4-digit PIN
3. 3
   Check the Global Admin checkbox
4. 4
   Click Save

Once an admin exists, the admin panel will require a PIN to access on every visit.

Recommended Setup Order

1. Set your Brand name — replaces "Creative" in the header. Max 20 characters.
2. Set your Group Label (Division, Department, Location, Team, etc.)
3. Configure your Divisions/Departments and assign colors
4. Add all your people — replace the sample data with actual staff
5. Configure settings (Away label, presets, PIN requirement, etc.)
6. Activate your license — see Section 6
7. If using Auto-Out, set up the cron job — see Section 7

Admin Panel Guide

Navigate to inout-admin.html and enter your 4-digit admin PIN. The admin panel shows the same board as the public view with additional controls for each person and a settings panel at the top.

Settings Panel

Click Expand on the stats bar to open settings. Click Collapse ▲ at the bottom to close.

Row 1 — People & Board Controls

• Add — Add a new person to the board
• CSV — Download current board state as a spreadsheet (Name, Division, Role, Status, Note, Phones, Email, Last Changed)
• Default Sort — Public board default sort (Name A-Z, Division, Status, Most Recent)
• Brand — Company name in the board header. Max 20 characters. Click Save.

Row 2 — Behavior Settings

• Auto-Out — Set a daily time to mark everyone still In as Out. Requires cron job setup — see Section 7.
• Require PIN? — When checked, all status changes require a PIN. Ships disabled. Cannot be enabled until every person has a PIN assigned — a warning will show a clickable list of people missing PINs. Once all PINs are assigned, PIN requirement enables automatically.
• Time Clock Reminder — Shows a reminder popup on status changes to clock in/out of a separate system.

Row 3 — Company Access Code

Sets a 4-digit numeric code that must be entered before the public board loads. Once entered correctly on a device it is stored locally and not asked again. Leave blank to disable. Change the code any time — all devices will be prompted on their next visit.

Recommended if your board URL could be discovered by people outside your organization, or if you run the board with PIN authentication turned off.

Row 4 — Labels

• Group Label — What to call your groups: Division, Department, Location, Team, etc. Click Save.
• Away Label — Rename the third status. Default: Away. Examples: Lunch, WFH, Remote, Break. Max 6 characters. Click Save.

Row 5 — Quick-Note Presets

Define common notes for one-tap entry on the board. Type a preset and click + Add. Click the pencil icon to edit, × to remove, and the drag handle to reorder.

Row 6 — License

Shows current license status. Paste your license key and click Activate. Once licensed, the key is shown masked — click Edit to re-enter if needed.

Managing Divisions

The Divisions panel is in the settings bar below the main settings. Type a name and click + Add. Click the colored dot to change a division's color. Click the pencil icon to rename. Click × to delete (only if no people are assigned). Drag divisions to reorder — the order here is the display order on the board.

Auto-filter on Mark In — When this checkbox is enabled, the public board automatically filters to a person's division when they mark In, and briefly shows a notification at the bottom of the screen. This is useful for floor or warehouse environments where employees check themselves in. Turn it off for boards managed by a single receptionist who marks In for others.

Managing People

Each admin card has status picker buttons, a note field, and a timestamp showing who last changed the status and when. Hover the timestamp to see the last 5 changes. Use the ✏ Edit button to update a person's details and the 🗑 Delete button to remove them.

Edit Form Fields

Public Board Guide

The public board (inout-board.html) shows every person's current status, department, role, and note. Click a person's name or the contact icon to see their photo, phone numbers, and email.

Changing Your Status

With PIN required: Click a status button on your card, enter your 4-digit PIN, click Continue.

Without PIN required (default): Click any status button — updates immediately.

Adding a Note

Click the note field on any person's card to type a note. Maximum 60 characters. Press Enter or click away to save. Use quick-note presets for one-tap entry of common notes.

Click the note field on your card. If quick-note presets are configured, click the ≡ icon to see one-tap options. Click × to clear a note.

Filtering & Sorting

• Search box — Filter by name in real time
• All / In / Away / Out — Filter by status
• Division dropdown — Filter by department
• Sort — Change sort order temporarily

License Activation

Creative In/Out includes a 30-day free trial. An amber banner at the top of both the public board and admin panel shows days remaining and prompts you to activate.

To Activate

1. 1
   Open the admin panel and sign in
2. 2
   Click Expand to open the settings panel
3. 3
   Scroll to the License row
4. 4
   Paste your complete license key — it is several hundred characters long, make sure the full key is pasted
5. 5
   Click Activate — the badge shows ✓ Licensed and the banner disappears

Trial Expiry

If the trial expires without activation, the board becomes read-only — all data is preserved, nothing is deleted. Activating a valid license key immediately restores full functionality.

Auto-Out Cron Job

The Auto-Out feature marks everyone still In as Out at a configured time each day. Setting the time in admin alone is not enough — you must also set up a server cron job to trigger the process.

Step 1 — Set the Time

In the admin panel, expand Settings and set the desired time in the Auto-Out field. Click Save.

Step 2 — Upload inout-cron.php

Make sure inout-cron.php is uploaded to the same directory as your other files.

Step 3 — Set Up the Cron Job (Dreamhost)

1. Log into your Dreamhost panel at panel.dreamhost.com
2. Go to Advanced → Cron Jobs → Add New Cron Job
3. Set the command: /usr/bin/php /home/your_username/yourdomain.com/path/to/inout-cron.php
4. Set frequency: Once per hour (or every minute for exact timing)
5. Click Save

How It Works

Each time the cron runs, inout-cron.php checks whether the current time matches the configured Auto-Out time. If it matches — and it hasn't already run today — it marks everyone still In as Out and records "by: auto" in their history.

URL-Based Cron (Alternative)

If your host doesn't support command-line cron, trigger the script via URL. Open inout-cron.php, set a secret key in CRON_KEY, then use:

https://yourdomain.com/path/to/inout-cron.php?key=your-secret-key

Mobile Use

Public Board on Mobile

The board is fully responsive. On screens narrower than 600px, cards stack in a compact layout, the contact icon column is hidden (tap the name instead), and status buttons are larger for easier tapping.

Admin Panel on Mobile

The admin panel is usable on mobile but designed primarily for desktop. Settings rows stack vertically and edit overlays appear full-width.

Adding to Home Screen (PWA)

iPhone (Safari): Tap the Share button → Add to Home Screen

Android (Chrome): Tap the menu (⋮) → Add to Home Screen

Once added, the board opens full-screen without browser navigation bars.

Troubleshooting

"Could not load board data"

Cause: The board cannot reach inout-data.php.

• Confirm inout-data.php and license-validator.php are in the same directory as inout-board.html
• Confirm the directory has write permissions (755)
• Visit yourdomain.com/inout-data.php directly — it should return text starting with {
• If it shows a PHP error, confirm PHP is enabled on your hosting

Photos Not Uploading

Cause: The images/ folder doesn't exist or isn't writable.

Solution: Create an images/ folder in the same directory and set permissions to 755.

"License key is invalid or not valid for this domain"

• Make sure you copied the complete key — it is several hundred characters long
• Confirm the domain your board is installed on matches the domain your key was issued for (e.g. board.acme.com is different from acme.com)
• Contact if you believe the key should be valid

Status Changes Not Saving

• Check the license banner — if expired, activate your license
• Confirm the installation directory has write permissions (755)

"by: User" Instead of a Name

Cause: PIN requirement is turned off.

Solution: Enable "Require PIN?" in admin settings and ensure every person has a unique 4-digit PIN assigned.

Auto-Out Not Working

• Confirm the cron job is set up and running — see Section 7
• Confirm inout-cron.php is uploaded to the same directory
• Confirm the Auto-Out time is saved in Settings (click Save after setting it)
• The cron only fires once per day — to test, temporarily set the time to a minute from now

Board Not Updating Automatically

The board refreshes every 10 seconds. If changes aren't appearing on another device, force-refresh (Ctrl+F5 / Cmd+Shift+R) and confirm both devices are on the same URL.

FAQ