Documentation
Complete guide to the Open Accessible widget, dashboard, and backend.
Quick Start
Add one line to your HTML before </body>:
<script src="https://openaccessible.com/cdn/open-accessible/1.0.0/widget.min.js" data-site-id="YOUR_SITE_ID" data-api-url="https://openaccessible.com"></script>Get your Site ID from the Dashboard. For self-hosted use, omit both attributes.
CDN
We host the widget on our CDN. Use the versioned URL for caching:
https://openaccessible.com/cdn/open-accessible/1.0.0/widget.min.js
https://openaccessible.com/cdn/open-accessible/1.0.0/widget.jsAvailable versions: 1.0.0, 2.0.0
Self-Hosted
Download widget/open-accessible-widget.js and serve it from your domain. No Site ID needed—all features work offline.
<script src="/path/to/open-accessible-widget.js"></script>Script Attributes
| Attribute | Required | Description |
|---|---|---|
data-site-id | No | Your Site ID for SAAS analytics |
data-api-url | No | API base URL (e.g. https://openaccessible.com) when embedding on other domains |
data-help-url | No | URL for the Help link (3.2.6) |
Features Reference
| Feature | WCAG | Description |
|---|---|---|
| Font size | 2.4.12 | 90–200% text scaling |
| Font style | — | Normal, Readable (serif), Dyslexia-friendly (OpenDyslexic) |
| Line spacing | 1.4.12 | 1.2–2.5 line height |
| Contrast | 1.4.3 | Normal, high, dark modes |
| Color vision | 1.4.1 | Protanopia, deuteranopia, tritanopia filters |
| Focus indicator | 2.4.13 | Strong / enhanced focus outlines |
| Focus not obscured | 2.4.11 | Scroll focused elements into view |
| Reduce motion | 2.3.3 | Disables animations |
| Large touch targets | 2.5.5 | Min 44×44px for links/buttons |
| Help link | 3.2.6 | Findable Help |
| Read aloud | — | Select text to hear it spoken |
| Keyboard shortcut | 2.1.1 | Ctrl+Shift+A toggles panel |
API
Auth
POST /api/auth.php?action=login|signup|logout
Login/signup accept JSON or form data: email, password, display_name (signup), account_type (signup).
Websites
GET /api/websites.php — List websites (requires session)
POST /api/websites.php — Add website. JSON: {"name":"...","url":"..."}
DELETE /api/websites.php?id=N — Delete website
Tickets
GET /api/tickets.php — List your tickets (requires session)
GET /api/tickets.php?id=N — Get ticket + replies
POST /api/tickets.php — Create ticket. JSON: {"name":"...","email":"...","subject":"...","topic":"...","priority":"...","message":"..."}
POST /api/tickets.php with action=reply — Add reply
Contact
POST /api/contact.php — Contact form. JSON: {"name":"...","email":"...","subject":"...","message":"...","topic":"general"}
Widget ping
GET /api/ping.php?id=SITE_ID — Analytics (called by widget)
Database Setup
- Run
config/schema.sqlto create tables and seed data (admin user, org, site IDoa_openaccessible_main) - Copy
config/config.local.php.exampletoconfig/config.local.phpand set DB credentials
Seed Data
The seed creates: admin user admin@openaccessible.com (password: password), organization "Open Accessible", and website with Site ID oa_openaccessible_main. Change the password immediately.