Layered chat window scripting
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.
Adding custom scripts
Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:
- Chat Frame Javascript Include: Listeners and handlers run inside the iFrame object
- Chat Window Javascript Include
What is the difference between a chat window and a chat frame?
Every layered chat window comprise a window and a frame object.
- A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded. As a consequence, listeners and handlers run outside the context of the iFrame object.
Note: If the ancestor of a chat window is a separate window or tab, outside events, listeners and functions are not used.
- A chat frame object is the window object of the innermost iFrame object, in which the chat runs.
Note: If the ancestor of a chat window is a separate window object, the scope is the window object of the standalone window or tab.
Using events and listeners
There are two ways to attach event listeners:
- Use the mobileChat.addListener(eventName, eventHandler) method to register the handler.
Important: eventName must be a valid event and eventHandler must be a callable function object, otherwise the listener throws an error.
- Create a global function.
- Mix the methods above
- Call the addListener method more than once using the same event name
Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.
List of event functions
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 operator and the visitor 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 operator and the visitor 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.
- Create two listeners for every available event
- Log the following to the console when an event is captured:
- event name
- event context
- listener type
- function name if the listener is a global function
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]);
}