Custom User Portal Home Screen
By default the user portal has no home screen — it opens directly on the History page. Setting a custom home screen adds a landing page that opens first: your own content — a branded welcome page, a live call-centre wallboard, a recordings browser or a full analytics dashboard. The content is defined by a small piece of JavaScript that you can generate from a guided template or write by hand.
There are two levels at which the home screen can be customized:
| Level | Where to set it | Applies to |
|---|---|---|
| Tenant-wide | Tenant admin menu → Settings → Custom Home Screen | Every user in the tenant |
| Per extension | Open an extension → User Portal tab | That one extension |
A per-extension home screen overrides the tenant-wide one for that user. If an extension has no custom home screen of its own, it falls back to the tenant-wide setting; if neither is set, there is no home screen and the portal opens on the History page.
Turning it on
Each page has the same two controls:
- Use custom home screen — the on/off toggle. Turning it on sets the account's Content for the home screen to Custom; turning it off removes the home screen so the portal opens on the History page.
- JavaScript — the code that defines the home screen. You can fill this in from a template (below) or edit it directly in the built-in code editor.
Click Save to apply. The change takes effect the next time the user loads the portal.
Starting from a template
The Start from a template table lists ready-made home screens. Click a row to open a dialog, fill in its options (title, refresh interval, date range, and so on), and Save — the JavaScript is generated for you and dropped into the editor. You can still hand-edit the result afterwards.
| Template | What it shows |
|---|---|
| Logo, heading & text | A logo (the tenant logo or a custom image), a heading and one or more coloured text blocks — ideal for a simple branded welcome page. |
| Agent Activity Dashboard | A live wallboard of agent status — an All Agents list and a per-queue login/logout availability timeline (DND/available periods) — with Answered/Abandoned/Waiting/Active-Agents summary cards. Options: refresh interval, default period, maximum queues, calls shown per queue. |
| Call Recordings & Transcription | Browse, filter, play and export call recordings with summary cards and pagination; transcriptions load on demand when a recording is opened. |
| Enterprise Call Analytics | A tenant-wide call-reporting dashboard: summary metrics, hourly/type/status/extension charts, a filterable paginated call table, and a per-call analysis view with routing flow, MOS voice-quality and in-modal recording playback. |
| Queue Agents Performance Report | A per-agent answered-call report across all queues: summary cards, per-queue breakdown, and a daily outbound/inbound table per agent, with CSV export. |
| Queue Overview Analytics | A live + historical queue dashboard: key metrics, a live agent-status panel, hourly-volume, time-breakdown and daily abandon-rate charts, and a per-agent performance table with live DND/talk state. |
| Queue Analytics | Category (work-unit-code) analytics: agent performance with talk/hold/idle, an abandoned-call list, a per-category summary with abandon-rate flags, and an agent-by-category call matrix. |
The call-centre and analytics templates read call and queue data. The user (or their permission group) needs the appropriate call-record / queue permission, otherwise the dashboard loads without data.
Writing your own
The editor accepts any JavaScript that defines a <pbx-home> custom element —
this is the element the portal mounts as its home screen. A template simply generates
this code for you; hand-written code follows the same contract. The editor provides
syntax highlighting and common shortcuts (press the hints control for the list).
Leaving the code empty and saving removes the override — the portal then falls back to the tenant-wide home screen, or to the History page if none is set.
The code is saved as a web-template override named js/user_portal_custom.js — on the
tenant for the tenant-wide page, or on the extension for the per-extension tab. The
toggle sets Content for the home screen (apphomescreen) to custom. To edit a
dashboard that was generated from a template, re-pick the template, adjust the fields
and save again.
Related
- Tenant Branding & Logo Upload — logos, favicon, accent colour and login/logout background for the tenant.
- Extensions — the per-extension User Portal tab.
- Permission Groups — control which features and data a user can see in the portal.