# Dismissible Announcement Bar

> Shows a slim message bar at the top of the page (for sales, shipping notes or news) that visitors can close. It stays closed on later visits.

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

## Code

```html
<div id="wpide-announcement" style="display:none;position:relative;padding:10px 48px 10px 16px;background:#1e1e1e;color:#fff;text-align:center;font-size:14px;">
    Free shipping on all orders this week. <a href="/shop/" style="color:#fff;text-decoration:underline;">Shop now</a>
    <button type="button" aria-label="Dismiss announcement" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;">&times;</button>
</div>
<script>
(function () {
    var key = 'wpide-announcement-1';
    var bar = document.getElementById('wpide-announcement');
    if (!bar) { return; }
    try { if (localStorage.getItem(key)) { return; } } catch (e) {}
    bar.style.display = 'block';
    bar.querySelector('button').addEventListener('click', function () {
        bar.style.display = 'none';
        try { localStorage.setItem(key, '1'); } catch (e) {}
    });
})();
</script>
```

## Notes

Edit the message and link. Change the key (wpide-announcement-1) whenever you publish a new announcement so it shows again to everyone.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Dismissible Announcement Bar" 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/