Custom User Portal Home Screen
The user portal opens on a home screen. By default this is the standard Vodia dashboard, but you can replace it with 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, the standard portal home screen is shown.
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 restores the standard portal home.
- 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 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.