Skip to main content

Customize the radius of the mobile chat button

On mobile, Better Messages shows a floating chat button at the bottom of the screen that opens the messenger when tapped. By default it is a 50×50px square with barely-rounded corners — border-radius: 2px. You may want a softer rounded-square look (closer to a chip), a pill shape matching your theme's other floating elements, or a full circle.

The button has the DOM id #bp-better-messages-mini-mobile-open. A single border-radius override is all you need — the rest of the button styling stays untouched. Use 0 for hard corners, 12px to 25px for a rounded square, or 50% for a full circle.

#bp-better-messages-mini-mobile-open {
border-radius: 25px !important;
}

Example of rounded mobile chat button#

Rounded mobile chat button in Better Messages after applying the CSS snippet