Messages

If console messages have automatic display enabled in your dashboard, they open in your web app without any additional integration.

Displaying messages

// Open the messages list
await Grovs.showMessagesList();
 
// Unread count for a badge
const unread = await Grovs.numberOfUnreadMessages();
 
// Work with messages directly
const messages = await Grovs.getMessages(1);   // page number, starting at 1
await Grovs.markMessageAsRead(messages[0].id);

Each message has id, title, subtitle, read, and access_url. Messages need the SDK to be configured, authenticated, and enabled. Before configure or while disabled, the list does not open; if the SDK is enabled but not authenticated, the list opens and shows "Messages could not be loaded." In every such case numberOfUnreadMessages resolves 0, getMessages resolves [], and markMessageAsRead resolves false.

Automatically displayed messages

Messages flagged for automatic display open on their own after configure. To trigger the check yourself, for example after the user signs in:

await Grovs.displayAutomaticMessages();

At most five messages are shown per check.

How the UI is rendered

The messages list and each message detail render inside a shadow root, so they neither inherit your CSS nor leak their own. Message content loads in a sandboxed iframe that allows popups to escape it, so a link out of a message opens a working page. The modals move focus in on open, keep Tab inside the topmost modal, close on Escape, and restore focus on close.

The UI works under a strict style-src policy and under Trusted Types. Strict style-src support uses a constructed stylesheet, which needs Safari 16.4 or later or Firefox 101 or later; older engines fall back to a <style> element that a strict policy blocks.

Styling the messages UI

Pass a theme when configuring, or set CSS custom properties. Page CSS beats the config object, which beats the built-in defaults:

await Grovs.configure({
  apiKey: "your-api-key",
  messagesTheme: {
    mode: "auto",            // "light" | "dark" | "auto"
    position: "center",      // or "right" for a side sheet
    title: "Inbox",          // list header text (localization hook)
    accentColor: "#e91e63",
    borderRadius: "12px",
  },
});

/* Target both hosts: the list modal and the per-message detail modals */
#Grovs-modal, .grovs-page-modal { --grovs-accent: #e91e63; --grovs-radius: 12px; }

mode: "auto" follows prefers-color-scheme. Invalid values never break the modal: values that are not valid CSS are rejected when the messages UI is first created, which happens at the end of a successful configure, and the defaults hold; an invalid mode or position falls back the same way. Both cases log a warning, visible at debugLevel: "warn" or "info".

Next steps

• Track events and screens →
• Full API reference →