zyechat
Docs/SDK/API Reference

API Reference

Complete reference for all Widget component props and their usage.

TypeScript Support

The ZyeChat SDK is built with TypeScript and includes full type definitions for the best developer experience.

Widget Props

PropType
apiKeystring
apiBaseUrlstring
botNamestring
primaryColorstring
backgroundColorstring
textColorstring
greetingstring
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
widthstring
heightstring
theme'light' | 'dark' | 'auto'
initialOpenboolean
onSendSuccess(payload: { message: string; response: unknown }) => void
onSendError(error: unknown) => void

Prop Details

apiKeyRequired

string

Your API key for authentication. Get this from your ZyeChat dashboard.

tsx
1
apiKey="your-api-key-here"
apiBaseUrl

string

Base URL for the backend API. Defaults to "https://api.zyechat.com"

tsx
1
apiBaseUrl="http://localhost:3000"
botName

string

Bot name displayed in the widget header. Defaults to "zyechat"

tsx
1
botName="Customer Support"
primaryColor

string

Primary brand color for header and buttons. Defaults to "#111827"

tsx
1
primaryColor="#3b82f6"
backgroundColor

string

Panel background color. Defaults to "#ffffff"

tsx
1
backgroundColor="#ffffff"
textColor

string

Text color throughout the widget. Defaults to "#111827"

tsx
1
textColor="#111827"
greeting

string

Initial greeting message shown when widget opens.

tsx
1
greeting="Hello! How can I help you?"
position

'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

Position of the toggle button. Defaults to "bottom-right"

tsx
1
position="bottom-right"
width

string

Fixed width of the widget panel. Defaults to "75vw"

tsx
1
width="600px"
height

string

Fixed height of the widget panel. Defaults to "75vh"

tsx
1
height="700px"
theme

'light' | 'dark' | 'auto'

Force theme mode or auto-detect from system/website. Defaults to "auto"

tsx
1
theme="auto"
initialOpen

boolean

Open widget automatically on mount. Defaults to false

tsx
1
initialOpen={true}
onSendSuccess

(payload: { message: string; response: unknown }) => void

Callback fired when a message is successfully sent.

tsx
1
onSendSuccess={({ message, response }) => console.log("Sent:", message)}
onSendError

(error: unknown) => void

Callback fired when sending a message fails.

tsx
1
onSendError={(error) => console.error("Error:", error)}

Full Example

tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Widget } from '@zyenova/zyechat';
import '@zyenova/zyechat/widget.css';

function App() {
  return (
    <Widget
      apiKey="your-api-key"
      botName="Support Bot"
      primaryColor="#3b82f6"
      theme="auto"
      position="bottom-right"
      greeting="Hi! How can I help you today?"
      onSendSuccess={({ message }) => {
        console.log('Message sent:', message);
      }}
    />
  );
}
Getting StartedCustomization