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, swipe to go back, a floating chat button reachable from any page, and a bottom tab bar you arrange yourself — 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 as soon as the messages page opens
Swipe right to return to the conversations list
A floating chat button for one-tap access from any site page, with its own icon, side and offset
A bottom tab bar whose tabs you choose and order, optionally icons-only
Its own set of colors, separate from the desktop messenger
A "Tap to open" prompt over the messenger while it sits inline in the page

How it works#

The responsive layout activates around 800px viewport width and below. On mobile:

The messenger adapts to a single column — the conversations list or the conversation, not both
With Full screen mode on, the messages page takes over the viewport
The floating chat button appears in the configured corner, if enabled
Swiping right from an open conversation returns to the list

Mobile gesture	Effect
Tap the floating button	Opens the messenger
Tap a conversation	Opens it, full screen if enabled
Tap ⋯ on a conversation, or long press it	Opens its menu
Swipe right from a conversation	Back to the conversations list

How to set it up#

Everything visual is at WP Admin → Better Messages → Settings → Appearance → Mobile.

Full screen#

Control	What it does	Default
Full screen mode	Open the messages page in full screen on mobile devices	On
Open full screen automatically	Enter full screen as soon as the messages page opens	On
Tap to open prompt	A "Tap to open" prompt over the messenger while it sits in the page	On
Swipe to go back	Swipe right to return to the conversations list	On
Hide overlapping theme elements	Hide theme elements that may overlap the messenger in full screen	Off

Conversations list#

Control	What it does	Default
Menu button on conversations	A ⋯ on each conversation in the list, always shown, opening the same menu as a long press	On

Floating chat button#

Control	What it does	Default
Floating chat button	Show the button at all	Off
Side	Left or Right	Right
Distance from the bottom	Clear a sticky footer or bottom nav	20px
Icon	Which glyph the button carries	—

Tab bar#

Control	What it does	Default
Tabs on the bar	Which tabs appear on the bottom bar, and in what order	—
Show only icons	Hide the tab labels. They appear as tooltips instead	Off

Elsewhere in the settings#

Setting	Where	What it does
Hide Chat Button for Roles	Restrictions → Floating Chat Button	Hide the floating chat button from chosen roles
Position on Mobile	Notifications → Onsite Notifications	Where on-site popups appear: Automatic, Always Top, Always Bottom. Automatic shows them at the bottom, but at the top inside a conversation so they do not cover the reply area
Mobile colors	Appearance → Colors → Mobile	The mobile view follows the messenger's colors until you give it its own

Upgrading from 2.x

There is no Settings → Mobile tab any more — it was folded into Appearance → Mobile in 3.0. Your existing values were carried across, including the button's bottom offset, which is now the --bm-mobile-button-bottom token.

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 cannot 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 at around 800px. To shift it, add a custom CSS rule in your child theme or via Appearance → Customize → Additional CSS.

Raise Distance from the bottom to clear a sticky footer, cookie banner or live-chat widget, or move the button with Side.

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 regulars.