KIOSK Lookup Tool

Web app for the public-facing payment / lookup stations.

Deployments

• CPC: https://syr-kiosk-cpc.netlify.app/
• MVB: https://syr-kiosk-mvb.netlify.app/
• DEV: https://syr-kiosk-dev.netlify.app/

The app behavior changes by site variant (cpc, mvb, dev) so each deployment can show a different set of tiles.

---

Project Structure

/
├─ index.html                # Home screen + tile grid + modal logic
├─ form.html                 # Tax bill lookup (CSV search + bill modal/print)
├─ parking.html
├─ health.html
├─ config/
│  ├─ site-map.js            # Tile definitions (labels, icons, URLs, mode)
│  └─ variants.js            # Which tiles show for CPC/MVB/DEV + ordering
├─ CSV/
│  └─ Data.csv               # Property lookup directory used by form.html
└─ ImagesAssets/             # Icons/logos

---

How the app decides what to show (CPC / MVB / DEV)

Variant is resolved in config/variants.js:

Resolution order

1. URL query param : ?site=cpc / ?site=mvb / ?site=dev
2. Hostname fallback :

• hostname contains cpc → cpc
• hostname contains mvb → mvb
• hostname contains dev → dev

1. Default = mvb

Examples

• index.html?site=cpc → shows CPC tile set
• index.html?site=dev → shows all tiles (DEV)
• form.html?site=cpc → keeps tax page tied to CPC behavior if needed

If you change URLs and remove the ?site= parameter, the app will fall back to the hostname logic. That can change which tiles appear.

---

Where to configure tiles and links

All tile behavior is controlled in:

config/site-map.js

This is the main config for each tile:

• label → text shown on tile
• icon → tile icon path
• mode → how it opens
  • route = navigates to a page (e.g. form.html)
  • modal = opens an iframe modal
• href → URL or local route
• title → modal title (used for modal tiles)

config/variants.js

This controls:

• Which tiles are visible for each site (tiles)
• Display order (order)

---

Adding a new tile

Option A: Add a tile that opens in a modal

1) Add tile config in config/site-map.js

Use a unique key

permits: {
label: "Permit Lookup",
icon: "./ImagesAssets/file.svg",
mode: "modal",
href: "https://example.com/permits",
title: "Permit Lookup",
}

2) Add the button in index.html

Add a new <button data-tile="permits">...</button> in the tile grid.

• data-tile must match the key in site-map.js
• You can copy an existing tile button and change:
  • data-tile
  • icon src/alt
  • tile text

3) Enable it in config/variants.js

Add the same key to the site(s) where it should appear:

cpc: {
tiles: ["taxes", "schoolBus", "permits", "notify"],
order: ["taxes", "schoolBus", "permits", "dispute", "parking", "health", "notify"],
}

4) Behavior

index.html currently treats some tiles specially:

• schoolBus = shows Back + Home and uses browser history/hash
• dispute, notify, health, parking = shows Home only

If your new tile should behave like schoolBus (Back + Home + history), add it to that branch in the tile click logic in index.html.

---

Option B: Add a tile that routes to a local page

1) Create the page

Example: permits.html

2) Add tile config in config/site-map.js

permits: {
label: "Permit Lookup",
icon: "./ImagesAssets/file.svg",
mode: "route",
href: "permits.html?site=cpc",
}

Important: If the page should preserve site-specific behavior, include ?site=... in the route, or update the route dynamically.

3) Add the button in index.html

Add <button data-tile="permits">...</button>.

4) Enable it in config/variants.js

Add permits to the correct tiles and order.

---

How the URL changes affect what users see

This app is config-driven, so changing a URL in site-map.js directly changes what opens when a tile is tapped.

Changing href examples

• Change parking system URL → users immediately see the new parking site in the modal
• Change taxes.href from form.html?site=cpc to form.html?site=dev → tax tile will load the form page with DEV variant query
• Change external URL to a broken URL → modal will still open, but content will fail inside iframe

Iframe note: Some websites block iframe embedding (X-Frame-Options / CSP). If a site does not load in the modal, it may need to open as a direct route/new page instead.

---

Tax form (form.html)

form.html is the only page that uses local data (CSV/Data.csv) and builds tax bill URLs.

Data source

• Reads from: CSV/Data.csv
• Parsed in browser using PapaParse

What the CSV is used for

It builds a searchable directory from the CSV and matches:

• Owner name
• Address
• Property ID / account number

CSV assumptions in current code

The code expects key fields at fixed indexes:

• Account number from r[20]
• Address from r[11], r[12], r[13]
• Owner name from r[47]

If the CSV column order changes, search results will break until the indexes are updated in form.html.

Tax bill URL output

When a user taps View Bill , the form builds a URL like:

• base: https://syracuse.go2gov.net/faces/statements
• params:
  • type = cityschool or county
  • account = selected property account
  • year = selected tax year

If the tax statement system URL or parameters change, update buildPdfUrl() in form.html.

---

Inactivity / session behavior

index.html includes kiosk session behavior for modal pages:

• After 7 minutes idle → shows "Are you still there?" prompt
• 60-second countdown
• If no response → closes modal and returns home

This applies to modal-based services opened from the home screen.

---

Analytics

Google Analytics is loaded in index.html (gtag) with a hardcoded measurement ID.

If you need a different property per environment, update the ID in index.html (or move it into config).

---

Common update tasks

Change what tiles show on CPC/MVB/DEV

• Edit config/variants.js

Change a tile URL (what opens)

• Edit config/site-map.js

Add a new modal service

• Add tile config in site-map.js
• Add button in index.html
• Add to variant tiles + order in variants.js

Update tax directory data

• Replace CSV/Data.csv
• Keep column order the same, or update indexes in form.html