Take advantage of events and extend chat window features using JavaScript.
A layered chat window can trigger events during its life-cycle and allows you to work with JavaScript without restrictions.
On the Customization tab, select Layered - Detailed and select the Includes key group. Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:
Every layered chat window is comprised of a window and a frame object.
There are two ways to attach event listeners:
Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
chat-ended | bc_chatEndedEventCallback | Chat ended | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the agent and the customer accepts to be redirected to the target URL |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
resize | bc_resizeEventCallback | Elements resized |
Event | Global function name | Description | Arguments |
---|---|---|---|
new-message | bc_newHistoryMessageCallback | New message added to chat history |
|
page-loaded | bc_chatWindowLoadedEventCallback | Page loaded | |
chat-ended | bc_chatEndedEventCallback | Chat ended | |
chat-closed | bc_chatClosedEventCallback | Chat closed | |
push-page | bc_pushPageEventCallback | A PushPage request sent by the agent and the customer accepts to be redirected to the target URL |
|
resize | bc_resizeEventCallback | Elements resized | |
maximized | bc_chatWindowMaximizedEventCallback | Frame maximized | |
minimized | bc_chatWindowMinimizeEventCallback | Frame minimized |
The following snippets provide two different implementations of the same functionality.
iFrame object snippet (addListener method)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"push-page": "bc_pushPageEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"resize": "bc_resizeEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured inside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}
window object snippet (global function)
var _tEvents = {
"new-message": "bc_newHistoryMessageCallback",
"resize": "bc_resizeEventCallback",
"chat-closed": "bc_chatClosedEventCallback",
"chat-ended": "bc_chatEndedEventCallback",
"minimized": "bc_chatWindowMinimizeEventCallback",
"maximized": "bc_chatWindowMaximizedEventCallback",
"page-loaded": "bc_chatWindowLoadedEventCallback",
"push-page": "bc_pushPageEventCallback"
},
_tFunction = function(i, type, fName) {
console.warn("event \"" + i + "\" captured outside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
};
for (var i in _tEvents) {
mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}