StatusDashboard
Custom Code

JS

Inject custom JavaScript into your status dashboard.

View Markdown

Custom JavaScript runs once per page load on eligible public status dashboard pages. Typical uses include analytics initialization, chat widgets, or firing events when the dashboard shell is ready.


Common uses

Custom JavaScript is injected as a <script id="sd-custom-js"> element appended to the page. It runs in the global scope (window is available). Use it for anything that requires executable script: analytics, chat widgets, tag managers, or custom initialization logic.

It applies across eligible public pages (home, Subscribe, Support, event detail, and similar routes). It runs once per full page load, not again when visitors navigate between routes in the same session without reloading.

For markup-only changes (banners, nav HTML, copyright lines), use Header or Footer HTML instead. <script> tags inside header or footer HTML are not executed by the browser when injected that way.

  • Initialize an analytics or tag-manager snippet
  • Start a live chat widget
  • Fire a custom event when the dashboard shell is ready

Example — custom page-load event

window.dispatchEvent(new CustomEvent('status-page-loaded', {
  detail: { url: window.location.href }
}));

Example — load an external script

Many vendors provide a loader URL. The script must be served from an origin allowed by the status dashboard content security policy ('self', https://www.google.com, or https://www.gstatic.com). If your vendor uses another domain, their snippet will be blocked unless you host a compatible loader yourself.

(function () {
  var s = document.createElement('script');
  s.src = 'https://www.gstatic.com/example/your-loader.js';
  s.async = true;
  document.head.appendChild(s);
})();

Replace the URL with your vendor's documented loader when it is served from an allowed origin.

Third-party scripts and CSP

The status dashboard uses a strict content security policy. Inline custom JS is allowed. External scripts are limited to 'self', https://www.google.com, and https://www.gstatic.com. Connection requests from your script (fetch, XHR, WebSocket) must target allowed origins (your dashboard host, the StatusDashboard API, Cognito, and the Google domains above).

If a chat, analytics, or feedback tool does not load, check the browser console for CSP violations before debugging your snippet.

Behavior

  • The script is injected after the public dashboard shell loads and status data is available (visitors see a loading state until then).
  • It runs once per full page load, not on client-side route changes within the same session.
  • Background status polls re-fetch dashboard config but do not re-run JS unless the saved js string changed (for example after you save new code in the admin console). When it does change, the script is replaced on the next poll or full page load.
  • Runtime errors appear in the browser console as ordinary script errors; they do not block the rest of the page.
  • Maximum length: 50,000 characters.
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 measurement IDs, not API secrets).

On this page

We use cookies

We use essential cookies to keep the site working, and optional analytics cookies to understand how it's used. Read our Privacy Policy.