1. Copy the tag from your status page settings
In the dashboard, open your status page's settings and find "Badge and embed". Copy the incident banner script tag; it points at <your-slug>.realuptime.io/banner.js (or at your custom domain, if you serve the page there). Paste it before </body> in your app. It is about 9 KB, has no dependencies, and does nothing visible while everything is operational.
2. Choose where and how it shows, if the defaults do not suit
Add data-position="bottom" to pin it to the bottom, data-theme="light" or "dark" to override the visitor's system setting, and data-components="API, Website" to react only to those components. The strip always links to your status page and can be dismissed per incident.
3. Allow the host in your Content-Security-Policy
If your app sends a CSP, add the script's host to script-src and connect-src; the script contacts no other host and polls the page's /status.json once a minute, only while the tab is visible. If style-src forbids inline styles, give the script tag a nonce or set data-styles="none" and include the stylesheet from the docs yourself.
4. Know what it will never show
A password-protected status page has no public snapshot, so its banner stays silent, the same way it has no badge and no feed. Maintenance windows are not incidents and do not trigger it either.
Go deeper
The full reference lives in the docs: Status pages documentation: incident banner. Error codes named above are each explained in the error-code reference.