Message Styling
Customize how messages appear in the conversation, including bubbles, avatars, timestamps, and animations.
Message Bubbles
User Messages
Customize how user messages appear in the conversation:
- • Right-aligned by default
- • Background matches primary color
- • White or high-contrast text
- • Rounded corners for modern look
Bot Messages
Customize bot response appearance:
- • Left-aligned by default
- • Light background for contrast
- • Dark text for readability
- • Can include rich content (images, links)
System Messages
Special styling for system notifications and status updates:
Center-aligned, subtle styling for system messages
Avatars
Show Avatars
Display avatars next to messages for visual identification:
Bot Avatar
Upload a logo or icon to represent your bot. Builds brand recognition.
User Avatar
Optional avatar for users. Can use initials, generic icon, or user profile picture.
Avatar Shapes
Choose between different avatar styles:
Circle
Rounded Square
Square
Avatar Size
Control avatar dimensions:
Timestamps
Display Options
Control when and how timestamps are shown:
Always Show
Display timestamp on every message. Useful for support chats where timing matters.
Show on Hover
Timestamp appears when hovering over message. Keeps interface clean.
Group by Time
Show timestamp only when messages are 5+ minutes apart.
Format
Choose timestamp format:
- • Relative: "Just now", "2 minutes ago", "1 hour ago"
- • Time Only: "2:34 PM"
- • Date + Time: "Dec 5, 2:34 PM"
- • Full: "December 5, 2024 at 2:34:15 PM"
Message Animations
Entrance Animations
Animate messages as they appear:
Fade In
Smooth opacity transition. Subtle and professional.
Slide Up
Message slides in from bottom. Natural chat feel.
Scale
Grows from small to full size. Playful and dynamic.
Typing Indicator
Show when the bot is composing a response:
Message Grouping
Control how consecutive messages from the same sender are displayed:
Grouped Messages
Avatar and timestamp shown once for group
Individual Messages
Each message fully independent
Next: Chat Behavior
Learn how to configure chat behavior, delays, and interaction patterns.
Chat Behavior →