Examples
Real-world examples and use cases for the ZyeChat SDK.
Basic Example
The simplest possible integration:
tsx
1
2
3
4
5
6
7
8
import { Widget } from '@zyenova/zyechat';
import '@zyenova/zyechat/widget.css';
function App() {
return (
<Widget apiKey="your-api-key" />
);
}Custom Branding
Match your brand colors and styling:
tsx
1
2
3
4
5
6
7
8
<Widget
apiKey="your-api-key"
botName="Acme Support"
primaryColor="#0066cc"
backgroundColor="#ffffff"
textColor="#333333"
greeting="Welcome to Acme! How can we help?"
/>Custom Icons
Use React components or custom icons:
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} />}
/>Emoji Icons
tsx
1
2
3
4
5
<Widget
apiKey="your-api-key"
botIcon="💬"
userIcon="😊"
/>With Callbacks
Handle success and error events:
tsx
1
2
3
4
5
6
7
8
9
10
11
<Widget
apiKey="your-api-key"
onSendSuccess={({ message, response }) => {
console.log('Message sent:', message);
// Track analytics, update UI, etc.
}}
onSendError={(error) => {
console.error('Send failed:', error);
// Show error notification, retry, etc.
}}
/>Next.js Example
Complete example for Next.js applications:
tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use client';
import { Widget } from '@zyenova/zyechat';
import '@zyenova/zyechat/widget.css';
export default function HomePage() {
return (
<div>
<h1>My App</h1>
<Widget
apiKey={process.env.NEXT_PUBLIC_ZYECHAT_API_KEY}
botName="Support"
greeting="Hello! How can I help?"
/>
</div>
);
}