Announcements

Sometimes you just need to tell your users something. Write announcements in the Tribe dashboard, fetch and display them however you like, and once someone dismisses one, Tribe remembers so it won’t show up again.

With Agents

Install the Tribe skill in Claude Code, Codex, or any AI coding agent, then just ask:

/tribe Add an announcement banner to my app using Tribe

Copy

The agent will generate all the code for you, tailored to your stack.

How it works

1. Create announcements in the Tribe dashboard
2. Fetch them in your app with getAnnouncements()
3. Show them however you like (banner, toast, modal)
4. Dismiss them with ackAnnouncement() — they won’t appear again

Fetch announcements

import { Tribe } from "@tribecloud/sdk";

const announcements = await tribe.getAnnouncements();
// Returns: [{ id, title, message, type }]

The returned list already filters out anything the user previously dismissed, so you can render whatever comes back without extra logic.

Dismiss an announcement

await tribe.ackAnnouncement(announcementId);

Dismissals persist in two places:

• Client-side in localStorage, so the announcement vanishes right away
• Server-side when the user is logged in, which means dismissals carry across devices

Build an announcement banner

React

function AnnouncementBanner() {
  const [announcements, setAnnouncements] = useState([]);

  useEffect(() => {
    tribe.getAnnouncements().then(setAnnouncements);
  }, []);

  const dismiss = async (id) => {
    await tribe.ackAnnouncement(id);
    setAnnouncements((prev) => prev.filter((a) => a.id !== id));
  };

  if (announcements.length === 0) return null;

  return (
    <div>
      {announcements.map((a) => (
        <div key={a.id} role="alert">
          <strong>{a.title}</strong>
          <p>{a.message}</p>
          <button onClick={() => dismiss(a.id)}>Dismiss</button>
        </div>
      ))}
    </div>
  );
}

Vanilla JS

<div id="announcements"></div>

<script src="https://api.tribe.utopian.build/sdk.js?site=YOUR_SITE_ID" defer></script>
<script defer>
  window.addEventListener("DOMContentLoaded", async () => {
    const announcements = await Tribe.getAnnouncements();
    const container = document.getElementById("announcements");

    announcements.forEach((a) => {
      const div = document.createElement("div");
      div.innerHTML = `<strong>${a.title}</strong><p>${a.message}</p>`;
      const btn = document.createElement("button");
      btn.textContent = "Dismiss";
      btn.addEventListener("click", async () => {
        await Tribe.ackAnnouncement(a.id);
        div.remove();
      });
      div.appendChild(btn);
      container.appendChild(div);
    });
  });
</script>

React hook

For something reusable, here’s a hook that wraps the fetch-and-dismiss pattern:

function useAnnouncements() {
  const [announcements, setAnnouncements] = useState([]);

  useEffect(() => {
    tribe.getAnnouncements().then(setAnnouncements);
  }, []);

  const dismiss = async (id) => {
    await tribe.ackAnnouncement(id);
    setAnnouncements((prev) => prev.filter((a) => a.id !== id));
  };

  return { announcements, dismiss };
}

Announcement types

Each announcement in the dashboard can carry a type like "info", "warning", or "update". This is useful for applying different visual treatments in your UI:

const style = {
  info: { background: "#e3f2fd" },
  warning: { background: "#fff3e0" },
  update: { background: "#e8f5e9" },
};

<div style={style[announcement.type] || {}}>
  {announcement.title}
</div>