Customization
Learn how to customize every aspect of your chat widget.
Colors
Customize the widget colors to match your brand:
primaryColor
Controls the header background and button colors.
tsx
1
primaryColor="#3b82f6"backgroundColor
Panel background color.
tsx
1
backgroundColor="#ffffff"textColor
Text color throughout the widget.
tsx
1
textColor="#111827"Size and Position
Configure the widget size and position on your page:
tsx
1
2
3
4
5
6
<Widget
apiKey="your-api-key"
width="600px" // Fixed width
height="700px" // Fixed height
position="bottom-right" // Toggle button position
/>Content
Customize the text content displayed in the widget:
tsx
1
2
3
4
5
6
7
<Widget
apiKey="your-api-key"
botName="Your Bot Name"
greeting="Welcome message here"
placeholder="Custom placeholder..."
sendLabel="Send Message"
/>Icons
Customize bot and user avatars with emojis or React components:
Using Emojis
tsx
1
2
3
4
5
<Widget
apiKey="your-api-key"
botIcon="🤖"
userIcon="👤"
/>Using React Components
tsx
1
2
3
4
5
6
7
import { MessageCircle, User } from 'lucide-react';
<Widget
apiKey="your-api-key"
botIcon={<MessageCircle size={20} />}
userIcon={<User size={20} />}
/>Complete Example
Here's a fully customized widget example:
tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Widget
apiKey="your-api-key"
botName="Acme Support"
primaryColor="#0066cc"
backgroundColor="#ffffff"
textColor="#333333"
width="600px"
height="700px"
position="bottom-right"
greeting="Welcome to Acme! How can we help?"
placeholder="Type your message..."
sendLabel="Send"
botIcon="💬"
userIcon="😊"
/>