Skip to main content

UI Styling Configuration

Customize the visual appearance of your Focus Chat widget to match your brand and design system.

Typography​

Customize fonts and text sizing across all UI elements:

{
  "font_family": "Inter, system-ui, sans-serif",
  "title": "Customer Support",
  "title_font_weight": "600",
  "title_font_size": "18px",
  "message_font_size": "16px",
  "input_font_size": "16px"
}

Header Styling​

Customize the header appearance and colors:

{
  "header_color": "white",
  "header_background_color": "#1f2937",
  "header_icon_hover_background_color": "#374151"
}

Body and Background​

Customize the main chat area and branding:

{
  "body_background_color": "#f9fafb",
  "branding_color": "#6b7280"
}

Message Styling​

Customize the appearance of chat messages:

{
  "assistant_message_background_color": "#ffffff",
  "assistant_message_color": "#111827",
  "user_message_background_color": "#3b82f6",
  "user_message_color": "white"
}

Input Field Styling​

Customize the message input field appearance:

{
  "input_background_color": "white",
  "input_text_color": "#111827",
  "input_message_placeholder": "Type your message...",
  "input_message_placeholder_color": "#9ca3af"
}

Send Button Styling​

Customize the send button appearance:

{
  "send_button_background_color": "#3b82f6",
  "send_button_hover_background_color": "#2563eb"
}

Using Theme Variables​

Apply themes dynamically with CSS variables:

:root {
  --theme-primary: #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-background: #f8fafc;
  --theme-text: #1e293b;
}
{
  "header_background_color": "var(--theme-primary)",
  "user_message_background_color": "var(--theme-primary)",
  "send_button_background_color": "var(--theme-primary)",
  "send_button_hover_background_color": "var(--theme-primary-hover)",
  "body_background_color": "var(--theme-background)",
  "assistant_message_color": "var(--theme-text)"
}

Best Practices​

  • Minimum font sizes: Use 16px minimum for input fields to prevent zoom on iOS
  • Touch targets: Ensure buttons are at least 44px for comfortable touch interaction
  • Contrast ratios: Maintain WCAG AA compliance (4.5:1 for normal text)
  • Viewport units: Use vw and vh for responsive sizing when appropriate

Next Steps​