Bubble Settings

Customize the chat bubble that users click to open your widget. Control its appearance, position, icon, and behavior.

Floating Widget Only

Bubble settings only apply to floating widgets. Inline and fullscreen widgets don't use a bubble.

Bubble Position

Choose where the bubble appears on your page. The position affects user accessibility and visual hierarchy.

Bottom Right

Most common position. Natural for left-to-right languages. Doesn't interfere with navigation.

Bottom Left

Good for right-to-left languages. Use when right side has other elements.

Top Right

Immediately visible without scrolling. Be careful not to overlap navigation.

Top Left

Uncommon but useful for specific layouts or to match brand guidelines.

Position Offset

Fine-tune the bubble's exact position with offset values:

Horizontal Offset: Distance from the left or right edge (default: 24px)
Vertical Offset: Distance from the top or bottom edge (default: 24px)

Mobile Optimization

On mobile devices, offsets are automatically adjusted to prevent the bubble from being cut off or interfering with system UI.

Bubble Appearance

Background Color

The bubble's background color should match your brand and stand out against your page background.

Best Practices:

Use your primary brand color for consistency
Ensure sufficient contrast with page background
Test visibility on both light and dark sections
Consider accessibility (WCAG contrast ratios)

Icon

Choose an icon that represents your chat functionality. Common options include:

Message

💬

Chat Bubble

🤖

Robot

👋

Wave

Custom Icons

You can upload custom SVG or image files for your bubble icon. Recommended size: 32x32px to 48x48px.

Size

Adjust the bubble size to match your design. Standard sizes:

Small: 48px - Subtle and unobtrusive
Medium: 60px - Default, balances visibility and space
Large: 72px - High visibility, good for emphasis
Extra Large: 84px - Maximum impact

Bubble Behavior

Animation

Add subtle animations to draw attention to the bubble:

Pulse

Gentle scaling effect that repeats periodically. Great for subtle attention-grabbing.

Bounce

Small bounce effect when the widget loads. More noticeable than pulse.

Shake

Gentle shake to draw immediate attention. Use sparingly.

None

No animation. Clean and professional appearance.

Badge

Display a notification badge on the bubble to show unread messages or draw attention:

Unread Count: Shows number of unread messages
Notification Dot: Simple red dot indicator
Custom Text: Display custom text like "New" or "Help"

Auto-Open

Configure the bubble to automatically open the chat window under certain conditions:

User Experience

Use auto-open sparingly. Many users find unexpected pop-ups disruptive. Consider using a tooltip instead to gently encourage interaction.

Accessibility

Ensure your bubble is accessible to all users:

Alt Text: Provide descriptive text for screen readers (e.g., "Open chat support")
Keyboard Navigation: The bubble is automatically keyboard accessible with Tab key
Focus Indicator: Visible focus outline appears when navigating with keyboard
ARIA Labels: Proper ARIA attributes for assistive technologies
Touch Target Size: Minimum 44x44px for mobile touch targets (automatically enforced)

Next: Configure Tooltip

Learn how to add a tooltip message that encourages users to start chatting.

Tooltip Settings →