Goal
Style the chat surface so it matches the rest of the app: pick the message bubble colors, decide whether timestamps appear on every message, choose the unread-dot color, set up the alert message that fires when a user types a phone number or email address, and color the flag/block buttons. Each setting is per-role, so different roles can see different chat styling in the same app.
Prerequisites
- Chat enabled and the tab bar button visible per Recipe: Enable chat
- WP Admin access
- A role to configure (typically
mam-allto start)
Where the settings live
mam-chat-manager injects a Chat Settings category into the role-aware MAM main settings panel. Find it at Mobile App Manager → App Settings → {role} → Chat Settings. Every key on this tab is stored as a tsl-setting-* per-role option, the same Tier 1 setting format used by the rest of MAM Suite.
The category appears only when mam-chat-manager is active. If you don’t see it, double-check the entitlement and the activation step in Recipe: Enable chat.
The settings
| Setting | Key | Type | Default | What it controls |
|---|---|---|---|---|
| Owner Bubble Color | tsl-setting-chat_owner_bubble_color |
color | #000000 |
Background of the bubble for messages the current user sent. |
| Owner Bubble Text Color | tsl-setting-chat_owner_bubble_text_color |
color | #ffffff |
Text color in the sender’s bubbles. |
| Non-Owner Bubble Color | tsl-setting-chat_non_owner_bubble_color |
color | #ffffff |
Background of the bubble for messages received from someone else. |
| Non-Owner Bubble Text Color | tsl-setting-chat_non_owner_bubble_text_color |
color | #000000 |
Text color in received bubbles. |
| Show Listing Image on List Screen | tsl-setting-chat_show_listing_image |
yes-no | (off) | When a thread is tied to a listing/product, show its featured image as the thread row’s icon. |
| Show timestamp on each message | tsl-setting-chat_show_all_timestamps |
yes-no | (off) | When on, every message renders its own timestamp. When off, the app groups timestamps. |
| Default Avatar Color | tsl-setting-chat_avatar_color |
color | #d3d3d3 |
Background fill for the initials-only avatar shown when a participant has no avatar URL. |
| Bottom view color | tsl-setting-messenger_text_background |
color | (theme default) | Background of the message-input area. |
| Send Chat Icon color | tsl-setting-messenger_text_icon |
color | #000000 |
Color of the send-button glyph. |
| Show chat character counter | tsl-setting-show_chat_counter |
yes-no | (off) | Renders a character counter beneath the input field. |
| Chat alert message for email and phone | tsl-setting-chat_alert_when_using_phone_email |
text | (empty) | When non-empty, the app warns the user with this string if their draft message contains a phone number or email — Apple-friendly contact-info-leakage guard. |
| Chat Unread Dot Color | tsl-setting-chat_unread_dot |
color | #ff0000 |
The colored dot that marks unread threads. |
| Chat Flag Button Background Color | tsl-setting-messenger_flag_button |
color | #000000 |
Background of the in-thread “flag this user” button. |
| Chat Block Button Background Color | tsl-setting-messenger_block_button |
color | #000000 |
Background of the in-thread “block this user” button. |
Steps
1. Open the role’s Chat Settings tab
Go to Mobile App Manager → App Settings. Pick the role you want to configure (most apps start with mam-all). Open the Chat Settings tab.
2. Pick the bubble palette first
The four bubble settings are the most visible. A common palette pattern:
- Owner bubble — your brand’s primary color, with high-contrast text
- Non-owner bubble — a neutral light gray with dark text
Save and check the result in the app before tuning the rest. If the contrast looks wrong, re-run the bubble pair before moving on.
3. Decide on timestamps and listing thumbnails
Two yes/no toggles control the thread-list and message-list density:
- Show timestamp on each message is off by default. Turn it on if your app’s audience sends short, sparse messages and timestamp grouping reads as confusing. Turn it off (the default) for the high-volume case.
- Show Listing Image on List Screen is off by default. Turn it on if most threads in this app are tied to a listing or product — the thumbnail is a strong visual anchor in a long thread list.
4. Set the contact-info alert string (if applicable)
The Chat alert message for email and phone setting is mostly used by app stores’ compliance teams. If your app is reviewed by Apple, expect a request to add a contact-leakage warning. A typical value:
Sharing personal contact information through chat is discouraged. Only share what you're comfortable making public.Leaving the field empty silences the warning entirely.
5. Style the input area, flag button, and block button
The remaining settings — Bottom view color, Send Chat Icon color, Show chat character counter, Chat Unread Dot Color, Chat Flag Button Background Color, Chat Block Button Background Color — are independent of one another. Tune them one at a time.
The flag and block buttons are required surfaces for app-store compliance; you can change their color but not whether they appear.
6. Save and verify
Save the role. Open the mobile app as a user in that role. Walk through:
- Send a test message and confirm the owner bubble color/text are correct.
- Receive a test message and confirm the non-owner bubble color/text are correct.
- Check the unread dot color on the thread list when a thread has unread messages.
- Type a phone number into the message input and confirm the alert (if set) fires.
- Tap the flag button on a message and confirm the dialog renders with the configured color.
Variations
Apply different chat styling per role
Each setting is per-role. Configure mam-all first, then duplicate the values into each additional role and tweak the differences. Roles do not inherit chat settings; an unset value falls back to the per-setting default in the table above.
Use the same input-area color as the app’s bottom navigation
Most apps look best when the message-input area matches the bottom tab bar. Take the tab bar color from Mobile App Manager → App Settings → {role} → Tab Bar Settings and paste it into Bottom view color.
Verification
This article was last verified against:
- Plugin:
mam-chat-managerv2.0.0 - Source:
includes/mam_chat_manager_admin_settings.php(mam_add_setting_to_main(),mam_add_settings_categories_to_main())
Re-verify whenever a tsl-setting-* chat key is added, removed, or renamed; whenever a default value in mam_add_setting_to_main() changes; or whenever the Chat Settings category title changes.
Common gotchas
- Defaults only apply when the value is unset. A setting saved as an empty string is not “unset” — the empty string overrides the default. If a role’s color defaults to its plugin default in your test app, the setting was never saved; if the color is empty/transparent, an empty string was saved.
- The flag/block buttons cannot be hidden. They are part of the messaging-compliance surface and always render. Coloring them to match the bubble background hides them visually but is not recommended — Apple/Google reviews catch this.
- The character counter is per-role even though most apps want it everywhere. If you add it to one role, remember to mirror the change to the others.
Related articles
- Plugin: mam-chat-manager
- Recipe: Enable chat
- Recipe: Configure the admin support chat
Metadata
| Field | Value |
|---|---|
| Article type | Recipe (Admin) |
| Plugin slug | mam-chat-manager |
| Applies to plugin version | 2.0.0+ |
| Category | Building Your App |
| Audience | WordPress admin |
| Estimated time | 10 minutes |
| Prerequisites article | Recipe: Enable chat |
| Last verified | 2026-05-01 |
