Sinch Contact Center Visitor Intermediate Client.
Creates an iframe and loads the Visitor chat application inside it. Provides simple API functions to instruct the application.
Uses cross-origin communication to send command messages between the application and this client.
After the script is loaded, 'cvc' library is added to window scope, where the API functions are available.
Example
<html>
<head>
<script src="../lib/cvc.js" ...> </script>
</head>
<body>
<script>
//change the user name
cvc.setUser("test","test@test.com")
//add some attached data
cvc.setCad({customerId:"1234567"})
//listen to chat ended event
cvc.attachEvent("chatState", function(ev){
if(ev.detail === "completed"){
// chat completed, lets print out the transcript
cvc.getDetails(function (ev){
alert(JSON.stringify(ev.detail.transcript))
});
}
})
// auto start the chat
cvc.startChat()
</script>
</body>
</html>
Methods (19)
(static) attachEvent(eventName, callback, listeneropt)
Attach event listener to an application event.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
eventName |
string | Name of the event | ||
callback |
function | Function to execute on event | ||
listener |
object |
<optional> |
this | Define the scope of the callback |
(static) destroy()
Destroys the iframe container, the host application and the intermediate chat control from the main page.
(static) detachEvent(eventName, callback, listeneropt)
Detach event listener from an application event.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
eventName |
string | Name of the event | ||
callback |
function | Function to execute on event | ||
listener |
object |
<optional> |
this | Define the scope of the callback |
(static) dockContainer(position)
Docks the container in one of the sides.
Parameters:
Name | Type | Description |
---|---|---|
position |
string | one of the following - top, bottom, left, right |
(static) downloadLogs()
Download application logs
(static) exit()
Destroys the iframe container and the host application from the main page.
(static) getDetails(callback)
Get the details of the current interaction
Parameters:
Name | Type | Description |
---|---|---|
callback |
detailsCallback | Executed when details are received |
(static) getOption(propertyopt)
Get an intermediate client option or configuration setting.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
property |
object |
<optional> |
If defined, returns property with then name, otherwise all setting. |
- See:
-
- cvc#_mOptions
(static) init()
Initiates the intermediate chat controller. Reads configuration settings and adds event listeners.
Executed when script is processed.
(static) moveContainer(xPosition, yPosition)
Set the absolute position of the container within the page.
Parameters:
Name | Type | Description |
---|---|---|
xPosition |
number | Position in pixels from the left side of the page |
yPosition |
number | Position in pixels from the top of the page |
(static) resizeContainer(width, height, forceopt)
Set the size of the container.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
width |
number | Width of the container | |
height |
number | Height of the container | |
force |
boolean |
<optional> |
Ignore size constrains |
(static) setCad(cad)
Sets the Call Attach Data to be sent when chat is started or proceeding.
Parameters:
Name | Type | Description |
---|---|---|
cad |
object | Type CAD |
(static) setLanguage(key, translationFileUrlopt)
Sets the language of the application.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
key |
string | Two character language key code | |
translationFileUrl |
string |
<optional> |
Optionally provide URL for externally hosted custom translation file. File name must follow convention: "i18n.key.properties". |
Example
cvc.setLanguage('en', 'https://<my-public-server>/i18n.en.properties'); // Load custom translations for 'en'
// Standard 'en' translations file can be downloaded from: https://<server>/ecf/latest/VisitorChat/resources/i18n/i18n_en.properties
// Note: Check for possibly added or changed translation tags after each system upgrade.
// Helper script for resolving standard 'en' translation file URL. Run while CVC is loaded:
if (cvc) {
const downloadUrl = document.getElementById('cvc-container').getElementsByTagName('iframe')[1].src.split('/VisitorChat/')[0] + '/VisitorChat/resources/i18n/i18n_en.properties';
console.log(downloadUrl); // File is available at this URL
}
(static) setMinimized(minimizedopt)
Toggles the maximized/minimized state of the application.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
minimized |
boolean |
<optional> |
Optionally define should the frame be in minimized state |
(static) setOption(options)
Set an intermediate client option or configuration setting.
Parameters:
Name | Type | Description |
---|---|---|
options |
object | Any option settings as a key value map. |
- See:
(static) setState(stateopt)
Toggles the application state between notification and application state.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
state |
boolean |
<optional> |
Optionally define should the application state be active |
(static) setUser(aliasopt, addressopt)
Sets the user's alias or email address.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
alias |
string |
<optional> |
User alias to be shown in chat |
address |
string |
<optional> |
User email to be displayed for the agent |
(static) setVisible(visibleopt)
Toggles the visibility state of the chat window.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
visible |
boolean |
<optional> |
Optionally define should the window be visible |
(static) startChat()
Creates the iframe, places it in the DOM and loads the visitor host application inside it.
Type Definitions
ChatMessage
Properties:
Name | Type | Description |
---|---|---|
alias |
string | Sender alias |
time |
string | UTC timestamp |
content |
string | Message content |
DetailsCallback(details)
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
details |
object | interaction details
Properties
|
Events
cad
Fired when a CAD (Call Attach Data) object is changed
Parameters:
Name | Type | Description |
---|---|---|
detail |
object | The new CAD object |
chatState
Fired when the state of the chat changes
Parameters:
Name | Type | Description |
---|---|---|
detail |
string | The state of the chat |
message
Fired when a chat message is received
Parameters:
Name | Type | Description |
---|---|---|
detail |
ChatMessage | The new CAD object |
ready
Fired when the client application has finished loading inside the iFrame