back to top ⇧

cvc

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
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