# Client area What your customers see after ordering a PUQVPNCP-backed service in WHMCS: the home screen with VPN client details and protocol configs, the traffic statistics page, and email notifications. # Home screen ### PUQVPNCP module **[WHMCS](https://puqcloud.com/link.php?id=77)** ##### [Order now](https://puqcloud.com/whmcs-module-puqvpncp.php) | [Download](https://download.puqcloud.com/WHMCS/servers/PUQ_WHMCS-PUQVPNCP/) | [Community](https://community.puqcloud.com/) | [PUQVPNCP](https://puqvpncp.com/) | [Order PUQVPNCP](https://puqcloud.com/puqvpncp.php) The product details page is the **Information** tab — the module's main client-facing view. Everything on it is loaded dynamically from the PUQVPNCP panel via AJAX the moment the page opens. ![Client area — home screen](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-8drxntfo.png) *12-home-screen-connection.png* --- ## Sidebar The module replaces the default *Information* sidebar entry with two of its own: - **Information** — the page documented here. - **Traffic statistics** — see [Traffic statistics](03-traffic-statistics.md). ![Sidebar entries](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-twehzasi.png) *13-home-screen-sidebar.png* --- ## User manual If a *Link to instruction* is set in the product configuration, a **User manual** button appears at the top of the page linking to that URL. --- ## Connection status A live block at the top of the page that polls `/api/v1/client/online` every 5 seconds (paused while the browser tab is hidden) and shows one card per protocol the client is currently connected on: ![Connection status card](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-o6ku54yj.png) *47-home-screen-connection-status.png* - **WireGuard** — blue accent, shield icon - **AmneziaWG** — purple accent, user-secret icon - **OpenVPN** — amber accent, globe icon - **IKEv2** — purple accent, key icon Each card shows: VPN IP, network, endpoint, last handshake (with relative time suffix) and downloaded/uploaded bytes (humanised B/KB/MB/GB). The header pill is **Online** (green) when at least one protocol reports a session, **Offline** (red) otherwise. A manual **Refresh** button next to the badge forces an immediate fetch. --- ## One-Time Link (OTL) The fastest way to get a customer connected on a new device: one secure link that carries **everything** — all protocol configurations, QR codes and credentials — on a page that opens **only once**. The **Generate One-Time Link** button calls `POST /api/v1/client/{name}/otl` and returns a single-use URL. The card explains the feature up front, and once a link is generated it offers a read-only field with **Copy** and **Open link** buttons, plus a clear warning that the link reveals all connection data and stops working the moment it is opened. ![One-Time Link generated](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-izql9gbq.png) *14-home-screen-otl.png* > The link is single-use and expires immediately after the first visit — opening it consumes it. Anyone with the link sees the full connection data, so it should be shared only through a trusted channel. Need it again? Just generate a new one. The generate action is POST-only, so an accidental browser prefetch cannot burn the token. --- ## VPN Client Static card with the panel's authoritative client record: ![VPN Client info](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-i2wl6ghc.png) *15-home-screen-vpn-client.png* - **Client name** — the identifier on the panel - **VPN IP Address** — assigned IPv4 - **Username** — auth username (used by IKEv2 / OpenVPN) - **Password** — auth password (shown as ``) - **Download / Upload limit** — Mbit/s caps or *Unlimited* - **Protocols** — coloured badges for WireGuard / AmneziaWG / OpenVPN / IKEv2; only protocols actually enabled on the client's network are shown A status pill in the top-right reads **Enabled** (green) when the panel reports `status:enable`, **Disabled** (red) otherwise. --- ## WireGuard Shown when WireGuard is enabled on the client's network: ![WireGuard config + QR](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-h1wrlfen.png) *16-home-screen-wireguard.png* - `.conf` text in a monospace block with **DOWNLOAD CONFIG** and **Copy Configuration** buttons - QR code generated by the panel (click to enlarge in a lightbox; close with the × button or click outside) --- ## AmneziaWG Shown when AmneziaWG is enabled on the client's network: ![AmneziaWG config + QR](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-k1iylc50.png) *46-home-screen-amneziawg.png* - Obfuscated `.conf` configuration text with censorship-resistance parameters (Jc, Jmin, Jmax, S1, S2, H1..H4) in a monospace block with **DOWNLOAD CONFIG** and **Copy Configuration** buttons - QR code generated by the panel for instant mobile client scanning (click to enlarge in a lightbox modal) --- ## OpenVPN Shown when OpenVPN is enabled on the client's network: ![OpenVPN profile](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-fzxu2rpu.png) *17-home-screen-openvpn.png* The full `.ovpn` profile text with **Open VPN profile** and **Copy Configuration** buttons. --- ## IKEv2 Shown when IKEv2 is enabled on the client's network: ![IKEv2 profile](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-uqnkson2.png) *18-home-screen-ikev2.png* The IKEv2 profile (JSON) with an **Open VPN profile** download button. --- ## Configurable Options tab When speed presets (Configurable Options) are assigned to the product, clients can review their current bandwidth limits on the dedicated **Configurable Options** tab: ![Client area — Configurable Options tab](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-ry6mbkit.png) *44-clientarea-configurable-options.png* --- ## Metrics tab When usage-based metric billing is enabled for the product, clients can track their current monthly traffic consumption and applicable rates on the **Metrics** tab: ![Client area — Metrics tab](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-bunarsiq.png) *45-clientarea-metrics.png* --- ## Traffic statistics The **Traffic statistics** entry in the sidebar opens a separate page — see [Traffic statistics](03-traffic-statistics.md). # Email notification ### PUQVPNCP module **[WHMCS](https://puqcloud.com/link.php?id=77)** ##### [Order now](https://puqcloud.com/whmcs-module-puqvpncp.php) | [Download](https://download.puqcloud.com/WHMCS/servers/PUQ_WHMCS-PUQVPNCP/) | [Community](https://community.puqcloud.com/) | [PUQVPNCP](https://puqvpncp.com/) | [Order PUQVPNCP](https://puqcloud.com/puqvpncp.php) The module can send a **welcome email** the moment a VPN account is provisioned, so the customer receives everything needed to connect without opening a ticket. ## What the welcome email contains - **Connection details** — VPN client name, dedicated IP address, username and password - **Protocol configurations & profiles** — full configuration text for **WireGuard**, **AmneziaWG**, **OpenVPN** (`.ovpn`), and **IKEv2** (filtered dynamically — only protocols enabled on the assigned network are included) - **Inline QR codes** — high-resolution QR codes for instant mobile camera/client scanning (WireGuard and AmneziaWG) - **Quick Connect One-Time Link (OTL)** — single-use secure onboarding link opening all configs and QR codes in one tap - **Setup guides** — direct link to the product manual/instruction page (if configured) - **Service management button** — direct link to the WHMCS Client Area service details page ## Enabling it Turn it on per product with **Send welcome email after account provisioning** on the *Module Settings* tab, and choose which template to send (the bundled **PUQ VPNcp - Welcome** by default). See [Welcome Email](../03-installation-and-configuration/04-product-configuration.md#welcome-email) for the full setup, including the one-click template creator and the available merge variables. The template lives in **Setup → Email Templates → Product/Services** and can be edited freely. If it is missing when the first welcome email is due, the module creates it automatically. ## Resending on demand An admin can re-send the welcome email at any time from the service's admin tab — see [Email notification (admin)](../04-admin-area/01-product-information.md#email-notification). This works even if the per-product auto-send option is disabled. # Traffic statistics ### PUQVPNCP module **[WHMCS](https://puqcloud.com/link.php?id=77)** ##### [Order now](https://puqcloud.com/whmcs-module-puqvpncp.php) | [Download](https://download.puqcloud.com/WHMCS/servers/PUQ_WHMCS-PUQVPNCP/) | [Community](https://community.puqcloud.com/) | [PUQVPNCP](https://puqvpncp.com/) | [Order PUQVPNCP](https://puqcloud.com/puqvpncp.php) A dedicated page in the client area showing monthly traffic for the VPN client. Entered from the service sidebar via **Traffic statistics** (`action_m=traffic_statistics`). ![Traffic statistics — chart and totals](https://doc.puq.info/uploads/images/gallery/2026-09/embedded-image-v2nkbuwp.png) *19-traffic-statistics.png* ## Controls - **Year** / **Month** selectors — default to the current month. The Year dropdown lists the last four years. - **Load** button — refetches data for the chosen period. ## Chart A line chart rendered with Chart.js showing per-day: - **Download** (blue line, filled area) - **Upload** (green line, filled area) All values are formatted with a human-readable `B / KB / MB / GB / TB` scale on hover and on the Y axis. ## Totals Two cards below the chart show the aggregated total download (blue) and total upload (green) for the selected month. ## Data source The page calls `GET /api/v1/client/{name}/traffic/{year}/{month}` on the PUQVPNCP panel every time **Load** is pressed. The module does not cache samples — values come live from the panel each render.