- 03 Jan 2024
 - 5 Minutes to read
 
- Print
 - DarkLight
 
Chat
- Updated on 03 Jan 2024
 - 5 Minutes to read
 
- Print
 - DarkLight
 
Chat
Chat Status
You could use the following API to listen to chat status changes:
Comm100API.on('livechat.chat.start', function (chatGuid) { });
Comm100API.on('livechat.chat.end', function () { });
Here, when chat starts, the callback will be triggered with chat ID provided (as string). Chat will
 be considered as started when agent accepts the requesting chat, either accepts manually or
 automatically.
When visitor is waiting, the chat is considered not started yet. You could use the following API to
 listen to the queue position change:
Comm100API.on('livechat.chat.waitingQueue.update', function (queue) { });
Here, queue position data will be provided as an object when callback is triggered. The structure of
 this object is as follows:
const queue = {
  position: 0, // number, position of queue the visitor is in
  waitTime: 0, // number, estimated wait time
};
Agent
Comm100 Live Chat API provides several events related to agents involved in chats, they are:
Agent Join Chat
Comm100API.on('livechat.chat.agent.join', function (agent) { });
Here, agent info is provided as an object when callback is triggered. The structure of this object
 is as follows:
const agent = {
  id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // string, agent id
  name: '', // string, agent name
  title: '', // string, title of agent
  bio: '', // string, bio of agent
};
Agent Leave Chat
Comm100API.on('livechat.chat.agent.leave', function (agent) { });
Here, agent info is provided as an object when callback is triggered. The structure of this object
 is the same as shown above.
Agent Transfer Chat
Comm100API.on('livechat.chat.agent.transfer', function (agent) { });
Here, agent info is provided as an object when callback is triggered. The structure of this object
 is the same as shown above.
Please notice that this agent is the one who transfer the chat to someone else or to some other
 department. If you would like to know who accept the transfer, you should use
 join chat API instead.
Agent Input
Comm100API.on('livechat.chat.agent.input', function (agent, content) { });
Here, agent info is provided as an object when callback is triggered. The structure of this object
 is the same as shown above.
It also provides second parameter, which is the content of agent sent message. For text message,
 content will be string; for attachment or image, content will be an object with property
 name indicating the name of this attachment and url indicating the download link of this
 attachment.
Visitor
Visitor Input
Comm100API.on('livechat.chat.visitor.input', function (content) { });
When visitor sends out text messages, this event will be triggered. When function is called,
 what visitor sends out will be provided as content parameter. Here, content is string.
Please notice that if you configured to mask credit card number, the sensitive data
 will be masked first before providing to you via API.
Visitor Set Email
Comm100API.on('livechat.chat.visitor.setEmail', function (email) { });
This api will inform you when visitor set his/her email address during the chat. Email address
 will be provided as string.
Visitor Send Text Message
You can listen to visitor send text message:
Comm100API.on('livechat.chat.visitor.sendText', function (event) { });
This api will inform you before visitor send text message to agent. The text message content can be accessed via event.data.text. Additionally, you have the capability to abort the message sending process by invoking the event.cancel() method within this callback function.
The event.cancel() method must be invoked synchronously within the callback function.
To send a text message to agent during chat:
Comm100API.do('livechat.chat.visitor.sendText', 'Message content');
Invoking the livechat.chat.visitor.sendText method programmatically does not trigger the event associated with it. Therefore, it is safe to call this method within the event callback function.
With the APIs described above, you can intercept a visitor's text message, modify it, and then forward it to an agent.
Following is an example of masking visitor text when matching a regex:
Comm100API.on('livechat.chat.visitor.sendText', function (event) {
  if (event.data.text) {
    const urlRegex = /https?:\/\/[^\s+]/g;
    // cancel current action, this MUST happen synchronously inside this function
    event.cancel();
    // send masked content
    Comm100API.do('livechat.chat.visitor.sendText', '***');
  }
});
Rating
Comm100API.on('livechat.chat.visitor.rate', function (rating) { });
When visitor rate the agent during chat, callback will be triggered. The rating result will be
 provided as an object, which has the following structure:
const rating = {
  score: 0, // number, rating score
  comment: '', // string, rating comment
}
Please notice that the attribute of strucutre above are optional, it depends on whether you
 have enabled them in Control Panel.
Display
You could listen to display event of chat panel:
Comm100API.on('livechat.chat.display', function () { });
Minimize
You could listen to minimize event of chat panel:
Comm100API.on('livechat.chat.minimize', function () { });
To minimize chat panel manually, use following API:
Comm100API.do('livechat.chat.minimize');
Restore
You could listen to restore event of chat panel:
Comm100API.on('livechat.chat.restore', function () { });
To restore the chat panel manually, use following API:
Comm100API.do('livechat.chat.restore');
Close
You could listen to close event of chat panel:
Comm100API.on('livechat.chat.close', function () { });
To close the chat panel manually, use following API:
Comm100API.do('livechat.chat.close');
Please notice that closing chat will not end chat by default. To ensure the ongoing chat is ended
 before window is closed, you could use the API described below.
End Chat
To end ongoing chat, use following API:
Comm100API.do('livechat.chat.endChat');
Replacement
There are several components in chat panel which can be replaced by your own component, following
 are they and how you could replace:
Header Icons
Comm100API.render('livechat.chat.header.icons', function () {
  // return custom HTMLElement to replace default component
});
Header
Comm100API.render('livechat.chat.header', function () {
  // return custom HTMLElement to replace default component
});
Footer
Comm100API.render('livechat.chat.footer', function () {
  // return custom HTMLElement to replace default component
});
Powered-by Area
Comm100API.render('livechat.chat.footer.poweredby', function () {
  // return custom HTMLElement to replace default component
});
Audio/Video Chat
To initiate audio chat, use following API:
/** @type {Promise<string>} */
const promise = Comm100API.do('livechat.chat.audio.request');
To initiate video chat, use following API:
/** @type {Promise<string>} */
const promise = Comm100API.do('livechat.chat.video.request');
Calling this API is same as clicking audio/video icon on chat window. That means, it might fail if
 audio/video chat is not available. The returned promise will reject with error string when failed.
 Following are possible error strings rejected by promise:
webrtc_not_supported: brorwser of either agent or visitor does not support WebRTC.audio_video_chatting: visitor is either audio chatting or video chatting.frequency_limited: number of messages sent out by visitor during a certain period of time has
reached upper limitation, cannot send out further message at the moment.audio_not_enabled: audio chat is not enabled in this campaignvideo_not_enabled: video chat is not enabled in this campaignnot_chatting: visitor is currently not chatting
Following are available events that can be listened to when audio/video chat status changed:
Request of Audio/Video Chat:
Comm100API.on('livechat.chat.audio.request', function () { });
Comm100API.on('livechat.chat.video.request', function () { });
Refuse of Audio/Video Chat:
Comm100API.on('livechat.chat.audio.refuse', function () { });
Comm100API.on('livechat.chat.video.refuse', function () { });
Start of Audio/Video Chat:
Comm100API.on('livechat.chat.audio.start', function () { });
Comm100API.on('livechat.chat.video.start', function () { });
Stop of Audio/Video Chat:
Comm100API.on('livechat.chat.audio.stop', function () { });
Comm100API.on('livechat.chat.video.stop', function () { });
Cancel of Audio/Video Chat request:
Comm100API.on('livechat.chat.audio.cancel', function () { });
Comm100API.on('livechat.chat.video.cancel', function () { });
Audio/Video Chat request has not been answered:
Comm100API.on('livechat.chat.audio.noanswer', function () { });
Comm100API.on('livechat.chat.video.noanswer', function () { });