Mobile-Optimized Layout

Better Messages auto-detects mobile devices and switches to a mobile-optimized interface designed for thumbs and small screens. Full-screen takeover when opening a thread, swipe-left to go back, a floating chat button accessible from any page — the messenger feels like a native app even in the browser. For sites that want a true native app, the iOS + Android mobile app takes this further.

What it adds#

Full-screen messaging mode — chat takes over the entire mobile viewport
Auto-enter full-screen when opening a conversation
Swipe-left gesture to navigate back to the conversation list
Floating chat button for one-tap access from any site page
Configurable floating button corner (left / right) and bottom margin
"Tap to open" prompt for first-time mobile users
Configurable mobile-only sidebar tabs (Chat Rooms, AI Bots, Users, Friends, Groups) with icon-only mode

How it works#

Better Messages detects mobile based on viewport width (the responsive layout activates around 800px and below) plus user-agent hints. On mobile:

The messenger UI adapts to a single-column layout (inbox or thread, not both)
If "Mobile Full Screen" is enabled, opening a thread takes over the viewport
The floating chat button appears in the configured corner if enabled
Swipe-left from the open thread navigates back to the inbox

Mobile gesture / setting	Effect
Tap floating button	Opens the messenger inbox
Tap a conversation	Opens thread (full-screen if enabled)
Swipe left from thread	Returns to inbox
Tap close X	Closes the messenger

When to customize each option#

Setting	Recommendation
Full-screen mode	Enable on most sites — better mobile UX
Floating chat button	Enable on community / marketplace sites; disable if the messenger is on a dedicated page
Button position	Right side for most; left for RTL sites
Bottom margin	Adjust if site has a fixed footer or bottom nav
Tap-to-open hint	Helpful for first-time mobile users who don't notice the chat button
Mobile tabs	Show only the tabs you need (Chat Rooms, AI Bots, Users) to keep the UI compact

How to enable#

Navigate to WP Admin → Better Messages → Settings → Mobile.

Mobile Full Screen — Take over the mobile viewport when a thread is open
Tap to Open — Show a one-time "Tap to open" hint to first-time mobile users
Swipe Back — Enable swipe-left to go back from thread to inbox
Mobile Popup — Show the floating chat button for one-tap access
Mobile Popup Location — Left or right side of the screen
Mobile Popup Bottom Offset — Distance from the bottom edge in pixels (avoid overlap with footers)
Mobile Tabs — Enable Chat Rooms / AI Bots / Users / Friends / Groups tabs in the mobile sidebar
Mobile Tabs — Icons Only — Hide tab labels to keep the mobile sidebar narrow

Frequently asked questions#

Does this work in mobile-app webviews?#

Yes — the mobile-optimized UI also runs inside the native iOS / Android app, which uses a webview for the chat surface. The native app adds extras the web messenger can't do, such as system push notifications and native call UI.

Can I customize the mobile breakpoint?#

The mobile layout is driven by CSS media queries in the plugin's stylesheet (around the 800px viewport). To shift the breakpoint, add a custom CSS rule in your child theme or via Appearance → Customize → Additional CSS.

Where can the floating button overlap with my site's other widgets?#

The button uses the Mobile Popup Bottom Offset setting (pixels). If you run a live-chat widget, cookie banner, or sticky footer on the same corner, raise the offset to clear them, or use the opposite corner via Mobile Popup Location.

How does this compare to the native mobile app?#

The mobile-optimized layout is the same web-based messenger with a mobile UI. The native mobile app is a separate iOS / Android app with system push notifications and native call UI. Most sites use both — the web layout for casual visitors, the native app for power users.