On-Site Notifications
Better Messages displays on-site popups and tab-title alerts when a user receives a new message while they're browsing your website. A small toast appears in a screen corner with a message preview; the browser tab title can also show an unread count badge, so users notice activity even when on a different tab.
What it adds#
- Pop-up toast notification on the user's screen when a new message arrives
- Configurable position — left or right corner
- Mobile-specific positioning — auto, top, or bottom (better for thumb reach)
- Browser tab title badge showing unread message count (e.g., "(3) My Site")
- Click the popup to jump straight to the conversation
- Auto-dismiss when the conversation is read elsewhere (cross-tab sync)
- Independent from web push / mobile push / email — runs while the site is open
How it works#
When a new message arrives via the WebSocket relay (or via AJAX poll on the free version), the JavaScript front-end checks the user's notification preferences. If on-site notifications are enabled and the user isn't currently focused on the relevant conversation, a toast pops up.
| Channel | When it fires |
|---|---|
| On-site popup | New message + user is browsing the site, NOT on that conversation |
| Tab title badge | Any unread message — visible even when tab is in background |
| Sound | Pairs with the popup (configurable, see Sound notifications) |
| Web push (WS) | Fires when the tab is closed (different scope) |
| Fires when user is away from the site (different scope) |
The popup auto-dismisses after a few seconds OR when the user opens the conversation in another tab. Cross-tab sync uses BroadcastChannel — no popup duplication if the same user has the site open in multiple tabs.
When to customize position#
| Site type | Recommended position |
|---|---|
| Standard desktop | Bottom-right (the convention) |
| Right-to-left language site | Bottom-left (mirrored) |
| Mobile-heavy audience | Top (avoids interference with bottom navigation bars) |
| Site with a fixed footer | Top-right (avoid the footer) |
How to enable#
Navigate to WP Admin → Better Messages → Settings → Notifications.
- On-Site Notifications — Enable or disable the popup toasts
- Popup Position — Left or right corner
- Mobile Position — Auto, top, or bottom on mobile devices
- Title Notifications — Show unread count in the browser tab title (recommended on)
Frequently asked questions#
Why doesn't the popup show when I'm on the conversation page?#
By design — if you're already looking at the conversation, the popup would be redundant. The message just appears in the thread as expected.
Does the popup work for messages received while the tab is in the background?#
The popup itself only renders on visible tabs. The tab title badge still updates so the user sees the unread count when they switch back. For background notifications, enable web push (WebSocket version) or rely on email.
Can I customize the popup design?#
Yes — the popup HTML uses stable class names. Override via CSS under Appearance → Customize → Additional CSS. For deeper customization, copy the React notification component into a child plugin / mu-plugin and replace it via your build pipeline.
Does the popup respect muted conversations?#
Yes — muted conversations don't trigger popups. See conversation muting.
Are popups shown for AI bot replies?#
Yes — AI bot replies notify like any other message. Mute the bot's conversation if you'd rather not see them.
See also#
- Sound notifications — audio cues that pair with popups
- Email notifications — for when users are away
- Web push notifications — browser push when tab is closed (WebSocket version)
- Conversation muting — silence specific threads