Your Own Announcement Banner (Top-of-Chat Notice Bar) Studio + Script Embed

Community Scripts
, ,
1

Hey team! This custom script allows you to create and configure your own announcement bar via custom code.

This one shouldn’t be too crazy and as always, respond below if you need any help!

Script can be found at the bottom of this post (-:

What this does
This snippet adds a simple banner at the very top of your Pickaxe chat page (or Studio) for things like:

  • maintenance notices
  • promotions / announcements
  • “new feature” alerts
  • links to your status page

It includes an X close button. Once a visitor closes it, it stays hidden for that visitor (using their browser’s local storage), until you change the version key.

Where to paste it

  • Pickaxe Studio: Studio → Settings → Website Code Injection → Header (paste the entire “CODE SNIPPET” block below)

Configuration (the only part most people need)
Inside the code snippet there’s a section labeled “CONFIG (EDIT THESE)”. You can change:

  • the banner text
  • optional link text + URL (ex: “Status page”)
  • whether the banner remembers dismissal
  • the “version” so it shows again after you change your announcement

Common questions

  • Why did it disappear for me? You closed it once. Your browser remembers. To re-show it, either:
    1. change the BANNER_VERSION value, or
    2. clear your browser local storage for the page.
<!--
  Pickaxe Community Script: Announcement Banner
  ✅ Works in Studio Custom Scripts
  ✅ Works on pages using the script embed (same DOM)
-->

<style id="pa-announcement-banner-style">
  /* Banner container pinned at the very top */
  .pa-banner {
    position: sticky;
    top: 0;
    z-index: 999999; /* very high to stay above chat UI */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 10px 12px;
    font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;

    background: #111;
    color: #fff;
  }

  /* Keeps banner content nicely centered on wide screens */
  .pa-banner__inner {
    width: min(1100px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
  }

  .pa-banner__msg {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  /* Prevent super long text from breaking layout */
  .pa-banner__msg span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pa-banner__link {
    color: #fff;
    text-decoration: underline;
    opacity: 0.9;
  }

  /* “X” close button */
  .pa-banner__close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    padding: 6px 8px;
    border-radius: 8px;
  }

  .pa-banner__close:hover {
    opacity: 1;
    background: rgba(255,255,255,0.08);
  }
</style>

<script>
(() => {
  "use strict";

  // Prevent duplicates if this script runs more than once
  if (window.__PA_ANNOUNCEMENT_BANNER__) return;
  window.__PA_ANNOUNCEMENT_BANNER__ = true;

  // ─────────────────────────────────────────────
  // CONFIG (EDIT THESE)
  // ─────────────────────────────────────────────

  // 1) The banner message users will see
  const MESSAGE = "Heads up: brief maintenance tonight at 9:15pm PT.";

  // 2) Optional: add a link (leave blank to disable)
  const LINK_TEXT = "";      // e.g. "Status page"
  const LINK_HREF = "";      // e.g. "https://status.yoursite.com"

  // 3) Remember dismissal?
  // true  = if a user closes it once, it stays hidden for them (recommended)
  // false = it will show every page load
  const REMEMBER_DISMISSAL = true;

  // 4) Version key:
  // If you change your announcement and want everyone to see it again,
  // bump this number/string (example: "v2", "v3", etc.)
  const BANNER_VERSION = "v1";

  // ─────────────────────────────────────────────
  // Implementation details (you usually don’t need to edit below)
  // ─────────────────────────────────────────────

  const STORAGE_KEY = `pa_banner_dismissed_${BANNER_VERSION}`;

  // If the user has dismissed it before, do nothing
  if (REMEMBER_DISMISSAL) {
    try {
      if (localStorage.getItem(STORAGE_KEY) === "1") return;
    } catch (e) {
      // If localStorage is blocked, we simply show the banner every load
    }
  }

  function mountBanner() {
    // Avoid double mount
    if (document.getElementById("pa-announcement-banner")) return;

    const banner = document.createElement("div");
    banner.id = "pa-announcement-banner";
    banner.className = "pa-banner";

    const linkPart =
      (LINK_TEXT && LINK_HREF)
        ? ` <a class="pa-banner__link" href="${LINK_HREF}" target="_blank" rel="noopener noreferrer">${LINK_TEXT}</a>`
        : "";

    banner.innerHTML = `
      <div class="pa-banner__inner">
        <div class="pa-banner__msg">
          <span>${MESSAGE}${linkPart}</span>
        </div>
        <button class="pa-banner__close" aria-label="Dismiss banner">×</button>
      </div>
    `;

    // Close behavior
    banner.querySelector(".pa-banner__close").addEventListener("click", () => {
      if (REMEMBER_DISMISSAL) {
        try { localStorage.setItem(STORAGE_KEY, "1"); } catch (e) {}
      }
      banner.remove();
    });

    // Insert banner above everything else on the page
    document.body.prepend(banner);
  }

  // Start as soon as the page is ready
  if (document.body) mountBanner();
  else document.addEventListener("DOMContentLoaded", mountBanner);
})();
</script>
1 Like