# "You Are Offline" Notice

> Shows a small notice at the bottom of the screen when the visitor loses their internet connection and hides it when the connection returns, so failed clicks make sense.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: offline, notice, mobile
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-offline-notice/

## Code

```html
<div class="wpide-offline" role="status" aria-live="polite" hidden>You are offline. Some features may not work until your connection is back.</div>
<style>
.wpide-offline{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:100001;max-width:calc(100vw - 32px);padding:10px 16px;border-radius:8px;background:#1d2327;color:#fff;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.25);}
.wpide-offline[hidden]{display:none;}
</style>
<script>
(function () {
    var note = document.querySelector('.wpide-offline');
    if (!note) { return; }
    function update() { note.hidden = navigator.onLine !== false; }
    window.addEventListener('online', update);
    window.addEventListener('offline', update);
    update();
})();
</script>
```

## Notes

Edit the message text in the HTML.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""You Are Offline" Notice" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/