# JS

Inject custom JavaScript into your status dashboard.

Source: https://statusdashboard.com/docs/status-dashboards/code/js

Custom JavaScript runs once when a visitor loads your status dashboard. Typical uses include analytics initialization, chat widgets, or firing events when the page opens.

***

## Common uses
Custom JavaScript runs on your status dashboard after the page content has loaded. It applies across **all status dashboard pages** (home, Subscribe, Support, event detail, and similar routes). The code runs inside a function scope, so `var` declarations are not leaked to the global `window` object. You can still read and write `window` properties, call `document` APIs, and access any globally available third-party library.

If your script throws an error, it is caught and logged to the browser console (`[StatusDashboard] Custom JS error: ...`). The rest of the page is unaffected.

* Initialize an analytics provider (e.g., Google Analytics, PostHog, Mixpanel)
* Start a live chat widget
* Fire a custom event when the page loads

## Example — Google Analytics
```js
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
```

## Example — custom page-load event
```js
window.dispatchEvent(new CustomEvent('status-page-loaded', {
  detail: { url: window.location.href }
}));
```

## Behavior
* The script runs once when the dashboard loads inside a `new Function(...)()` wrapper — not again on client-side navigation between routes.
* There is no automatic re-execution if the page data refreshes in the background.
* Errors are silently caught and printed to the browser console.

> Do not put sensitive keys or secrets in Custom JS. This code is delivered to every visitor's browser in plaintext. Use public-facing keys only (e.g., analytics write keys, not API secrets).