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 stays on screen until it is dealt with — it closes when clicked, when the conversation is opened in any tab, or when the message it announced is deleted. 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 → Onsite Notifications.
- New Message Notifications — Enable or disable the popup toasts site-wide
- Popup Notification Control — Let each user turn the popup on or off from their own messenger settings
- Notification Position — Left or right corner
Browser Tab Notifications (the unread count in the tab title) sits in the General section of the same page, and the mobile popup position is under Settings → Mobile.
Frequently asked questions#
Can users turn the popup off for themselves?#
Yes, once Popup Notification Control is enabled. Every user then gets a Show a popup when a new message arrives option in their own messenger settings, under Notifications. The site-wide New Message Notifications toggle stays the default, so it decides what a user sees until they change it — which means you can leave popups off by default and let the users who want them opt in.
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