Web Push Notifications for Dashboards: Turn KPI Changes into Instant Alerts
Dashboards are a pull tool: the numbers are there whenever someone thinks to look. The trouble is that the moments that matter most — a key account cancels, ad spend doubles overnight, the support queue spikes — rarely line up with when someone opens the dashboard. Web push notifications add the missing push: a short alert on the screen of the people who care, sent the moment a metric crosses a threshold, with one click back to the chart that explains it. This guide shows how to add them to any dashboard with Push Agent, a web push service that works on any HTTPS website.
What Are Web Push Notifications?
Web push notifications are short, clickable messages a website sends through the browser — Chrome, Edge, Firefox, Opera or Safari — after a visitor clicks Allow. They appear on screen like an app notification, even when the website isn't open in a tab, and clicking one opens whatever page you chose. No app to install, no email address or phone number to collect.
That makes them a natural fit for dashboards. The people who need an alert are already using your dashboard in their browser; allowing notifications once is all it takes for that dashboard to tap them on the shoulder when something changes.
Why Dashboards Need Push, Not Just Pull
A well-built dashboard answers "how are we doing?" for anyone who opens it. What it can't do on its own is decide that something needs attention now. That gap shows up in a few familiar ways:
The rule of thumb: let the dashboard show everything, and let push notifications flag only the few changes that need someone to act.
Dashboard Alerts by Team
The alerts worth sending are different for every department, but the pattern is the same: one clear threshold, one short message, one link to the chart.
Web Push vs. Email, SMS and Chat Alerts
Most teams already have some way to send alerts. Here's where web push fits alongside them:
| Web push | Email alerts | SMS | Team chat bots | |
|---|---|---|---|---|
| Setup for the reader | One click on Allow | An email address | A phone number | A chat workspace and bot |
| Where it appears | On screen, straight away | Inbox | Phone | Inside the chat app |
| Cost per message | None (unlimited on Push Agent) | Usually none | Per message | Usually none |
| Opens the dashboard | Yes, one click | Via a link | Via a link | Via a link |
| Works for external users | Yes | Yes | Yes | Rarely |
Web push doesn't have to replace the others. Email remains the place for detail and audit trails; push is the fast, lightweight nudge on top.
Adding Push Alerts to a Dashboard (Step-by-Step)
These steps use Push Agent. It uses the standard Web Push protocol, so there's no Firebase project or Google developer account to set up.
Create a free Push Agent account at app.pushagent.net and add your dashboard's website address. It must use HTTPS.
Add the script and the service worker. Paste one line of code into your dashboard's page template and upload one small file, pushagent-sw.js, to the root folder of the domain. On WordPress or Joomla, the free plugin does both for you. The guide for any HTTPS website walks through it.
Ask your team to allow notifications. Each person opens the dashboard in their browser and clicks Allow on the small card that appears. That browser is now subscribed.
Send a test from the Push Agent dashboard: a title, a short message and the link to your dashboard. Check it arrives and opens the right page.
Pick your thresholds. Agree on the handful of changes that deserve an alert — one or two per team is a good start — and write each message so it says what happened and where to look.
Automate it with a scheduled script that checks your data and calls the Push Agent API when a threshold is crossed (see the next section).
Keep alerts for your team separate from notifications for your website visitors: add your internal dashboard as its own website in Push Agent, so only the people who use it are subscribed to it.
Sending Alerts Automatically from Your Data
Manual notifications are fine for announcements, but the real value is in alerts that fire on their own. Push Agent's REST API (Growth plan and up) sends a notification to all of a website's subscribers — or only those in certain countries, or on certain devices or browsers — from any script. Create an API key under API & WooCommerce in your Push Agent dashboard, then run a check like this every 15 minutes with cron (the opening PHP tag is left out here so the article itself stays safe to publish):
// low-stock-alert.php: run every 15 minutes from cron
// (save it as a .php file that starts with the usual PHP opening tag)
$pdo = new PDO('mysql:host=localhost;dbname=shop', 'db_user', 'db_password');
$low = (int) $pdo->query('SELECT COUNT(*) FROM products WHERE stock < 5')->fetchColumn();
// Only alert when the number changes, so the team isn't told the same thing twice.
$stateFile = __DIR__ . '/low-stock.last';
if ($low === 0 || $low === (int) @file_get_contents($stateFile)) {
exit;
}
file_put_contents($stateFile, (string) $low);
$ch = curl_init('https://app.pushagent.net/api/v1/campaigns');
curl_setopt_array($ch, [
CURLOPT_POST => true,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [
'Content-Type: application/json',
'X-PushAgent-Key: ' . getenv('PUSHAGENT_API_KEY'),
],
CURLOPT_POSTFIELDS => json_encode([
'title' => "$low products are low on stock",
'body' => 'Open the inventory dashboard to reorder before they sell out.',
'url' => 'https://dashboards.example.com/inventory',
]),
]);
echo curl_exec($ch);
A few details that keep automated alerts useful:
- Keep the title short. Titles can be up to 65 characters and messages up to 240, but browsers cut long titles, especially on phones.
- Link to the exact view — the filtered chart, not the dashboard's home page.
- Alert on change, not on state. As in the example, remember what you last sent, so a metric that stays over the line doesn't trigger the same alert every 15 minutes.
- Store the API key outside your code, for example in an environment variable, and revoke it from the Push Agent dashboard if it's ever exposed.
Requirements
For push notifications
- A dashboard served over HTTPS (browsers only allow push on secure sites)
- Access to add one line of code to the page template and one file to the domain's root folder
- A free Push Agent account: up to 2,500 subscribers and unlimited notifications
For automated alerts
- A server that can run scheduled jobs (cron) with PHP and cURL, or any language that can send an HTTPS request
- Push Agent's Growth plan for API access. New accounts can try every Growth feature free for 14 days; see Push Agent pricing.
Building the dashboard itself? Dashboard Builder connects to MySQL, PostgreSQL, CSV and Excel, and the same queries you chart can drive the thresholds for your alerts.