Chatix Core

Chatix Core — JavaScript SDK provides you full functionality of Chatix platform. SDK is made intuitive and easy to use. With Chatix webchat development becomes very fast and does not require advanced skills.
Differences from the widget
Widget presents one of possible variation about webchat and wrapps this SDK. Basically you can use widget and have access to SDK, but if you need extra control, you should use SDK to be able build your own chat. Unlike widget, SDK has to be added with NPM-package chatix-core.
npm i chatix-core
SDK usage required basic knowlege of package managment tools like NPM and building tools like Webpack. We are working to make SDK avaliable to be install without package manager.

SDK FAQ

Q:
When should I use SDK instead of Widget?
A:
In a nutshell, if you want to use only webchat between visitors and consultants, and our widget look good for your site, widget could be good for you. If you want to have all functionalities of Chatix or you want to buil your own widget — use SDK.
Q:
What skills should I have to work with SDK?
A:
For the beginning you should have basic skills of HTML, CSS and JavaScript. We tried to make working with SDK easy and wrote detailed documentation. Also, you can see examples and lessons in your GitHub repo.
General principles of working with ChatixCore
All of your work will lead you to main ChatixCore object. This object provides diferrent methods designed to send and receive date, and properties for callback-functions, that will be executed on receiving any event (e.g. receiving new message). Besides ChatixCore, you will use additiona classes like Message, Visitor, Manager and others.
Installation
// Install chatix-core package with your favorite package manager
// Import ChatixCore in your app.
// Note: There has to be only one instance of SDK in your application.
import ChatixCore from 'chatix-core';

// Construct ChatixCore object and pass your websiteId to it. Deatiled docs about SDK properties and methods below.
let core = new ChatixCore(websiteId);
// Start connection calling this method.
core.start(); 

SDK usage

Main object ChatixCore
ChatixCore — is a main object. Everything should be done with using this object. You have an access to it's properties and methods to develop your own webchat.
ChatixCore constructor
You have to pass your websiteId to ChatixCore constructor. Also, you can pass visitorId if you know exactly what ID Chatix assigned to you visitor earlier.
Properties
Methods
start() : void
This method starts network activity. You can choose when to start Chatix, as soon as possible, or on some event. This method doesn't return anything, but when connection established, onConnected callback-function will be executed.
getWebChatInfo(): Promise<ChatInfo>
Method returns webchat configuration from Chatix. It can be useful to determite working hours or allow dynamic chat styling from dashboard. Returns data as ChatInfo object, that's description you can see in "Additional Classes" section.
See ChatInfo
getWebChatManagers(): Promise<Manager[]>
Method returns all webchat consultants. It could be useful to display consultants' names, avatars and other information. You can find Manager class declaration in "Additional classes" section.
See Manager
getWebChatConnectedManagers(): Promise<Manager[]>
Method returns all webchat consultants, who is connected to conversation with current visitor. It could be useful to display consultants' names, avatars and other information. You can find Manager class declaration in "Additional classes" section.
See Manager
getVisitor(): Promise<Visitor>
Method returns current visitor. You can use it to display visitor name, avatar or other information in chat. You can see Visitor class declaration in "Additional classes" section.
See Visitor
setVisitor(visitor: Visitor): void
Method updates Visitor details in Chatix. You can set visitor name, email, and custom fields, that can be useful for your customer managment team and they can provide better service for your customer. You can see Visitor class declaration in "Additional classes" section.
See Visitor
getWebsiteMessages(lastMessageId: string = null, count: int = 30): Promise<Message[]>
Method returns array of messages from webchat with consultants. All messages are stored in historical order and returns in packs. Pack sile is managed by count parameter. If you want to get last messages from conversation, set parameter lastMessageId to NULL. If you want to display next pack of messages, you have to define what is the oldest message you already received, and pass it ID to lastMessageId parameter. SDK will collect into new pack and return it to you. If method returns empty array, that means you reached the beginnging of conversation and there is not any more messages to display.
See Message
visitorType(text: string = null): void
Chatix allows consultants to see what visitor is typing in message field even when message was not sent yet. This option provides opportunity to prepare answer earlier and respond much more faster. You can subscribe for message input change event and sent it's content when visitor types.
sendWebsiteFileMessage(file: File): void
Method sends file to chat with consultant.
sendWebsiteTextMessage(text: string): void
Method sends text message to chat with consultant.
allowScreenCast(answer: boolean): void
Chatix allows screencasting from visitor to consultants. Firstly, consultant requests permission to see visitor's screen (you receive it with onRequestScreencast callback). This method sends visitor's choise (allow or deny screencast request) to Chatix. If you want to hide some blocks from consultants, add them class ym-disable-keys. Blocks with this class will not be broadcasted to consultants.
interruptScreenCast(): void
May be your visitor want to stop broadcasting his screen to consultants. With this method visitor can interrupt screencast. Consultants will be forsed to disconnect from screencast and it will be stopped until visitor allows another one.
Additional classes
Besides main ChatixCore object, SDK uses additional classes, that helps to work with data and keep development strict and predictable.
Visitor
Object explains current website visitor.
Manager
This object represents webchat consultant. Note: there could be more then one consultant in chat with visitor at the same time. You can use uuid field to identify consultants.
Message
This class represents webchat message. There are 3 different types of messages in Chatix: text message, image message and file message. Chatix does not support combinations like "image with text". You can achieve this using visual effects.
This class is used while working with received or saved messages in method getWebchatMessages and callback onReceivedWebsiteMessage. This object is not used to send messages.
ImageMessage
While handling images, Chatix creates previews in 100px and 300px on the largest side. When you receive image message (type==4) you receive ImageMessage object, that extends basic Message with image fields.
ChatInfo
This object represents detailed information about webchat configuration in Chatix.
ScheduleItem
This class represents working hours of one of weekday. Hours are defined in webchat timezone .Note: webchat and visitor can be in different timezones. Use webchat timezone offset (ChatInfo.time_zone_utc_offset) and Visitor.time_zone_offset to define working hours with respect to time zones.
ChatStyle
Object represents webchat styling configuration. You can develop chat with respect to this object to make your webchat dynamic and give you team an option to configurate it from the Chatix dashboard.

© All Right Reserved. Sovinfsystemi LLC.
hello@chatix.io