Skip to main content

Smash Chat Customization

Tailor the look and feel of the AI chat widget to your brand.

Overview​

Smash AI Chat is highly customizable. You can change its colors, icons, and layout using CSS variables and component props.

Theming with CSS Variables​

The widget uses CSS variables for its styling, which are automatically updated by LibreApps Desktop theme system. You can also override them manually:

:root {
  --smash-chat-primary: #6366f1;
  --smash-chat-background: #ffffff;
  --smash-chat-text: #1f2937;
  --smash-chat-radius: 0.75rem;
}

Custom Icons​

You can replace the default chat icon and send button icon by passing them as props:

import { MessageSquare, Send } from 'lucide-react';

<SmashChatWidget 
  icon={<MessageSquare className="w-6 h-6" />}
  sendIcon={<Send className="w-4 h-4" />}
/>

Layout Options​

Floating vs. Embedded​

By default, the widget is a floating button that opens a chat window. You can also embed it directly into a page:

<SmashChatWidget mode="embedded" />

Custom Header​

You can provide a custom React component for the chat header:

<SmashChatWidget 
  header={<div className="p-4 bg-blue-500 text-white">Custom Header</div>}
/>

Best Practices​

  • ✅ Do this: Use the same primary color for the widget as your dashboard for a cohesive look.
  • ✅ Do this: Test the widget's appearance in both light and dark modes.
  • ❌ Don't do this: Over-customize the widget to the point where it becomes unrecognizable or difficult to use.