A Zendesk nav bar app that lets support admins configure and manage SLA (Service Level Agreement) rules directly inside Zendesk. Admins define business hour schedules, public holidays, and SLA rules — the app communicates with the backend which automatically creates the required Zendesk triggers and webhooks.
Built for GROWON using the Zendesk Apps Framework (ZAF SDK v2).
The app provides a settings panel accessible from the Zendesk nav bar with three configuration sections:
- Create named schedules with per-day open/close times
- Toggle individual days as open or closed
- See a real-time summary of total weekly working hours
- Multiple schedules supported (different schedules for different teams or regions)
- Create SLA rules with:
- Name and description
- Linked schedule — which business hours calendar to use
- Total resolution time (hours) — deadline from ticket creation
- Warning time (hours before breach) — when to alert the team
- Breach tags — Zendesk tags applied automatically on breach
- Alert recipients — agents, groups, or placeholders to notify
- Email subject and body — custom breach notification email
- Edit and delete existing rules
- Each rule automatically creates two Zendesk triggers via the backend (start trigger + breach trigger)
- Define company-wide holiday periods by start and end date
- Holidays are excluded from SLA time calculations in the backend
On first load the app fetches a short-lived JWT token from the backend (GET /auth/token?domain=<subdomain>). This token is attached to all subsequent API calls to authenticate requests from the Zendesk frontend to the NestJS backend.
| Layer | Technology |
|---|---|
| App Framework | Zendesk Apps Framework (ZAF SDK v2) |
| Location | nav_bar |
| Language | JavaScript (vanilla) |
| Auth | JWT (short-lived token per session) |
| Backend | NestJS REST API (see sla-backend repo) |
├── manifest.json # App config: name, author, ZAF version, location
├── translations/
│ └── en.json # App metadata strings
└── assets/
├── settings.html # Main settings panel layout (nav_bar entry point)
├── settings.js # App logic: schedule / rule / holiday CRUD, JWT auth
├── components/
│ ├── businessHours.html # Business hours tab UI
│ └── rules.html # SLA rules tab UI
├── css/ # Stylesheets
├── logo.svg
├── logo.png
└── logo-small.png
This app is the configuration frontend for the sla-backend NestJS service, which handles SLA time calculation, job scheduling, Zendesk webhook/trigger management, and breach/warning enforcement.
Private — built for a client (GROWON).