JSDoc: Home

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>
        // set queues:
        cvc.setQueues([{"address":"Chat.Queue1@test.com"},{"address":"Chat.Queue2@test.com"}]);
        // adjust log level:
        cvc.setLogLevel('trace');
        // change the user name:
        cvc.setUser("test","test@test.com");
        // add some attached data:
        cvc.setCad({customerId:"1234567", customerType:"gold"});
        // listen to chat state events:
        cvc.attachEvent("chatState", function(ev){
          switch (ev.detail) {
            case "proceeding": // chat in queue, waiting for agent
              cvc.getDetails(function (ev){
                alert(ev.participants[0]); // let's display the current queue
              });
              break; 
            case "connected": // chat connected to agent
              cvc.getDetails(function (ev){
                alert(ev.participants[0]); // let's display agent's alias
              });
              break;
            case "completed": // chat completed
              cvc.getDetails(function (ev){
                alert(JSON.stringify(ev.transcript)); // lets print out the transcript
              });
              break;
          }
        })
        // listen to chat messages:
        cvc.attachEvent("message", function(ev){
          if (ev.detail.content.indexOf('my keywords') !== -1) {
            alert('keywords received'); // perform action based message content
          }
        })
        // auto start the chat:
        cvc.startChat();
      </script>
    </body>
</html>

Methods (21)

(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) setLogLevel(logLevel)

Sets application log level (browser console log).

Parameters:

Name	Type	Description
`logLevel`	'none' \| 'error' \| 'warning' \| 'info' \| 'debug' \| 'trace' \| 'all'	Default: 'trace'

(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. Intended for application internal usage.

Parameters:

Name	Type	Description
`options`	object	Any option settings as a key value map.

(static) setQueues(queues)

Sets target chat queue(s). If more than one queue is provided, UI let's user choose the target queue before starting chat.

Parameters:

Name Type Description

queues

Array.<Object>

Array of queue objects:

Properties

Name	Type	Attributes	Description
`address`	string		Address of chat queue
`id`	string	<optional>	Id of chat queue
`name`	string	<optional>	Name of chat queue

(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

Name	Type	Attributes	Description
`id`	int		interaction id
`error`	string	<optional>	in the case details could not be fetched, this property has the description of error
`transcript`	Array.<ChatMessage>		Message transcript
`participants`	Array.<string>		Participant aliases in the chat
`cad`	object		Attached data
`state`	string		Current chat state

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