Website widget

The widget is JavaScript file. It automatically connects to Chatix server and establishing a connection between visitor and consultant. Widget control options are available in the dashboard at the Settings page.
Setting up
Every widget has its own unique code. You could see your widget install code in the dashboard at the Settings page. Install code below is a sample, do not try to use it.
<script 
  id="chatix_init" 
  src="https://chatix.io/widget/chatix_widget_main.js" 
  data-websiteid="d4913f83-e3a8-484d-be1b-c64ffe248500">
</script>
Widget code supports data-websiteid and data-visitorid attributes.
You can save visitor ID in Chatix in your database.
On visitor signing in, your website can set visitor ID in data-visitorid attribute and Chatix will load messages related to this visitor.
Widget object
The widget script creates global variable chatixWidget that is used to control widget. You could use this object, it’s properties, methods and callbacks to create new features for your web chat, implement extra logic, pass additional information like visitor internal ID, cart, CRM status, etc. to your consultant to provide better customer service.
Widget connection callback
This callback is being called after widget established a connection and ready to work.
chatixWidget.onConnect = function() {
  console.log('Chatix connected successfully');
}
Setting up visitor information
Your CMS probably know some useful information about visitor like name, email, internal ID, order status and other. You could use method chatixWidget. setVisitor (visitor) to pass information about the visitor to your consultant. This method requires the visitor object. This object should have 3 fields: name, email, fields. name — visitor name, email — visitor email, fields — an array of additional visitor data (internal ID, order status, CRM status, etc.) Each object in fields must have 2 text fields name and value. Name stores characteristic’s name and Value stores characteristic’s value.
chatixWidget.setVisitor({
  "name": "Jon Snow",
  "email": "jonsnow@stark.house",
  "fields": [{
      "name": "House",
      "value": "Stark"
    }, {
      "name": "Status",
      "value": "Priority customer"
  }]
});
Note that widget object (chatixWidget) filled only after connection will be established. Before this references to properties or calling methods like chatixWidget. setVisitor (visitor) could cause errors.
Use callback chatixWidget. onConnect () to be sure your code will be executed without errors.
Message received callback
Register handler for this callback if you need to do actions when visitor receives message
chatixWidget.onNewMessageReceived = function(message) {
  console.log("message received!", message);
};
Message sent callback
Register handler for this callback if you need to do actions when visitor sends message
chatixWidget.onNewMessageSent = function(message) {
  console.log("message sent!", message);
};
Consultant connected callback
Register handler for this callback if you need to do actions when consultant connects to conversation
chatixWidget.onManagerConnected = function(manager) {
  console.log("manager connected!", manager);
};
Manager disconnected callback
Register handler for this callback if you need to do actions when consultant disconnects from conversation
chatixWidget.onManagerDisconnected = function(manager) {
  console.log("manager disconnected!", manager);
};
Note one conversation could be between 1 visitor and 0, 1 and more consultants.
You need something special
The widget is designed to be easy to install and simple to use. If you need extra control or native integration into your web app - please look at our SDK.

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