ecf developer guide 1 ecf developer guide 5 2 before you start 8 3 simultaneous interactions 12 4...

Developer Guide CUSTOMER

Document Version: 1711 – 2017-11-27

ECF Developer Guide

Content

1 ECF Developer Guide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Before You Start. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

3 Simultaneous Interactions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4 Developing Your Host Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.1 Basics of ECF Host Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154.2 Login. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.3 Interaction Handling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.4 Status. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164.5 Presence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.6 Queue Login. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.7 Chat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Understanding Chat Life Cycle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Creating a Visitor Host App for Text Chat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Creating an Agent Host App for Text Chat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Adding Video to Your Chat Host App (Video Over Chat). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Accessing the Chat Transcript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Adding Queue Information to Visitor Host Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.8 Voice Functionality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35Creating Agent Host Application for the Voice Functionality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37

4.9 Transfer and Destination Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404.10 E-Mail Functionality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

E-Mail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41New. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.11 Scripting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42

5 Changing the Interaction Display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

6 Visitor Chat Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7 Events and Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607.1 Working with Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .607.2 Working with Custom Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

8 Configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688.1 Configuring Queue Settings in System Configurator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688.2 Configuring User Settings in System Configurator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

2 C U S T O M E RECF Developer Guide

Content

8.3 Configuring Browser Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728.4 Configuring SBC Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

9 Log Writing and Language Settings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.1 Defining Log Levels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.2 Saving Log to File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.3 Setting Language in ECF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

10 Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7610.1 Interaction Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Accept. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Reject. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Handle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79Interaction Tab. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Interaction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Transfer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80Consult. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

10.2 Agent Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Status. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Queue Login. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86Presence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Destination Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

10.3 Information Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Message. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Popup. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Channel Status. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88

10.4 Chat Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Chat Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89Send Chat. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90Chat Transcript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Hang Up. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92Video Toggle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Typing Indicator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

10.5 Call Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Call. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Hold Toggle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Mute Toggle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96SIPStack. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

10.6 Visitor Queue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9810.7 E-Mail Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

E-Mail Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

ECF Developer GuideContent C U S T O M E R 3

New Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100E-Mail History Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

10.8 Script Controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103Script Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Script History Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

11 Embedding an ECF Host Application in C4C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10611.1 Defining Mashup in C4C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10611.2 Activating Mashup in C4C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10811.3 Enabling Phone and Chat Activity in C4C. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11411.4 Installing the C4C Desktop CTI Adapter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115


Content

1 ECF Developer Guide

The SAP ECF is a set of JavaScript controls and API’s based on SAPUI5 client-side library. ECF allows you to easily and seamlessly embed contact center functionality into your business applications. It provides a lightweight programming model for desktop. Based on JavaScript and SAPUI5 it complies with OpenAjax and can be used together with standard JavaScript libraries.

ECF Functionality

The following tables list the available functions and their release version.

1708

Function Description

Consultation During a phone call or a chat, users can have a consultation call to another number or send a text chat to another user. It's also possible to connect the original interaction and the consultation interaction by using the transfer function.

Facebook messages The system supports Facebook messages.

1705


E-mail attachment Users can receive attachments and add them to their e-mail messages.

Script history Users can view script results.

E-mail history Users can view e-mails that have been saved into the database.

SMS chat The system supports SMS messages.

1702


Scripting Users can fill out scripts when they are handling interactions. Supported script types are static script and interactive script.

E-mail Users can send and receive e-mails.

ECF Developer GuideECF Developer Guide C U S T O M E R 5


Tomcat logs Tomcat logs are written to the default CCTR VU log folder instead of Tomcat’s log folder.

1611


Destination input Users can search for queues and other users and choose from the search results the destination for an ongoing call or chat transfer. Users can also enter a number for placing a new call or transfer call to a number that is not in the directory.

Transfer Users can transfer an ongoing:

● Call to another number.● Chat to another chat user or to a queue.

ECF Front End Server logs ECF Front End Server creates two separate log files. One file is for the Native C++ based ECF Front Server and the other file is for Java-based ECF Front End Server.

Versioning ECF package contains the latest version and the previous version of ECF.

The paths from 1611 onwards are of the following format:

● Controls: https://[TomcatURL]/ecf/[version]/● Reference applications: https://[TomcatURL]/ecf/[ver

sion]/sample● Live Activity Window: https://[TomcatURL]/ecf/[ver

sion]/ecfliveactivity

The 1608 paths are same as before.

Basic authentication change If you use the Basic Authentication method, you must create the login dialog window. For code example, see the reference host application.

1608


Voice Users can make calls, receive them, mute them and put them on hold.

Presence Users view and change their active presence profile.

Queue statistics The agent queue login control shows longest queueing time, how many contacts are queueing, the number of agents serving and the number of free agents.


ECF Developer Guide


Chat enhancements ● Visitor queue: average waiting time and whether queue is open or closed

● Typing indicator● Support for HTML content● Stop and start toggle for an in-queue video

Security improvements ● There are no longer hardcoded passwords for certificates. They are now defined in IA.

● Windows certificate is supported.

Installation ● An agent host application and a visitor host application are included in the ECF package.

● UI5 is shipped with the ECF package. However, it must be installed manually.

● Terminal Server is now included in Agent Server so there is no separate Terminal Server package.

● The ECF Virtual Unit template has been removed.

SP09


Queue login Users can log on to and log off from queues on the host application UI.

Text and video chat Users can receive text and video chats.

Chat controls at the visitor end In this case the variable Front End Server Mode in ECF Web Server must have the value Visitor Facing Mode.

Authentication possible with OAuth The authentication method is selected in Infrastructure Administrator.

The user account information related to OAuth is configured in

System Configurator User and Role Management Users

Certificates .

STUN/TURN server for streaming WebRTC data (in video chat)

This can be used, for example, in networks with firewalls and NATs.

Install the STUN/TURN server and then define its settings in IA.

SP08


ECF task Business process routing items are created to SAP Contact Center via Task Management Interface (TMI).

ECF Developer GuideECF Developer Guide C U S T O M E R 7

2 Before You Start

Here is some important information and tips to get you on your way.

API Reference

You can find the JSDocs at the following location: https://[TomcatURL]/ecf/[version]/docs/ecf/

They contain information about, for example, how to modify the default appearance of controls.

For example, the JSDocs of 1611 are at https://[TomcatURL]/ecf/1611/docs/ecf/.

Reference Applications

ECF includes following reference applications:

● SAP ECF AgentAn application for agent defined in an SAP Contact Center system. The agent can:○ See and change the work status.○ See and change own presence profile.○ See queue statistics.○ Log in to and log out from queues.○ Handle interactions: tasks, text chats, video chats, and calls.○ Transfer an ongoing chat or call.

The application is located at https://[TomcatURL]/ecf/[version]/sample/agent.html.● SAP ECF Visitor

An application for chat “customers”. They can:

● Create text chat and video chat interactions.● See queue information.

The application is located at https://[TomcatURL]/ecf/[version]/sample/visitor.html.

The reference applications are automatically installed. If you need to use custom settings, do the following steps:

1. Create folder [Tomcat webapps]/ECFSettings.2. Copy the HostAppSettings.json from the sample folder to the ECFSettings folder.3. Define custom settings in ECFSettings/ HostAppSettings.json.


Before You Start

Supported Browsers and Platforms

SAP ECF is based on CSS3, HTML5 and the new JavaScript API. That is why only browsers with HTML5 capabilities are supported. The channels supported by the following browsers and platforms are listed in the below table. We recommend that you use the latest version of the browser.

Interaction Type OS Version Browser

ECF task Windows:

7 (64 bit)

10 (64 bit)

IE, Chrome, Firefox

macOS Sierra: 10.12 Safari, Chrome, Firefox

Text/SMS chat Windows:

7 (64 bit)

10 (64 bit)

IE, Chrome, Firefox


Video chat Windows:

7 (64 bit)

10 (64 bit)

Chrome, Firefox

macOS Sierra: 10.12 Chrome, Firefox

Voice Windows:

7 (64 bit)

10 (64 bit)

Chrome, Firefox

macOS Sierra: 10.12 Chrome

E-mail Windows:

7 (64 bit)

10 (64 bit)

IE, Chrome, Firefox


Version Tomcat Version UI5 Version

SP10 (7.0.10.0)

Hotfix 7.0.10.4

8.0.32 OpenUI5 version 1.34.9

OpenUI5 version 1.36.10

FP11 (7.0.11.0) 8.5.13 SAPUI5 version 1.44.6

ECF Developer GuideBefore You Start C U S T O M E R 9

Version Tomcat Version UI5 Version

FP12 (7.0.12.0) 8.5.23 SAPUI5 version 1.46.9

Usage Limitations and Recommendations

The following table lists the limitations and recommendations for ECF.

Configuration

● It is not recommend to blend customer e-mails (retrieved from an e-mail server) and ECF tasks to a same queue because Online Monitoring and Reporting are not able to differentiate contacts from the e-mail channel.

● The hunt group queue mode with ECF tasks is not supported so use auto-allocation mode.

● For ECF task tracking purposes in SAP Contact Center system, it is recommended that the Host Application adds some identification data to the ECF task such as appropriate subject and Host Application process item related data to the body message. This helps to search and see status of a particular ECF task, for example, using the CDT soft phone contact history search.

● It is not supported to pair:○ ECF agent host applications with visitor chat requests from Chat Portal○ CDT agent with ECF visitor chat requests

This means that CDT users cannot handle visitor chats initiated using ECF controls and ECF users cannot handle chats initiated using Chat Portal. Configure the system so that ECF users have rights only to ECF queues and CDT users only to chat queue contacts that are handled in CDT.

Supported clients

It is not supported to use Convergence soft phone, IP desk phone or the external agent function with the same user account that is used for ECF Widget user authentication – instead, you must use a separate user account. Simultaneous use of ECF Widget and CDT is supported.

(Before 1608, it required that the Connection Server variable Enable Using ECF and CDT Simultaneously was selected but now the variable has been removed as obsolete).

Supported browsers Your agents must use a browser (Internet Explorer, Chrome, Safari, or Firefox) that supports HTML5. For video chat the browser must support WebRTC (Chrome and Firefox).

NoteWebRTC no longer works on insecure origins in Chrome. When you use video chat with Chrome, you must use secure URLs at both ends.


Before You Start

STUN/TURN Video connection cannot be established over STUN/TURN if the other party is using the Firefox browser on Mac.

Authentication ● OAuth is not currently supported in Safari.● Password change is not currently supported on the ECF user interface. ECF

users must change their expired password via CDT or SC user interface.

Script transfer The table below shows which script is used when an interaction is transferred.

Transfer Source*

Transfer Target/Script to Be Used




Queue with Script 1

Queue with Script 2

Queue Without Script

Agent

Queue with Script 1

Script 1 Script 2 Script 1 Script 1

Queue with Script 2

Script 1 Script 2 Script 2 Script 2

Queue Without Script

Script 1 Script 2 - -

*The queue from which the transfer is done.

The original agent’s answers (which were filled in before the transfer) are copied to the transferred script. So if the transfer target has the same script as the source, then these answers are visible there.

The modifications to the script after the transfer are not copied. There will be separate script results for both the original and transferred script.

ECF Developer GuideBefore You Start C U S T O M E R 11

3 Simultaneous Interactions

The following table shows how many interactions and of which type a user can have at the same time. The multi-chat settings and ECF task settings in System Configurator affect how many interactions are offered to the user. For more information about these settings, see . The queue setting Allow Other Contacts When E-Mail Open also has an effect. For more information about the setting, see .

Note also that if a user has an interaction that is ended, it's still counted as one interaction. For example, if it is defined that the maximum number of simultaneous text chats is 6 and the user has 5 active chats and 1 that is ended, no new text chat is offered to this agent until one of the chats is handled. Also the setting Busy During Wrap-Up that can be set on the system and queue level affects whether a chat is counted as active or not. For more information about this setting, see .

Simultaneous Interactions

Ongoing Interaction

What interactions can be offered and handled on top of an ongoing interaction

E-Mail ECF Task Call Text Chat Video Chat

Queue Direct Outgoing Queue Direct Queue Direct

Call No No No Yes: active call is put on hold

No No Yes No Yes

E-mail (the queue setting Allow Other Contacts When E-Mail Open in System Configurator disabled)

No No No Yes Yes No Yes No Yes

E-mail (the queue setting Allow Other Contacts When E-Mail Open in System Configurator enabled)

No No Yes (1) Yes Yes Yes (1-6) Yes Yes (1) Yes



ECF task (the queue setting Allow Other Contacts When E-Mail Open in System Configurator disabled)

No No No Yes Yes No Yes No Yes

ECF task (the queue setting Allow Other Contacts When E-Mail Open in System Configurator enabled)

No Yes (1-6) Yes (1) Yes Yes Yes (1-6) Yes Yes (1) Yes

Text chat

Whether the user setting Allow Queue Calls When Chatting is enabled or disabled has no effect except for queue calls.

No No No; except when the setting Allow Queue Calls When Chatting is enabled, then:

Yes (1)

Yes (1/2)

On second call, the first one is put on hold

Yes (1) Yes (1-6) Yes (no limit)

Yes (1) Yes (no limit)

ECF Developer GuideSimultaneous Interactions C U S T O M E R 13

Video chat

Whether the user setting Allow Queue Calls When Chatting is enabled or disabled has no effect.

No No No Yes (1/2) if video not active

On second call, the first one is put on hold

Yes (1) if video not active

No Yes No Yes (but no simultaneous video)



4 Developing Your Host Application

Host applications are applications that have ECF controls embedded into them. As a developer you will be embedding ECF controls into your host applications using JavaScript.

ECF installation contains reference host applications for agent and visitor usage. They include all the widgets and the common use cases. The sample host applications are located in following URL:

https:\\[Tomcat URL]\ecf\[version]\sample\agent.html

https:\\[Tomcat URL]\ecf\[version]\sample\visitor.html

You can test ECF with these sample applications and check implementation details from the code before developing your own host applications according to your needs and UI5 best practises.

The following sections and examples describe how to add ECF functionality to your host application. For more detailed code, see the code in the reference host applications.

● Basics of ECF Host Application [page 15]● Login [page 16]● Interaction Handling [page 16]● Status [page 16]● Presence [page 17]● Queue Login [page 17]● Chat [page 17]● Voice [page 35]● Transfer and Destination Input [page 40]● E-Mail Functionality [page 41]● Scripting [page 42]

4.1 Basics of ECF Host Application

As SAP ECF is a client-side web UI library meaning that it runs in a browser, an SAP ECF application typically is composed of an HTML page and, if required, many more files.

SAP ECF is implemented in JavaScript on top of the UI5 library. In order for SAP ECF to function, the UI5 bootstrap needs to be included with a <script> tag.

Next, register the path to where your SAP ECF resources are installed. These may be installed in an SAP Cloud environment or on your local server. This path registration creates a namespace you can later using when including SAP ECF resources.

The ECF Session object is the “broker” between your the SAP ECF controls and the SAP Contact Center server. The Session object maintains the proper state information for your SAP Contact Center user and exposes this information to the controls via a data cache. Most of your interaction with the Session object will be through the SAP ECF controls. However, you must tell the Session where your SAP Contact Center server is located

ECF Developer GuideDeveloping Your Host Application C U S T O M E R 15

(https://[IP Address of the ECF Web Server Virtual Unit: TCP Port Number for HTTPS]/ecfs) and other setup information like language preference and optionally login credentials. This is done by passing the InitConfig object to the Session object.

SAP ECF controls are created and modified programmatically. The controls have extensive default functionality. Include and instantiate the controls you want to use.

4.2 Login

For users to log in as agents, proper credentials must be passed to the SAP Contact Center server. The reference agent host application contains a specific login dialog for this purpose to be used with the authentication method Basic Authentication. For more information about the different authentication methods, see installation variables in .

The login dialog window is displayed when the session fires the event attachAuthFail. Users enter the user name and password into the dialog window and the information is sent to server in the Session.connect function when the Log In button is pressed.

4.3 Interaction Handling

The Interaction control is an important control that communicates the status of all of the agent’s interactions. You will almost always have an Interaction control embedded in your host application.

This control is responsible for showing interactions for an agent and a visitor. The Interaction control paints a corresponding tab for each of these interactions. Each tab has its own view which consists of a tab icon, tab text and a tab form. The tab form is used for displaying details related to an interaction.

SAP ECF ships with default tab views for call, email, text/video chat and ECF task interaction types. A userdefined interaction has a custom interaction type that you specify like “Lead”. You can easily modify a default tab view or create your own from scratch depending on your requirements. For more information, see Changing the Interaction Display [page 47] To be able to control interactions, the host application needs Accept, Reject and Handle controls. For usage, see the reference agent host application.

4.4 Status

The Status control displays and changes the work status of the agent. For usage, see the reference host application.


Developing Your Host Application

4.5 Presence

An agent host application can have Presence control which makes it possible for agents to see and change their presence profile. The Presence control can be added to host application with following code:

// Create Presence control jQuery.sap.require("sap.ecf.controls.Presence"); var widgetPresence = new sap.ecf.controls.Presence(); //Place it in the host application (for example toolbar) var toolbar = new sap.m.Toolbar({ content: [widgetStatus, widgetPresence, new sap.m.ToolbarSpacer(), widgetAccept, widgetReject, widgetHandle] });

4.6 Queue Login

An agent host application can have Queue Login control which makes it possible for agents to log in to or log out from queues and see statistics of the queues. Queuespecific login is enabled when an agent has capabilities and rights to serve in the queue.

// Create QueueLogin control jQuery.sap.require("sap.ecf.controls.QueueLogin"); var widgetQueueLogin = new sap.ecf.controls.QueueLogin({ height: "750px" }); // Use compact UI for QueueLogin widgetQueueLogin.addStyleClass("sapUiSizeCompact"); // Place it in own div in the host application widgetQueueLogin.placeAt("queues");

4.7 Chat

In ECF a chat conversation is between two participants, an SAP Contact Center agent and a visitor.

A visitor is anybody that visits your website and initiates a chat request. Visitors may be known to you (for example an existing customer) or they may be anonymous (firsttime visitor).

As a host application (host app) developer you will be embedding ECF chat controls into your HTML5 host application using JavaScript. You will need to develop two host applications, one for the agent (agent host app) and one for the visitor (visitor host app).

ECF supports both text and video chat. Text chat allows an agent and a visitor to send text messages to one another using ECF chat controls. Video chat allows an agent and visitor to send/receive audio/video to one another using ECF video chat controls. Both text and video can be shared at the same time.


And as of 1705, the chat can also originate from an SMS source meaning that the supported chat subtypes are: text, video and SMS.

For more information, see ECF chat controls [page 89].

For information about multi-channel interactions and their restrictions, see Before You Start [page 8].

Chat Process

● Understanding Chat Life Cycle [page 18]● Creating a Visitor Host App for Text Chat [page 20]● Creating an Agent Host App for Text Chat [page 29]● Adding Video to Your Chat Host App (Video Over Chat) [page 30]● Accessing the Chat Transcript [page 33]● Adding Queue Information to Visitor Host Application [page 34]

4.7.1 Understanding Chat Life Cycle

As a host application developer it is important to understand the life-cycle events of a chat request and conversation. The following chat life-cycle states and events are available for agent and visitor host applications. Diagram of life cycle is shown below.

For more information, see Working with Events [page 60].

Agent States and Events

State ECF Event Description

Incoming sap.ecf.controls.Interaction.incomingInteraction

This state and event occurs when an interaction is being offered to an agent.

Accepted sap.ecf.controls.Interaction.acceptedInteraction

This state and event occurs when an agent has accepted a chat interaction.




Ended sap.ecf.controls.Interaction.endedInteraction

This state and event occurs when a chat conversation has ended. Chat conversations are ended when an agent or visitor clicks on the Hang Up button, closes their browser or if there is a chat timeout.

The timout is defined with the setting Timeout

for Idle Chats in System Configurator

System Management Channel Settings . For more information, see

Handled Sap.ecf.controls.Interaction.handledInteraction

This state and event occurs when an agent has marked a chat as Handled.

Removing Sap.ecf.controls.Interaction.removingInteraction

This state and event occurs just prior to a chat being removed from memory. Use this event to share chat details (i.e., transcript) with your host application prior to the chat being removed from memory.

Visitor States and Events


Queued sap.ecf.controls.Interaction.queuedInteraction

This state and event occurs when a chat request has been initiated by a visitor.


This state and event occurs when an agent has accepted a chat interaction.


This state and event occurs when a chat conversation has ended. Chat conversations are ended when an agent or visitor clicks on the Hang Up button, closes their browser or if there is a chat timeout.

The timout is defined with the setting Timeout

for Idle Chats in System Configurator

System Management Channel Settings . For more information, see



Removing sap.ecf.controls.Interaction.removingInteraction

This state and event occurs just prior to a chat being removed from memory. Use this event to share chat details (i.e., transcript) with your host application prior to the chat being removed from memory.

4.7.2 Creating a Visitor Host App for Text Chat

Context

Use this instruction with the version 1705, and earlier. As of 1708, rather use the the new visitor application provided, see Visitor Chat Application [page 54].

In this section, you will create a very basic visitor host app for text chat.



Procedure

1. Create a form to capture visitor information.

You will need to create a form that your visitor will use to initiate a chat request. This form should contain fields to identify who the visitor is. Any data collected in this form can be sent with the chat request as contact attached data.

Contact-attached data is available to the agent host application developer and is often used to enhance the workflow in the host application (that is, looking up the visitor in the host app system based on visitor’s email address).

In this code snippet, we’ll create a simple form using SAPUI5 to capture a visitor’s name and email address. Later, we’ll see how these fields can be passed to the agent host application using the Session.initiateChat method.

Initially, the controls on this form are disabled to ensure they are only offered when a connection to ECF is available and chat requests can be sent.

Chat Request Form

Code snippet:

// Create the Chat Info section to enter Visitor info var oChatInfoLayout = new sap.ui.layout.form.SimpleForm({ editable: false, layout: "ResponsiveGridLayout", labelSpanL: 3, labelSpanM: 3, emptySpanL: 3, emptySpanM: 3, columnsL: 2, columnsM: 2, title: new sap.ui.core.Title({text: "Live Chat"}), content: [ new sap.m.Label("lblName", {text: "Name"}), new sap.m.Input("fldName", {value: "John Doe", enabled: false, maxLength: 128}), new sap.m.Label("lblEmail", {text: "Email"}), new sap.m.Input("fldEmail", {value: "[email protected]", enabled: false, maxLength: 128}), new sap.m.Label(), new sap.m.Button("btnStartChat", { text: "Start Chat", width: "130px", enabled: false }) ]


});

2. Add ECF controls.

You will need only “one” ECF control, the Interaction control. The Interaction control ships with a default visitor chat view. If you want to change the chat view, see Changing the Interaction Display [page 47].

When a visitor initiates a chat and the chat is queued in ECF, the Interaction control will paint the default visitor chat view. This view contains the following text-chat related controls:

○ Chat Transcript○ Chat Input○ Send○ Hang Up○ Typing Indicator○ Channel Status

Code snippet:

//Interaction - controls jQuery.sap.require("sap.ecf.controls.Interaction"); //Add interaction widget and place on page var widgetInteraction = new sap.ecf.controls.Interaction(); widgetInteraction.placeAt("interactions");

3. Allow for an anonymous user.

Visitors do not have accounts or logins to SAP Contact Center. To support visitor access to ECF chat you will need to specify an authentication type of “Anonymous”.

Code snippet:

//Create a configuration object var ecfInitConfig = new sap.ecf.models.InitConfig(); // Set Anonymous "Visitor" authentication ecfInitConfig.setAuthenticationType("Anonymous");

4. Connect to ECF and enable the simple form controls.

Create the ECF Session connection and once you have a successful connection, enable the simple form controls so the visitor can initiate the chat request.

Code snippet:

ecfSession.connect(ecfInitConfig); // When the Session is connected enable the form controls ecfSession.attachConnected(function(evt) { sap.ui.getCore().byId("fldName").setEnabled(true); sap.ui.getCore().byId("fldEmail").setEnabled(true); sap.ui.getCore().byId("btnStartChat").setEnabled(true); });

5. Send a chat request.

Create an event handler for the Start Chat button-click that will send the chat request to ECF.



A call is made to Session.initiateChat. In it you will set the following parameters:

chat_address This optional parameter is used by ECF to uniquely identify the visitor. Typically this parameter is set to the visitor’s email address. If omitted, ECF will create a GUID for the visitor that will be used for the chat session. The maximum length for chat address is 128 characters.

alias This is used by ECF to identify the visitor in the chat transcript window. The maximum length for alias is 128 characters.

queue This required parameter must be a SAP Contact Center chat queue.

subChannelType The ECF type is by default chat. However, you must set the subchannel type for chat to either “text” or “video”. Here it is set to “text”.

attached_data You may pass any key/value pairs for the attached data.

InitiateChat will send the chat request to the queue you specify and update the chat status to “queued”.

You can respond to the Interaction.queuedInteraction event to disable the simple form controls to prevent another chat request while the chat is queued.

When a chat request is “queued”, the only enabled control will be the Hang Up button until an agent accepts the chat.


Chat Request Not Accepted

Once the chat is accepted by an agent, all of the controls on the chat view will be enabled and the chat conversation can begin, see following screenshot.



Chat Request Accepted

Code snippet:

// Wire up button press sap.ui.getCore().byId("btnStartChat").attachPress(this.startChat); // Handlers to start the chat function startChat(evt) { ecfSession.initiateChat({ chat_address: sap.ui.getCore().byId("fldEmail").getValue(), alias: sap.ui.getCore().byId("fldName").getValue(), queue: "[email protected]", attached_data: {"value1": "test1"}, subChannelType: "text" }); }; // Handler for when Chat is queued to visitor widgetInteraction.attachQueuedInteraction(function(evt) { // Disable form elements because we are already in a chat sap.ui.getCore().byId("fldName").setEnabled(false); sap.ui.getCore().byId("fldEmail").setEnabled(false);


sap.ui.getCore().byId("btnStartChat").setEnabled(false); var oInteraction = evt.getParameter("oInteraction"); var oTab = widgetInteraction.getInteractionTabByID(oInteraction.id); });

6. End a chat request.

A chat conversation is ended when a chat participant presses the Hang Up button, closes their browser, or there is a chat timeout.

To enable another chat for the visitor you must create a new ECF session. This is done by disconnecting and reconnecting the session. We will use the Interaction.removingInteraction event to reset the session for the visitor.

Code snippet:

// Handler for when Chat ends widgetInteraction.attachRemovingInteraction(function(evt) { // Destroy the Session connection to ECFS ecfSession.disconnect(); }); // When the Session is destroyed, create a new Session and connect again ecfSession.attachDisconnected(function(evt) { ecfSession.connect(ecfInitConfig); });

7. Put it all together.

Here is the entire code sample for the visitor host app for text chat.

<!DOCTYPE html> <html lang="en"> <head> <title>SAP ECF My First Visitor Application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/1.40.10/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-frameOptions="deny" data-sap-ui-libs="sap.ui.commons,sap.m"> </script> <script type="text/javascript"> //Register the module path jQuery.sap.registerModulePath("sap.ecf", "../../resources/sap/ecf"); </script> <style type="text/css"> /* here you could overwrite some sapui5 styles you don't like */ .sapEcfInteractionTab { width: auto; max-width: 65px; }



4.7.3 Creating an Agent Host App for Text Chat

The reference agent host application provides all the code that is needed to create an agent host application for text chat.

When SAP ECF receives an incoming interaction (in other words, chat, task, email, or call), it provides context to the ECF controls. The controls then implement the correct contact center business logic to handle the interaction.

Because the Interaction control also contains a default chat view for the agent, there is no additional code required for an agent to receive and handle chats.

Here is a screenshot when an agent accepts the incoming chat request.

Incoming Chat Request

And here is a screenshot when an agent accepts the incoming chat request.


Chat Request Accepted

When the chat is being offered, the chat history request (originating from the same source address) is silently sent to CMI. It collects the history data from the database and returns as a response a list of previous conversations, which is then indicated on top of the chat transcript.

In the figure “Chat Request Accepted” the chat transcript indicates that there is 1 previous chat conversation available. It is shown when the agent either clicks the arrow icon or scrolls to the top of the list.

4.7.4 Adding Video to Your Chat Host App (Video Over Chat)

Use

Use this procedure for versions 1705 and earlier. As of 1708, using the new visitor chat application provides a configurator, and you can define there if you enable video chat.



Procedure

Adding Video to your Visitor Host App for Text Chat

The ECF Video Toggle [page 94] control is used to determine if the visitor’s or agent’s browser supports WebRTC video.

Place a hidden video control in your agent host app and visitor host app.

For a visitor, check the VideoToggle.getBrowserWebRTCCapability method prior to calling Session.initiateChat. If the visitor’s browser is capable of handling ECF video, you can call Session.initiateChat and set the subChannelType to “video”.

For visitor host apps you must explicitly specify if you want text or video chat.

Code snippet:

//Video toggle - control jQuery.sap.require("sap.ecf.controls.VideoToggle"); bVideo = widgetVideoToggle.getBrowserWebRTCCapability() var widgetVideoToggle = new sap.ecf.controls.VideoToggle({ hiddenMode: true }); ecfSession.initiateChat({ chat_address: sap.ui.getCore().byId("fldEmail").getValue(), alias: sap.ui.getCore().byId("fldName").getValue(), queue: sap.ui.getCore().byId("fldQueue").getSelectedKey(), attached_data: {"value1": "test1"}, subChannelType: bVideo ? "video" : "text" });

Adding Video to Your Agent Host App for Text Chat

For an agent, you only need to include a hidden Video Toggle control in your agent host app. When you create a Session connect for the agent, ECF will use the Video Toggle control to automatically notify SAP Contact Center if the browser is video capable.

If the agent’s browser is video capable, video chats will be routed to the agent. If an agent’s browser is not video capable, a video chat request will not be routed to the agent.

Code snippet:

//Video toggle - control jQuery.sap.require("sap.ecf.controls.VideoToggle"); //add video toggle for CEM to pick up this agent’s browser is video capable var widgetVideoToggle = new sap.ecf.controls.VideoToggle({ hiddenMode: true });

Displaying Video Chat Controls


The Interaction [page 79] control has a video chat view and will render a “floating” chat window that can be moved within the tab view. The video chat view contains two ECF Video [page 92] controls, one displays the agent’s video and the other display’s the visitor’s video. The video chat view also contains a VideoToggle control to start and stop the video chat.

NoteYou can customize the chat view for both text and video chat by Changing the Interaction Display [page 47].

Here is a screenshot of the Interaction control’s default video chat view.

Playing an In-Queue Video

Optionally, you can play a video for your visitor to watch while his or her video chat request is queued.

You can attach an event handler to the Interaction.queuedInteraction event to start the video when it is queued. To start the video, just tell the Video control where the video file is located using the Video.setVideoSource method. The video control will handle starting and stopping the video depending on whether the video chat is queued. In addition, the video can be stopped and restarted from video toggle control.

Code snippet:

// Handler for when Chat is queued for a visitor widgetInteraction.attachQueuedInteraction(function(evt) { // grab a reference to the interaction object for this "queued" event var oInteraction = //grab a reference to the default video chat view's video control var oTab = widgetInteraction.getInteractionTabByID(oInteraction.id); //tell the video control where the to find the video file var myVideo =



sap.ui.core.Fragment.byId(widgetInteraction.getInteractionViewID(oInteraction.id), "video"); myVideo.setVideoSource("video/dive.mp4"); });

4.7.5 Accessing the Chat Transcript

Use

The chat transcript (the current conversation contents in the HTML format) is available either to an agent or a visitor host application. It can be retrieved at any time during a chat conversation.

Procedure

To retrieve the chat transcript contents, attach an event handler to the Interaction.endedInteraction event and use the chat transcript [page 91] control’s getChatTranscript method.

Code snippet:

// Chat transscript text var chatTransscriptText = ""; // When chat accepted by agent widgetInteraction.attachAcceptedInteraction(function (evt) { // Grab the interaction this event is firing for var oInteraction = evt.getParameter("oInteraction"); var oTab = widgetInteraction.getInteractionTabByID(oInteraction.id); // Grab a reference to the chat transcript that is in the interaction's chat view var transscript = sap.ui.core.Fragment.byId(widgetInteraction.getInteractionViewID (oInteraction.id), "chatTranscript"); if (transscript != undefined) { // Listen for events from ChatTransscript and update the Chat transscript text when new messges appear transscript.attachMessageReceived(function (evt) { chatTransscriptText = transscript.getChatTranscript(); }); transscript.attachMessageSent(function (evt) { chatTransscriptText = transscript.getChatTranscript(); }); } });


4.7.6 Adding Queue Information to Visitor Host Application

Visitor host application can provide information about the queues with Visitor Queue and Channel Status controls. They are both faceless controls and host application developer have to use some UI control for displaying the information.

The Visitor Queue control can display whether a specific queue is open or closed and what is the average waiting time.

// Create Visitor queue control jQuery.sap.require("sap.ecf.controls.VisitorQueue"); var visitorQueue = new sap.ecf.controls.VisitorQueue({ "startPollingWhenCreated": true }); visitorQueue.placeAt("chatinfo"); // Define UI controls which display the queue information var waitTime = sap.m.Input({enabled: false}); var status = sap.m.Input({enabled: false}); // Define queue address to be monitored visitorQueue.setQueuesAddress("[email protected]"); // Listen for QueueStatsChanged events and display the information in UI controls visitorQueue.attachQueueStatsChanged(function (oEvent) { var oQueue = oEvent.getParameters().queue; var qIndex = ecfSession.getModelIndexByValue(ecfSession.getCommonModel(), "/queues", "id", oQueue.id); waitTime.setValue(ecfSession.getCommonModel().getProperty("/queues/" + qIndex + "/statistics/avg_wait_time")); status.setValue(that.translateQueueStatus(ecfSession.getCommonModel().getProperty("/queues/" + qIndex + "/statistics/status"))); });

The Channel Status control can provide more information about the queue after the chat request has been sent, for example if the queue is full.

The Channel Status control is automatically created by the Interaction control when a chat request has been done. The following code example demonstrates how to find the instance of Channel Status and listen to ChangedChannelStatus events from it.

// Using ChannelStatus widget to get information of closed and full queues // It is created when chat has been initialized widgetInteraction.attachTabCreated(function (evt) { var oInteraction = evt.getParameter("oInteraction"); // Find the instance created by Interaction var channelStatus = sap.ui.core.Fragment.byId(widgetInteraction.getInteractionViewID(oInteraction.id), "channelStatus"); if (channelStatus !== undefined) { // Listener for ChangedChannelStatus events channelStatus.attachChangedChannelStatus(function (evt2) { var msg = evt2.getParameter("changedChannelStatus"); // Display the message alert(msg);



}); } });

4.8 Voice Functionality

As of 1608 the voice function is supported in ECF. It means that agent can make outbound calls and receive inbound calls with the host application. It is also possible to send DTMF tones, mute and put the call on hold.

To enable this, callspecific controls must be added into the host application and SAP Contact Center system must be configured [page 68] to allow ECF calls. For instructions about how to embed these controls, see Creating Agent Host Application for the Voice Functionality [page 37].

The agent must also have specific rights to be able to use ECF voice functionality. They are listed in Configuring User Settings in System Configurator [page 70]. For the supported browsers, Before You Start [page 8].

Handling of Call Type Interactions

Calls appear as interactions in ECF. See the Multi-Channel Interactions table for compatibility between different types of simultaneous interactions in Before You Start [page 8].

Interaction States of a Call

The table below shows the possible interaction states of a call and the events that are fired when the state changes.


Outgoing sap.ecf.controls.Interaction.outgoingInteraction

An outbound call is made by an ECF agent. The call is not answered.

Incoming sap.ecf.controls.Interaction.incomingInteraction

An inbound call is offered to an agent.


An outbound or inbound call is connected.


Call is rejected, busy or disconnected by the other party. The agent has clicked the Hang Up button.



Handled sap.ecf.controls.Interaction.handledInteraction

Agent has clicked the Handle button.

Removing sap.ecf.controls.Interaction.removingInteraction

Call interaction is removed from memory. This will occur automatically after state becomes handled.

The callspecific status of the interaction can be accessed with the Channel Status control: for example if the destination is busy or another incoming call is waiting.

Channel Status Description

queue_full Queue full

queue_closed Queue closed

muted Muted

onhold On hold

bad_address Destination doesn’t exist

rejected Call declined

busy Destination is busy

unreachable Destination can’t be reached

rejected Other party declined the call

no_answer No answer from destination

congestion Call can’t be handled due to congestion

temporary_failure Temporary failure

barred Call rejected because of barring rules

connected Call has been connected

disconnected Call has been disconnected

ringing Incoming call is ringing

calling Outgoing call

knocking Incoming call waiting



4.8.1 Creating Agent Host Application for the Voice Functionality

The reference agent host application provides all the code that is needed to create an agent host application for voice functionality.

To be able to receive call interactions, the host application must register itself for handling calls. This is done by adding the SIPStack control which does the registration automatically. SIPStack is faceless control and it can be placed anywhere in host application.

jQuery.sap.require("sap.ecf.controls.SIPStack"); var widgetSIPStack = new sap.ecf.controls.SIPStack(); widgetSIPStack.setHiddenMode(true);

For making outbound calls or sending DTMF tones the host application needs to have the Call control. Its UI is a button which starts a new outbound call on a click. If there is an active call, the clicking sends DTMF tones. The input field for dialled number or DTMF tones has to be implemented by host application and the value has to be given to the Call control.

jQuery.sap.require("sap.ecf.controls.Call"); // Create the Call control var widgetCall = new sap.ecf.controls.Call(); // Create separate input control for defining the outbound call number or DTMF tones // Dialing input updates the outbound number on every key press and clears after successful dial out var widgetCallInput = new sap.m.Input({width: "120px"}); widgetCallInput.attachLiveChange(function (e) { widgetCall.setNumberToDial(e.mParameters.newValue); }); // Clear the input field when number has been dialed widgetCall.attachCallNumberDialed(function () { widgetCallInput.setValue(""); }); // Clear input also when DTMF value is the same as last input value widgetCall.attachCallNewDTMFTones(function (e) { if (e.mParameters.dtmf == widgetCallInput.getValue()[widgetCallInput.getValue().length - 1]) { widgetCallInput.setValue(""); } }); //Create an SAPUI5 page for the interactions and the toolbar var page = new sap.m.Page(); // Place the call controls in toolbar var toolbar = new sap.m.Toolbar({ content: [widgetStatus, new sap.m.ToolbarSpacer(), widgetSIPStack, widgetCallInput, widgetCall, widgetAccept, widgetReject, widgetHandle] }); //Add interaction control and toolbar to the page page.addContent(widgetInteraction); page.setFooter(toolbar); //Set page location page.placeAt("interactions");

When SAP ECF receives an interaction (in other words, chat, task, email, or call), it provides context to the ECF controls. The controls then implement the correct contact center business logic to handle the interaction.


Because the Interaction control also contains a default call view for the agent, there is no additional code required for an agent to receive and handle calls. The default call view contains the other call related ECF controls: Mute, Hold and Channel Status.

Note the following about the Mute and Hold controls:

● connected > muted: channel_status is muted● muted > connected: channel_status is connected● connected > onhold: channel_status is onhold● onhold > connected: channel_status is connected● muted > onhold : channel_status is onhold● onhold > muted: not supported. In practice connected is unmute or unhold depending on which is currently

active, call cannot have both muted and onhold status at the same time.

How client should enable or highlight buttons when it receives channel status from server:

● onhold > Hold/Resume highlighted, Mute disabled● muted > Mute highlighted, Hold/Resume normal and enabled● connected > Hold/Resume and Mute normal and enabled

Ensure your host application reflect what is possible.

Here is a screenshot of an incoming call for an agent when running the sample code. The Channel Status controls is placed on the default call view and its value is displayed in the Channel Status field.



Below is a screenshot when an agent accepts the incoming call. The Mute and Hold controls are placed on the call default view and they are enabled when the interaction status becomes accepted.

And here is a screenshot when an agent makes an outbound call. The call control is placed at the toolbar.


4.9 Transfer and Destination Input

An agent host application can have Destination Input control. This enables agents to search for users and queues from the Directory that shows the availability of users and the type of interactions they can handle. The agents can then select from search results the transfer destination for an ongoing call or chat. The interaction is transferred using the blind transfer method. It is also possible to enter a number to make a new call or transfer a call to an unknown number, in other words, to a number that is not included in the Directory.

The Destination Input control can be added to the host application with following code:

// Create DestinationInput control jQuery.sap.require("sap.ecf.controls.DestinationInput"); var widgetDestinationInput = new sap.ecf.controls.DestinationInput(); // Place DestinationInput in its own div (e.g. below the QueueLogin) in the host application widgetDestinationInput.placeAt("destinationinput");

You can use destination input to get the destination the interaction will be transferred to:

// Create Transfer control jQuery.sap.require("sap.ecf.controls.Transfer"); var widgetTransfer = new sap.ecf.controls.Transfer(); widgetTransfer.setDestinationInput(widgetDestinationInput); /* Define the method that is used to get the new attach data to interation while transfering. The method is called when Transfer button is pressed.*/ var getAttachData = function (oControl, sId) { return {



"transferAttachDataForInteraction": "Attach Data for interaction" + sId; };}; widgetTransfer.setAttachedDataOnBeforeTransfer(this.getAttachData);

You can also define the destination to the Transfer control from your host application without using the Destination Input. For example, by getting the number from the host application’s own directory or by having an input field of your own.

// Create Transfer control jQuery.sap.require("sap.ecf.controls.Transfer"); var widgetTransfer = new sap.ecf.controls.Transfer(); … var destination = { "destination": {"address": "2017", "type": ""}} widgetTransfer.setTransferDestination(destination);

4.10 E-Mail Functionality

● E-Mail [page 41]● New [page 42]

4.10.1 E-Mail

ECF can also be used for e-mail handling. This means that users can receive and forward e-mails and create new e-mails. And as of 1705, they can also receive e-mail attachments as well as upload them to outgoing e-mails.

The e-mail content area supports HTML. As of 1708, the maximum message length accepted by the ECF server is 100kB.

In case the Interaction control is used, the e-mail control is displayed in the tab view. To add e-mail to your host application directly, use the following code:

// Create Email control jQuery.sap.require("sap.ecf.controls.Email"); var oEmail = new sap.ecf.controls.Email(); oEmail.setInteractionByID(interactionId);

Where interactionId must be a valid ID of an active interaction.

For required user settings for the e-mail functionality, see Configuring User Settings in System Configurator [page 70] and for system configuration, see Configuring Queue Settings in System Configurator [page 68].


4.10.2 New

You can add a control New to the host application. This enables agents with proper rights to create and open a new outbound e-mail interaction draft. For required user settings, see Configuring User Settings in System Configurator [page 70].

The New control can be added to the host application with the following code:

// Create New control jQuery.sap.require("sap.ecf.controls.New"); var widgetNew = new sap.ecf.controls.New(); //Create a OpenUI5 page for the interactions and the toolbar var page = new sap.m.Page({ headerContent: [ new sap.m.ToolbarSpacer(), scriptViewer, userInfo, loadLogsButton, logoutButton ] }); var toolbar = new sap.m.OverflowToolbar({ content: [ widgetStatus, widgetPresence, new sap.m.ToolbarSpacer(), new sap.m.ToolbarSpacer(), widgetSIPStack, widgetCall, widgetAccept, widgetReject, widgetHandle, widgetTransfer, widgetNew ] });

4.11 Scripting

Scripting is a feature where an agent can get and add information related to an interaction during its handling. Scripting templates and the queues in which they are used are defined in System Configurator (SC). When the agent receives an interaction from a queue with a script defined, the script is displayed for the agent. The script contains a set of questions and possibly predefined answer options for them. The agent fills in the answers and saves the script when ready. The results of the script can be then later used for example for different kind of marketing purposes.

Terminology

Term Description

Script template Common template containing the script questions and answers, defined in SC

Script control ECF control which handles the script functionality

Script result The answers for the script template’s questions that the agent has inserted

Scripting in ECF

ECF has a Script control which contains the functionality of displaying the script, entering the answers and sending the results to the server. The host application must create the Script control for each interaction and place it on the



UI. For this purpose, there is an example widget called ScriptViewer in the sap.widgets package. It is also in use in the sample agent.html application.

Resolving Script Usage

Scripts are defined for queues in SC. When a new interaction appears for the agent, the Script control checks whether there is a script defined for the queue from which the interaction came. If the interaction is transferred directly to the agent, then it uses the script from the original queue if one has been configured for the queue.

After resolving the script usage, the control fires an event which specifies if there is a script in use or not. If yes, it also loads the script template.

There can also be a queuespecific script opening type defined in SC (when allocated, when answered, when handled). When this interaction phase occurs, the Script control fires an event to notify the host application to display the script. The script control itself does not perform any visibility changes here.

Types and Navigation

There are two types of scripts: interactive and static. In a static script all questions and answers are displayed at once. An interactive script displays questions one by one and the answers can define the next question. However, the same question can exist only once in a script. It is possible to move forward and backward by the navigation buttons. Reset clears all the given answers and navigates back to the first question.

Questions and Answers

Questions and answers are displayed as a list. The question is displayed as a single row containing static text including links. One question can contain 1-n answer rows and they are located under the question in the list. The answer row count depends on the questions setup, which is created in SC. One answer row contains the control for the input and possible predefined text.


Scripting Answer Control Types

The following table lists the possible types and their properties:

Type in System Configurator (SC)

Corresponding UI5 Control in Answer

Answer Row Count

Multiplying Answer ID Data Type Next Question in Answer

Input Text Field sap.m.Input / sap.m.DateTimePicker

1 Yes No Yes No

Input Text Area sap.m.TextArea / sap.m.DateTimePicker

1 Yes No Yes No

Checkbox sap.m.CheckBox

1-n No Yes No No

Combo Box sap.m.ComboBox

1 Yes Yes/No Yes Yes

Drop-Down List sap.m.Select 1 No Yes No Yes

Drop-Down List with Checkboxes

sap.m.MultiComboBox

1 No Yes No No

Radio Button sap.m.RadioButton

1-n No Yes No Yes

Information - 1 (empty) No No No No

Answer row count: The amount of answer rows this control type can have

Multiplying: Answer rows can be multiplied by given count

Answer ID: Control has predefined answers (with ID)

Data type: Control can have data type defined which is then validated

Next question in answer: In case of an interactive script, the next question can be defined per answer

Validating Answers

When you create a script in System Configurator Script Management you can define that answers are mandatory, in other words, agents can't complete the script before the mandatory answer is given. You can also define that the answer must be of a certain format, for example a decimal number or date and time. Answers filled


in the script are validated against these definitions when agents save the script and when they navigate forward in interactive scripts. If validation fails, an error message is displayed and saving or navigation is cancelled. If saving is caused by “handled” or “transferred” event, then the saving is done for the valid fields and invalid fields are ignored without indication.

Saving

Script can be saved manually from the Save button. It is automatically saved when the interaction is handled or transferred. The answers which are saved before the transferring are also visible in the script for the transfer target.

Only questions/answers that have some input from the user are saved. For example, if a checkbox control is not checked, then it is not saved.

Usage from Host Application and Life Cycle

The new script control should be created for each interaction which is supposed to handle scripting. The following sequence shows the basic life cycle scenario of a Script control in the host application.



5 Changing the Interaction Display

Context

This procedure explains how to customize the Interaction tab view.

The Interaction control is responsible for showing both incoming and “in-work” interactions for an agent. It also is responsible for showing chat and video chat controls for a visitor. The Interaction control paints a corresponding tab for each of these interactions. Each tab has its own view which consists of a tab icon, tab text and a tab form. The tab form is used for displaying details related to an interaction.

SAP ECF ships with default tab views for call, email, text/video chat and ECF task interaction types. A user defined interaction has a custom interaction type that you specify like “Lead”. You can easily modify a default tab view or create your own from scratch depending on your requirements.

Below is an image showing a custom SAP ECF tab that uses a custom tab icon, custom tab text and custom tab form to display a user defined interaction type “Lead”.

ECF Developer GuideChanging the Interaction Display C U S T O M E R 47

Procedure

1. Create a custom tab view.

Tab views are constructed using SAPUI5 fragments. Fragments are light-weight UI parts which can be reused, defined similar to views. SAP ECF tab view fragments are “connected” to the SAP ECF Tab controller. This makes them perfect reusable components that still fit nicely into an MVC concept.

1. Open your text editor and create a new JavaScript file named MyLeadTab.fragment.js.2. Declare your fragment giving it a namespace.

Later you will register the namespace to the location on your server where your MyLeadTab.fragment.js file exists.

#!js sap.ui.jsfragment("ecfstester.pages.MyLeadTab", {


Changing the Interaction Display

});

Use the createContent() function to define your UI and attach it to the tab controller.

#!js createContent: function(oController) { //Get the Tab controller for his fragment var oTab = oController; //Useful formatting functions jQuery.sap.require("sap.ecf.util.Formatter"); },

Use the tab’s getInteraction() function to retrieve the Interaction associated with this tab.

#!js //Get the Interaction associated with this tab var oInteraction = oTab.getInteraction();

Set the Tab icon and Tab text.

#!js // Set the Tab icon oTab.setIcon("sap-icon://business-card"); //Set the Tab text oTab.setText(oInteraction.attached_data.ChannelSubType + "# " + oInteraction.attached_data.lead_id);

Create content for the Tab form.

#!js // Create content for the Tab form var oMatrixLayout = new sap.ui.commons.layout.MatrixLayout(); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Name" }), new sap.ui.commons.Label({ text : "{attached_data/name}" })); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Email" }), new sap.ui.commons.Label({ text : "{attached_data/email}" })); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Interaction Type" }), new sap.ui.commons.Label({ text : "{channel_sub_type}" })); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "{ecfi18n>ECF_XFLD_CREATION_DATE}" }), new sap.ui.commons.Label({ text: { path: "date_created", formatter: function(date) { return sap.ecf.util.Formatter.formatDateTimeShort(date); } }


}));

Return the view.

#!js //return the view return oMatrixLayout;

2. Bind the view to your Interaction control.

You only need two more lines of code to bind your new tab view to the Interaction control. See the reference host application. Just after this code is where you’ll insert the remaining lines of sample code.

#!js var widgetInteraction = new sap.ecf.controls.Interaction({ channelTypes : [] });

You need to tell your application where to find the directory that you saved your custom view MyLeadTab.fragment.js. You’ll do this by using the registerModulePath() function. Place this code directly after the declaration of your Interaction control (widgetInteraction)

#!js // Register host-app custom module path so views can be found jQuery.sap.registerModulePath("ecfstester.pages", "/ecf/test-resources/pages/ECFSTester");

Finally, use the registerInteractionView function of the Interaction control to bind your view to the Interaction control.

#!js widgetInteraction.registerInteractionView("ecfstester.pages.MyLeadTab", sap.ecf.core.Constants.interaction_channel.USER_DEFINED, "MyLead");

3. Place the two final code files on your server and point your browser to MyFirstApp.html.

From MyFirstApp.html

#!html //MyFirstApp.html <!DOCTYPE html> <html lang="en"> <head> <title>SAP ECF My First Host Application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/1.40.10/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-frameOptions="deny" data-sap-ui-libs="sap.ui.commons,sap.m"> </script>



widgetReject, widgetHandle ] }); //Add Interacton control and toolbar to the page page.addContent(widgetInteraction); page.setFooter(toolbar); //Set page location page.placeAt("interactions"); </script> </head> <body class="sapUiBody" role="application"> <div id="content" data-sap-ui-area="content"> <div id="interactions" style="height: 600px; width: 1000px; top: 0px; position: absolute"> </div> <div> </body> </html>

From MyLeadTab.fragment.js

#!js //MyLeadTab.fragment.js sap.ui.jsfragment("ecfstester.pages.MyLeadTab", { createContent: function(oController) { //Get the Tab controller for his fragment var oTab = oController; //Useful formatting functions jQuery.sap.require("sap.ecf.util.Formatter"); //Get the Interaction associated with this tab var oInteraction = oTab.getInteraction(); // Set the Tab icon oTab.setIcon("sap-icon://business-card"); //Set the Tab text oTab.setText(oInteraction.attached_data.ChannelSubType + "# " + oInteraction.attached_data.lead_id); // Create content for the Tab form var oMatrixLayout = new sap.ui.commons.layout.MatrixLayout(); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Name" }), new sap.ui.commons.Label({ text : "{attached_data/name}" })); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Email" }), new sap.ui.commons.Label({ text : "{attached_data/email}" })); oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "Interaction Type" }), new sap.ui.commons.Label({ text : "{channel_sub_type}" }}));



oMatrixLayout.createRow(new sap.ui.commons.Label({ text : "{ecfi18n>ECF_XFLD_CREATION_DATE}" }), new sap.ui.commons.Label({ text: { path: "date_created", formatter: function(date) { return sap.ecf.util.Formatter.formatDateTimeShort(date); } } })); //return the view return oMatrixLayout; }, });

Results

Your output should look similar to this:


6 Visitor Chat Application

This document provides an overview on how to configure and consume the visitor chat application inside the customer’s website. Available as of release 1708.

Embedding Visitor Chat to Web Page

There are two ways to include the visitor chat application to your web page:

Either, include the chat application by adding HTML code to your web page as shown below:

Sample Code

<div id="sap-ecf-chat"> <script type="application/javascript"> window.SapEcfClient = { options: { visitorUri: "{<VISITOR_ECFS_FRONTEND/ecf/VERSION>}/visitor/", configuration: { } } } </script> <script type="application/javascript" src="{<VISITOR_ECFS_FRONTEND/ecf/VERSION>}/Intermediate.js"></script> </div>

Or, configure the chat application by including the following JavaScript code into your application file.

Sample Code

if (window.SapEcfClient && window.SapEcfClient.destroy) { window.SapEcfClient.destroy();}window.SapEcfClient = { options: { visitorUri: "{<VISITOR_ECFS_FRONTEND/ecf/VERSION>}/visitor/", configuration: { } }, loadToDom: function () { var oElem = document.createElement("div"); oElem.id = "sap-ecf-chat"; var oScript = document.createElement("script"); oScript.src = window.SapEcfClient.options.visitorUri + "Intermediate.js"; oElem.appendChild(oScript); document.body.appendChild(oElem); }};window.SapEcfClient.loadToDom();


Visitor Chat Application

Configurator

Chat window’s appearance, such as color or size as well as important backend configurations, like contact center backend URLs and ECF front-end server URLs, can be configured through an easy-to-use Configurator application. Open it in the address <VISITOR_ECFS_FRONTEND/ecf/VERSION>/visitor/configurator.html.

Below are the configuration parameters which you can adjust with the configurator. You can see the changes dynamically in the chat window.

Sample Code

visitorUri: "../visitor", /*** Should the loading of the application be started after host page has finished.* @type {boolean}* @default false*/loadAfterPage: false,/*** Should the loading of the application be loaded inside an iframe.* @type {boolean}* @default false*/useIframe: true,/*** Maximum height of the container.* @type {number}* @default 800*/maxHeight: 800,/*** Maximum width of the container.* @type {number}* @default 400*/maxWidth: 400,/*** State transition animation duration.* @type {number}* @default 0.2*/animationDuration: 0.20,/*** Initial position of the container. Needs to have width, height and relative position defined. Either top or bottom and left or right.* @type {object}* @param {number} [bottom=10] Distance from bottom in px* @param {number} [top] Distance from top in px* @param {number} [right=30] Distance from right edge in px* @param {number} [left] Distance from left edge in px* @param {number} [width=200] Width of the container* @param {number} [height=40] Height of the container* @default*/position: { bottom: 20, right: 10, width: 200, height: 40},/*** Also load configuration parameters from json in this URI.* @type {string}* @default ""

ECF Developer GuideVisitor Chat Application C U S T O M E R 55

*/settingsFile: undefined,/*** ECFS backend connection point. Default is current host.* @type {string}* @default "window.location.protocol + '//' + window.location.host + '/ecfs'"*/cctrUrl: undefined,/*** ECF library source path. Default is current host.* @type {string}* @default "../resources/sap/ecf"*/useMinified: undefined,/*** ECF library source path. Default is current host.* @type {string}* @default "../resources/sap/ecf"*/ecfModulePath: undefined,/*** Use minified source.* @type {boolean}* @default true*/authenticationType: undefined,/*** Application language.* @type {string}* @default Same as UI5 language*/locale: undefined,/*** Application logging level.* @type {number}* @default jQuery.sap.log.Level.INFO*/logLevel: undefined,/*** Behaviour of queue visibility.* @type {string}* @default "hidden"*/hideQueues: undefined,/*** Visitor user alias.* @type {string}* @default "Visitor"*/alias: undefined,/*** Visitor user chat address.* @type {string}* @default Generated by the system*/address: undefined,/*** Enable developer toolbar.* @type {boolean}* @default false*/developerToolbar: undefined,/*** Show login input controls for the user in the login page.* @type {boolean}* @default false*/showLogin: undefined,



/*** Show the small notification page instead of login page on startup.* @type {boolean}* @default true*/showNotification: undefined,/*** Parent window URI if application launched inside iframe.* @type {string}* @default window.location.protocol + "//" + window.location.host (parent's origin)*/parentUri: window.location.protocol + "//" + window.location.host,/*** Chat queues available in the CCTR host.* @type {object[]}* @param {string} chatQueues.key Chat queue address* @param {string} chatQueues.text Text to be displayed in the UI* @default example test queues*/chatQueues: undefined,/*** Chat topic reasons to be shown in the login page.* @type {object[]}* @param {string} chatQueues.text Text to be displayed in the UI* @default []*/chatTopics: undefined,/*** Session support in visitor. This is for maintaining chat session when navigating in multi-page website.* @type {boolean}* @default true*/enableSession: undefined,/*** Use video chat capability.* @type {boolean}* @default true*/enableVideo: undefined,/*** Automatically start the video when chat is connected.* @type {boolean}* @default false*/autoStartVideo: undefined,/*** Use more tight layout on desktop environment.* @type {boolean}* @default false*/enableContextSize: undefined,/*** Amount of reconnect tires when connecting to backend.* @type {number}* @default 3*/reconnectLimit: undefined,/*** Timeout between reconnect tries in ms.* @type {number}* @default 5000*/reconnectInterval: undefined/*** URL path to ECF Visitor host application folder. Default is current host.* @type {string}


* @default "../visitor"*/

Configuration via Settings File

Alternatively you can define application parameters via a settings file that is supplied to settingsFile property. To let the visitor chat application read the file the Cross Origin Resource Sharing (CORS) needs to be configured, and define the file location in the configurator. Any configuration provided in the settings file will be overridden by the corresponding configuration property if provided.

Configuration via Chat API Functions

In addition to configurations above, the Intermediate.js file sets up the API static functions on the SapEcfClient object that can be used by the customer to adjust the positioning and other properties.

Sample Code

/** /*** Toggles the visibility state of the chat window.* @param {boolean} [visible] Optionally define should the window be visible*/SapEcfClient.toggle/*** Toggles the maximized/minimized state of the window.* @param {boolean} [maximized] Optionally define should the frame be in maximized state*/SapEcfClient.setState/*** Sets the user's alias or email address.* @param {string} [alias] User alias to be shown in chat* @param {string} [address] User email to be displayed for the agent*/SapEcfClient.setUser/*** Sets the user's alias or email address.* @param {string[]} topics Array of chat topics to be shown in the login page*/SapEcfClient.setChatTopics/*** Set an intermediate client option or configuration setting.* @see SapEcfClient#_mOptions* @param {object} options Any option settings as a key value map*/SapEcfClient.setOption/*** Get an intermediate client option or configuration setting.* @see SapEcfClient#_mOptions* @param {string} option Option property key* @return {any} Selected option*/SapEcfClient.getOption/*** Go to a specific page in the application.



* @param {string} name Name of the page (login, chat)*/SapEcfClient.setPage/*** Set the absolute position of the container within the page.* @param {number} xPosition Position in pixels from the left side of the page* @param {number} yPosition Position in pixels from the top of the page*/SapEcfClient.moveContainer/*** Set the size of the container.* @param {number} width Width of the container* @param {number} height Height of the container*/SapEcfClient.resizeContainer/*** Attach event listener to an application event.* @param {string} eventName Name of the event* @param {function} callback Function to execute on event* @param {object} [listener=this] Define the scope of the callback*/SapEcfClient.attachEvent/*** Detach event listener from an application event.* @param {string} eventName Name of the event* @param {function} callback Function to execute on event* @param {object} [listener=this] Define the scope of the callback*/SapEcfClient.detachEvent/*** Initiates the intermediate chat controller. Reads configuration settings and adds event listeners. This is executed on include.* Executed when script is processed.*/SapEcfClient.init/*** Destroys the iframe container and the host application from the main page.*/SapEcfClient.exit/*** Destroys the iframe container, the host application and the intermediate chat control from the main page.*/ SapEcfClient.destroy


7 Events and Themes

These procedures show you how to work with:

● Events [page 60]● Custom themes [page 65]

Event Reference

All events fired by ECF controls are documented in the ECF API reference: https://[TomcatURL]/ecf/docs/ecfInformationpublishedonnon-SAPsite

7.1 Working with Events

Use

This procedure describes how an event based inter-frame communication takes place within a host application that consumes ECF controls to show interactions in the SAP Contact Center.

Prerequisites

This procedure assumes that you have a composite SAPUI5 control that has Interaction, Accept, Reject, Status and Handle ECF controls running in a iFrame that serves as a container. You have a host application that has this iFrame and that wishes to take some custom action based on ECF Events that are described below.

Procedure

Understanding Events Raised by ECF Controls

ECF controls can raise several events during the course of an interaction. A host application can listen to such events and take appropriate actions to communicate with the ECF controls in both directions.

Below is an image showing a custom host application that has the Interaction, Accept, Reject, Status and Handle controls. When an Interaction has been accepted the Interaction control can subscribe to the appropriate event and then post a message to the host application’s parent window.

60 C U S T O M E RECF Developer GuideEvents and Themes

Concept and Sample Code

Consider a scenario where the host application is interested in performing some action when an interaction has been accepted by clicking the Accept ECF control. When an interaction is accepted the acceptedInteraction event is raised. The host application listens to this event by implementing the appropriate event listener as described in the code snippet below.

After you have created an instance of the interaction control, you can attach an event handler for AcceptedInteraction event.

#!js // we first create references to Accept and Interaction ECF Controls and then declare our custom control with control.compositeECFControl namespace. //The control.compositeECFControl is just an example usage for declaring a custom control in custom namespace. jQuery.sap.require("sap.ecf.controls.Accept"); jQuery.sap.require("sap.ecf.controls.Interaction"); jQuery.sap.declare("control.compositeECFControl"); widgetInteraction = new sap.ecf.controls.Interaction(); widgetInteraction.attachAcceptedInteraction(this.onAcceptInteraction, this);

This will cause the application to execute a custom method when an Interaction has been accepted. The custom method name is provided in the parameter of the event handler for the acceptedInteraction API ( see code snippet above). The following is a sample of such a custom event handler that gets executed when an interaction is accepted.

#!js control.compositeECFControl.prototype.onAcceptInteraction = function(oEvent){ console.log("Accept button was clicked"); console.log(oEvent.getParameters().oInteraction); window.parent.postMessage(oEvent.getParameters().oInteraction,window.location.href); }

ECF Developer GuideEvents and Themes C U S T O M E R 61

In the host application controller listen to the events as per the sample code snippet below.

#!js onInit: function() { var that = this; var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; // Listen to message from child window eventer(messageEvent,jQuery.proxy(function(e) { console.log(e.origin); console.log('parent received message!: ',e.data); }); }

Check the incoming event in the above event handler to check the status of the interaction.

#!js // check the event data if (e.data){ if (e.data.id && e.data.status == "accepted"){console.log(e.data);} //perform custom logic based on this condition

Create content in the host application view in a tabstrip control using the event data in your host application view.

#!js // Create content for the Tab form addNewTab:function(data){ //alert("new tab being created"); var oLayout1 = new sap.ui.commons.layout.MatrixLayout( {columns: 2, width: "100%"}); oLayout1.setWidths(['150px']); var oTF = new sap.ui.commons.TextField( {tooltip: 'Name', editable: false, value: data.attached_data.name, width: '200px'}); var oLabel = new sap.ui.commons.Label( {text: 'Customer Name', labelFor: oTF}); oLayout1.createRow(oLabel, oTF); oTF = new sap.ui.commons.TextField({tooltip: 'First name', editable: false, value: data.id, width: '200px'}); oLabel = new sap.ui.commons.Label( {text: 'ECFID', labelFor: oTF}); oLayout1.createRow(oLabel, oTF); oTF = new sap.ui.commons.TextField({tooltip: 'Email', editable: false, value:data.attached_data.originator, width: '200px'}); oLabel = new sap.ui.commons.Label( {text: 'Email', labelFor: oTF}); oLayout1.createRow(oLabel, oTF); oLayout1.createRow(oButton); oTab = new sap.ui.commons.Tab({text:"TicketInfo"}); oTab.addContent(oLayout1); this.oTabStrip.addTab(oTab); },

Return the host application view with the tabstrip control.

#!js //return the view createContent : function(oController) { this.oTabStrip = new sap.ui.commons.TabStrip("TabStrip1"); this.oTabStrip.setWidth("400px"); this.oTabStrip.setHeight("200px");


this.oTabStrip.attachClose( function (oEvent) { var oTabStrip = oEvent.oSource; this.oTabStrip.closeTab(oEvent.getParameter("index")); }); return new sap.m.Page({ title: "Host Page", content: [ this.oTabStrip ] }); },


Result

Your output should look similar to this:

Host application view with a tabstrip control that shows a tab for every interaction that has been accepted by the Accept control:


Host application view with a nested iFrame control that contains Accept, Reject, Status, Handle and the Interaction ECF controls:

7.2 Working with Custom Themes

This section describes different options for including ECF controls dependant themes and styles in host application that consumes ECF controls.


Theming Concept of SAP ECF Controls

ECF controls are based on sap.m library of SAPUI5 JavaScript framework. The sap.m based controls are dependant on sap_bluecrystal theme for rendering. The steps below describe scenarios to incorporate these styles on demand without burdening the consumer application of ECF controls to load the sap_bluecrystal theme during bootstrapping SAPUI5 core javascript file sap-ui-core.js.

The following describes different scenarios that come into play while loading SAP ECF controls by a host application.

Scenario: host application uses a different theme than the BlueCrystal theme.

Consider a scenario where the host application uses a default core theme that is different from sap_bluecrystal theme and does not want to set the default Theme as sap_bluecrysal for the entire application. Host application loads other SAPUI5 libraries during bootstrap but not sap.m library. In this scenario a simple 2-step procedure will help load the sap_bluecrystal theme that is needed by the sap.m controls that ECF control framework depends on.

1. #!text/html <script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.ui.commons,sap.ui.layout" ></script>

This will cause the application to load without the sap.m library that is needed for the ECF controls to render. Also notice the default theme has not been set to sap_bluecrystal theme.

2. In the code snippet below, application will cause SAPUI5 to load sap.m library from the path provided and all theme resources from path provided in the second parameter of the loadStyleSheet method. This path could be an external theme repository server from where you would like to load the sap_bluecrysal theme or it could be the current server which has this theme in the resources folder of the current application.

#!js // before creating an instance of any SAP ECF Controls, load the sap.m lib sap.ui.getCore().loadLibrary('sap.m', 'resources/sap/m/'); //Upon creating an instance of Session Widget invoke the loadStyleSheet method ecfSession = sap.ecf.core.Session.getInstance(); ecfSession.loadStyleSheet("sap-m-styles", "resources/sap/m/themes/sap_bluecrystal/library.css") }

Only sap.m based controls will now use the sap_bluecrysal theme and rest of the application will continue to use the default theme that was set when the application started.


Scenario: the host application that consumes ECF controls sets sap_bluecrystal as the base theme of the application and loads sap.m based library during bootstrap of SAPUI5 core JavasSript files.

The following code snippet can be used. In this example the Blue Crystal theme will be set for the entire application as default.

#!text/html <script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-frameOptions="deny" data-sap-ui-libs="sap.ui.commons,sap.msap.ui.layout" ></script>

Reference Links

For more information, see Loading External Custom Themes in UI Development Toolkit for HTML5 (SAPUI5) http://help.sap.com/saphelp_uiaddon10/helpdata/en/5a/2df7b50f714d8bb5e9b519a88aa1d6/content.htm?frameset=/en/5a/2df7b50f714d8bb5e9b519a88aa1d6/frameset.htm


http://help.sap.com/disclaimer?site=http%3A%2F%2Fhelp.sap.com%2Fsaphelp_uiaddon10%2Fhelpdata%2Fen%2F5a%2F2df7b50f714d8bb5e9b519a88aa1d6%2Fcontent.htm%3Fframeset%3D%2Fen%2F5a%2F2df7b50f714d8bb5e9b519a88aa1d6%2Fframeset.htm

http://help.sap.com/disclaimer?site=http%3A%2F%2Fhelp.sap.com%2Fsaphelp_uiaddon10%2Fhelpdata%2Fen%2F5a%2F2df7b50f714d8bb5e9b519a88aa1d6%2Fcontent.htm%3Fframeset%3D%2Fen%2F5a%2F2df7b50f714d8bb5e9b519a88aa1d6%2Fframeset.htm

8 Configuration

This documentation lists the required user and queue configuration in System Configurator (SC). For information about the system configuration, see the SAP Contact Center training material: https://help.sap.com/http.svc/rc/62973836bf5840f4ae694d1c819db614/7.0/enUS/SAP_CCtr_Introductory_Training_System_Configurator.pdf.

● Queue settings [page 68]● User settings [page 70]

If you use the voice functionality, a third-party software needs to be installed and configured. For the settings needed for ECF voice functionality, see Configuring SBC Settings [page 73].

8.1 Configuring Queue Settings in System Configurator

1. Create a queue according to the instructions on System Configurator (SC) application help: .If you use a script in your queues, create the script according to the instructions in SC application help: .

2. For settings that you should take into consideration, see the table below.

Used Functionality Setting Required for ECF in SC

Queue Management Queues or in

System Management Channels

Description

○ ECF task○ E-mail

Queue type: E-Mail Queue Create an e-mail queue for e-mail interactions and for ECF tasks.

○ ECF task○ E-mail○ Voice

Queue Mode: Auto-Allocation Hunt group is not supported.

ECF task Name Name the queue so that you can separate it from normal customer e-mail queues.

The Online Monitoring and Reporting applications show the ECF task queues as e-mail queues so a name that distinguishes these queues helps to monitor the tasks and track them in reports.


Configuration

https://help.sap.com/http.svc/rc/62973836bf5840f4ae694d1c819db614/7.0/en-US/SAP_CCtr_Introductory_Training_System_Configurator.pdf

https://help.sap.com/http.svc/rc/62973836bf5840f4ae694d1c819db614/7.0/en-US/SAP_CCtr_Introductory_Training_System_Configurator.pdf




Description

○ ECF task○ Voice○ Chat○ E-mail

Timeout for Contact to be Picked or Rejected

The timeout for ECF task allocation is defined with this setting but if users also use CDT note that CDT follows the user setting Answer Timeout for Queue Contacts. Therefore it is recommended that you define a longer timeout time for Timeout for Contact to be Picked or Rejected (the default value is 120 seconds) than for Answer Timeout for Queue Contacts (the default value is 20 seconds).


Allow Other Contacts When E-Mail Open

If you want to use multi-task allocation

with ECF, select this option in Queue

Management Queues E-Mail

Queue Contact Management


Extra Data Included When E-Mail Allocated

To define extra data sent to the user interface, define this setting either in


E-Mail Channel Extra Data Settings

or in Queue Management Queues

E-Mail Queue Contact

Management

Voice Extra Data Settings If you use the Transfer control and want to define extra data sent with a voice interaction transfer, configure them in


Voice Channel .

○ Voice○ Chat

Directory Synchronization If you use the Destination Input control and have installed RDPI, select this op

tion in Queue Management

Queues Basics . Otherwise the queues are not shown in the Directory.

ECF Developer GuideConfiguration C U S T O M E R 69




Description

E-mail E-Mail Settings assignment block both in Queue Management and System Services

Define the settings according your system requirements.

Note that since ECF has no pending e-mails list, the setting Preferred Agent does not behave as described in . In ECF the system tries to allocate the e-mail to the agent that has been in the e-mail conversation before but if this agent is not available, the e-mail is returned to the queue once the time limit defined in the setting Time Limit for Accepting E-Mails has been reached. The default value for this setting is 1 week so it's recommened to use shorter time limit.

As of 1705, it's possible to use the required agent function. Select Use Required Agent Instead of Preferred Agent and define the time how long the e-mail is offered to the required agent with the setting Default Expiry Time for Required Agent.

For more information, see .

NoteCDTspecific settings in SC do not apply to ECF.

8.2 Configuring User Settings in System Configurator

Procedure

1. Create users according to the instructions on System Configurator application help: .2. See the table below which lists the settings you should take into consideration when creating ECF users.


Configuration


User and Role Management Users/

User Settings Template

Description

○ ECF task○ Text chat○ Video chat○ Voice○ E-mail

Number You can use the internal number range for this if the user only uses ECF task or chat.


○ Logon Name○ Password

The same logon credentials are used for SAP Contact Center as for the host application.

ECF task ECF Task Settings These settings define, for example, how many simultaneous ECF tasks the user can have.


Certificates This is required if you use a certificate for user authentication. Authentication mode is defined in IA.

If you authenticate users with OAuth:

○ Subject is mapped to the “sub” field

○ Issuer is mapped to field name defined in IA (OAuth Field NameWith YAAS this is “tenant”

○ The Subject and Issuer field values must match the information that will be retrieved with the access token from the authorization service (YAAS).

○ Text chat○ Video chat

Chat Address Without a chat address chats are not allocated to the user.

E-mail E-Mail Address Enter the user's e-mail address if you want that the user's personal e-mail address is available as a sender address in outbound e-mails.

E-mail Use E-Mail Address in Sender's E-Mail Replies

Select this option if you want that the e-mail address entered into the E-Mail Address field is available for the user in an e-mail’s From field.




User Settings Template

Description

Text chat Enable Multichat This option must be selected for ECF chat users.

If both ECF and CDT are used, chats are only routed to one client. If Enable Multichat is not selected, chats are routed to CDT.

E-mail Use ECF for E-Mail This option must be selected for ECF e-mail users.

Users also need rights to serve in e-mail queues.

Voice Phone This is defined in SC User and

Role Management Users/User

Roles/User Groups User Rights

User Service

Voice MTD As of 1705, MTD is no more required for voice channel.

In versions before 1705: The voice func

tion requires MTD. It is defined in SC


User Roles/User Groups User Rights

User Service

3. If the Queue Login control is not used, use one of the following ways to log the users on to the queue:

○ Select the Forced option in User and Role Management Users Queue and External Agent Setting .○ Use the supervisor function in the Communication Desktop (CDT) application.○ Use the Online Monitoring application.

4. If users need to view script results, e-mail contact details or previous chat or SMS conversations, they need rights to manage user's and queue's contact history (Manage Contact History on the SC user interface).

8.3 Configuring Browser Settings

Use

The browsers that are used for video chat and calls must support WebRTC.


Configuration

Note● To use certificate for user authentication, the used certificate must be defined among the certificates of the

used browser on the client workstation. Check the browser certificate store and if the certificate is not on the list, import it manually. For example in Internet Explorer, choose Internet Options ContentCertificates Personal .

● If agents use both Communication Desktop (CDT) and ECF, additional settings are required for CDT. For more information, see Client Workstation Guide.

Procedure

Set the following security settings for the IE browser.

Internet Explorer 10 and 11

1. Add the host application website to the trusted sites.2. Enable the setting Access data sources across domains.

8.4 Configuring SBC Settings

In order to get WebRTC working with jsSIP or SIP.js clients, SBC needs at least these items configured:

● Proper certificates (self-signed certificate does not work with every browser)● Media Security: Enabled (WebRTC requires SRTP and DTLS)● TLS port for WebRTC interface● WebRTC IP profile:

○ Remote re-INVITE: Supported only with SDP○ SBC Media Security Mode: SRTP○ Media Security Method: DTLS○ RTCP Mode: Generate Always○ SDP Handle RTCP: Add○ ICE Mode: Lite○ RTCP Mux: Supported○ RTCP Feedback: Enable

● You need to update DTLS MTU lower than 1500 (1280 should be fine).

Note that this is not a complete list of instructions. For more information about SBC configuration, see AudioCodes guides.


9 Log Writing and Language Settings

● Defining Log Levels [page 74]● Saving Log to File [page 74]● Setting Language in ECF [page 75]

9.1 Defining Log Levels

Use

You can set the log level from the host application with the following line:

jQuery.sap.log.setLevel(jQuery.sap.log.Level.DEBUG);

Other possible log levels are (in ascending order, TRACE containing the highest level of information):

● jQuery.sap.log.Level.FATAL● jQuery.sap.log.Level.ERROR● jQuery.sap.log.Level.WARNING● jQuery.sap.log.Level.INFO● jQuery.sap.log.Level.DEBUG● jQuery.sap.log.Level.TRACE

To set the log level of the browser to debug, add the following to the URL

?sap-ui-debug=true

This also loads the debug versions of the source files.

9.2 Saving Log to File

Use

Log is not written to a file by default. Instead it is collected to the internal log model. The current log information can be saved to a file by requesting it from the host application.


Log Writing and Language Settings

ExampleThe following code creates a button which saves the current ECF log to a file when clicked. The log file name is logfile.json, and it is saved to the default download folder in the json format.

var loadLogsButton = new sap.m.Button({text: "Download Logs"}); loadLogsButton.attachPress( function (){ var ecfsession = sap.ecf.core.Session.getInstance(); ecfsession.downloadECFLog(); } );

9.3 Setting Language in ECF

NoteAs of 1708, UI5 defines the language used in ECF, and it uses the language of the browser unless you change the language as described below.

ECF controls support displaying texts in a specified UI language. It can be set in the host application for example with the following code:

// Define the language code var lang = “en”; var ecfsession = sap.ecf.core.Session.getInstance(); ecfsession.loadResourceModel(lang); sap.ui.getCore().getConfiguration().setLanguage(lang);

Some ECF controls display information in the language which has been defined for the user in System Configurator Users Basics User Interface Language . These are, for example, presence profiles and queue names. These settings cannot be changed from ECF but the value is defined in common model property after successful login. It can be fetched with the example code below:

// Get the CCTR language setting var model = sap.ecf.core.Session.getInstance().getCommonModel(); var path = "/users/me/properties/language"; var language = model.getProperty(path);

ECF Developer GuideLog Writing and Language Settings C U S T O M E R 75

10 Controls

The following lists the controls available in the ECF and the versions in which they were released.

For information about modifying the default appearance of controls, see the JSDocs at https://[TomcatURL]/ecf/[version]/docs/ecf/.

Released in 1708:

Consult [page 81]

Released in 1705:

● Script History Control [page 104]● E-Mail History Control [page 101]

Released in 1702:

● E-Mail Controls [page 99]● Script Control [page 103]

Released in 1611:

● Destination Input [page 87]● Transfer [page 80]

Released in 1608:

● Presence [page 86]● Typing Indicator [page 95]● Call [page 95]● Hold Toggle [page 96]● Mute Toggle [page 96]


Controls

● Visitor Queue [page 98]● SIPStack [page 97]● Channel Status [page 88]

Released in SP09:

● Queue Login [page 86]● Chat Input [page 89]● Send [page 90]● Chat Transcript [page 91]● Hang Up [page 92]● Video [page 92]● Video Toggle [page 94]● In-Queue Video [page 93]

Released in SP08:

● Accept [page 78]● Reject [page 78]● Handle [page 79]● Interaction Tab [page 79]● Interaction [page 79]● Status [page 85]● Message [page 88]● Popup [page 88]

10.1 Interaction Controls

● Accept [page 78]● Reject [page 78]● Handle [page 79]● Interaction Tab [page 79]● Interaction [page 79]● Transfer [page 80]● Consult [page 81]

ECF Developer GuideControls C U S T O M E R 77

10.1.1 Accept

sap.ecf.controls.Accept

The Accept button control is used to take an incoming interaction. The Accept control becomes enabled when the agent receives an incoming interaction. Otherwise the Accept control is disabled. The Accept control is enabled if the status control is set to Ready, and it is disabled if the status control is set to Not Ready. If the Accept control is clicked, then the ECF will:

● Notify the host app that the interaction is accepted● Disable Accept control● Disable Reject control● Enable Handle control

If you do nothing, the offered interaction will eventually time out and be returned to the queue.

If more than one interaction tab is displayed, then the Accept control is only enabled for the active or selected tab control.

10.1.2 Reject

sap.ecf.controls.Reject

The Reject button control is used to decline an incoming interaction. The Reject control becomes enabled when the agent receives an incoming interaction. Otherwise the Reject control is disabled. The Reject control is enabled if the status control is set to Ready, and it is disabled if the status control is set to Not Ready. The control is also disabled when there's a waiting voice or chat interaction, that is, an interaction whose channel status is knocking.

If the Reject control is clicked, then the ECF will:

● Close the interaction tab control● Set focus to the previous screen

If you do nothing, the offered interaction will eventually time out and be returned to the queue.

If more than one interaction tab is displayed, then the Reject control is only enabled for the active or selected Tab control.


Controls

10.1.3 Handle

sap.ecf.controls.Handle

The Handle button control is used when an interaction is completed /ended and the associated Tab control is closed. The Handle control button is clicked when the agent has completed working with the Interaction Tab. The Handle control becomes enabled when the agent has accepted the incoming interaction. The Handle control is disabled if the Status control is set to Not Ready. And the Handle control is enabled only if there is an Interaction that has been accepted. If the Handle control is clicked, then ECF will:

● Notify Host App that Interaction is complete● Close Interaction Tab control● Set focus to previous screen

If more than one Interaction Tab is displayed, then the Handle control is bound to the active or selected Tab control.

10.1.4 Interaction Tab

sap.ecf.controls.InteractionTab

The Interaction Tab control represents a single interaction and is responsible for displaying interaction summary and detail information to the agent. The Interaction Tab control can be hidden by the host app if required.

A user may be working on several interactions simultaneously each represented by an individual Interaction Tab control. The collection of all Interaction Tab controls is contained in the Interaction control. Interactions group messages between senders (i.e. customers) and agents (i.e. customer service representatives). An interaction can have one or many messages. Messages of an interaction can come in real-time or be spread over longer periods of time.

10.1.5 Interaction

sap.ecf.controls.Interaction


The Interaction control represents a running list of all active interactions and is responsible for displaying interaction information to the agent. The Interaction control can be hidden by the host app if required.

The Interaction control has “default views” for various interaction types. These views can be customized or used as is. The following table outlines the fields for the Interaction control’s default views.

Interaction Type Tab View Default Views

ECF task (TMI type = XRI) ● Title/subject● Channel sub type (KV pair from TMI)● Status (accepted/rejected)● Originator● Creation date● From queue

Phone ● Status (accepted/rejected)● Originator● Creation date● From queue

Email ● Title/subject● Status (accepted/rejected)● Originator● Creation date● From queue

10.1.6 Transfer

sap.ecf.controls.Transfer


Controls

The Transfer button control is used to transfer the interaction to an internal or external destination. This is currently supported for chat (both video and text) and voice interactions but chats can only be transferred to internal destinations. An internal destination can be either a queue or an agent. The Transfer control becomes enabled when the agent has accepted the incoming interaction and the destination is set correctly: a phone number for a voice interaction and a chat address for a chat interaction.

The supported transfer method is blind transfer. The presence profile of the agent to whom an interaction is being transferred affects how the interaction is handled. For example, in case a call is transferred to an internal number and the call is rejected by the agent, the call is disconnected immediately if the agent’s presence profile doesn’t have forwarding number defined. The presence profile behavior is defined in System Configurator Presence Management Profiles .

It is possible to add extra data to the interaction while transferring. The voice interaction requires configuration in System Configurator System Management Channels Voice Channel . For more information, see . Note

the following about extra data for chat interactions:

● No configuration needed● Agents can update only such data which is not originally set by the visitor.● Agents can override other agent's data but cannot overwrite data set by the visitor.● The visitor doesn't receive the extra data inserted by agents.● The content of the extra data isn't checked by the server.

When the interaction is transferred, the interaction is ended and stays in wrap-up until it is handled. In case the transfer to the destination is not possible, the interaction may fall back to the agent. If the interaction is in the wrap-up state in the user’s model, chat and call behave differently. For the call, the status of the interaction is changed into Incoming. There is an event in the Interaction control to catch the situation. For the chat interactions, a new interaction is created.

If there are errors during the chat transfer, the channel status of the interaction is changed. You can catch the changes through the Channel Status [page 88] control.

NoteA waiting interaction can't be rejected. If you have an ongoing interaction and someone transfers you a voice or chat interaction, the Reject control is disabled.

10.1.7 Consult

sap.ecf.controls.Consult

NoteOnly interactions of the same type are supported in consultation. This means that if you have an active chat, you can only make a consultation chat. And if you have a call, only a consultation call is possible.


The Consult control can be used for creating consultation interactions. In practice, the agent can create a new outgoing call or chat which is related to an existing call or chat. Video chat is currently not supported.

The Consult control supports usage on different types of host applications. The following UI flows can be used by build-in modes:

Mode: Start consultation for selected interaction

This mode supports the usage from a sample/agent.html type of host application for starting consultation. The UI control is sap.m.MenuButton.

1. Listen for selected interaction: Sets the source interaction.2. Listen for Destination Input: Sets the destination address.3. onPress: Display options for possible channels: phone or chat.4. onSelect: Start consultation with selected channel.

Mode: Select consultation channel

This mode supports the usage from host application where the consultation channel is selected before the destination and the source interaction is manually set. The UI control is sap.m.MenuButton.

1. Set source interaction manually.2. onPress: Display options for possible channels.3. onSelect: Fire the Consult Event with selected channel information.


Controls

Mode: Start consultation

This mode supports the usage from the host application where the consultation channel is selected before the destination and the source interaction is manually set. The UI control is sap.m.Button.

1. Set source interaction manually.2. Listen for Destination Input: Set the destination address.3. onPress: Start consultation.


The Consult control checks that mode-based conditions are fulfilled before it becomes enabled:

● Source interaction is set and it is capable for consulting (it must be active and only one consultation is allowed per interaction).

● User and the host application are capable for using consultation channels.● Destination is set and it has valid address (not in select channel mode).

Host application can enable/disable the channels which can be used for consulting.

Event References

Event Descriptiong

startConsultation Fired in Start consultation for selected interaction and Start consultation modes when the UI control is pressed/selected. The event contains the following information:

● Source interaction ID● Target address● Consultation channel● Channel subtype


Controls

Event Descriptiong

setConsultationChannel Fired in Select consultation channel mode when the UI control is pressed/selected. The event contains following information:

● Source interaction ID● Consultation channel● Channel subtype

10.2 Agent Controls

● Status [page 85]● Queue Login [page 86]● Presence [page 86]● Destination Input [page 87]

10.2.1 Status

sap.ecf.controls.Status

The Status radio button control is used for displaying and changing the agent’s status. It is comprised of the Status Control and Label. The Ready status is selected if the agent is available and ready to receive Interactions. The Status control is set to Not Ready if the agent is not available or ready to receive Interactions.

NoteThe Status control will reflect status changes for the agent that may occur in other applications such as the SAP Contact Center Communication Desktop (CDT).

The Status control is extended from RadioButtonGroup control and it contains two radio buttons. If the Status control is set to Ready, then ECF will enable the Accept control and Reject control, and Handle control remains disabled. If the Status control is set to Not Ready, then ECF will disable the Accept, Reject, and Handle controls.

NoteIf you have an interaction being offered when you set your status to Not Ready, the interaction will still be offered and is not immediately returned to queue and the Interaction Tab view is removed. Therefore, it is


recommended you either Accept or Reject any offered interaction when you set your status to Not Ready. If you do nothing, the offered interaction will eventually time out and be returned to the queue.

10.2.2 Queue Login

sap.ecf.controls.QueueLogin

The Queue Login control displays a list of queues that the user is assigned. The user has the option of sorting, filtering and grouping based on queue attributes. If the user has rights to log in to or log out off the queue, then a checkbox is enabled. The control can also be used to display queue-related statistics like number of interactions, maximum waiting time, number of free agents and number of agents serving in the queue. Statistics have colored threshold values, which can be configured in System Configurator. For more information, see .

The default appearance of the Queue Login table can be modified. The size of the control, table column header texts, icons and column exclusions can be customized with the constructor options. The control tries to adjust its column width to different table sizes without sacrificing readability. The default options, such as width or minimum width, can be overridden with simple CSS rules.

10.2.3 Presence

sap.ecf.controls.Presence

The Presence control is used for displaying available presence profiles of the user. The user can also select a new profile from this list of presence profiles. This new active profile is displayed in the toolbar button.

There are three different presence types: free, tentative and away which have different appearance in the control.

The default appearance of the icons, size and position can be customized in the constructor of the Presence control.


Controls

10.2.4 Destination Input

sap.ecf.controls.DestinationInput

The Destination Input control is used for searching for internal users and queues from the Directory which shows, for example, users' availability and which interactions they are able to handle. The selected user or queue can be used as a transfer destination for an ongoing voice or chat interaction. It is also possible to place a new call by entering a number into this control.

In order to use the Destination Input control, you must install Restful Directory and Presence Interface (DPI) from the Restful Interfaces software package.

The properties related to the search function and appearance can be set in this control constructor or later by Setter. For more detailed information, see the Destination Input JSDoc. Additionally, the control appearance can be changed by modifying the following style classes directly in the current CSS file:

..\ecf\resources\sap\ecf\pub\sapecflibrary.css

10.3 Information Controls

● Message [page 88]● Popup [page 88]● Channel Status [page 88]


10.3.1 Message

sap.ecf.controls.Message

The Message control is used to display system messages. The Message control supports the following Message types:

● Alert messages which interrupt the users in their workflow.● Error messages which are important, but the users can nevertheless go on with their work and fix the error

later.● Warning messages with potential problems.● Success messages like successfully saved.

The Message control displays the message type and translated message text and icon in a label. Displayed message types can be limited with configuration. Messages can also be displayed in the Popup control.

10.3.2 Popup

sap.ecf.controls.Popup

The Popup control is a dialog window that is used for displaying messages from the Message control.

10.3.3 Channel Status

sap.ecf.controls.ChannelStatus

Channel Status of an interaction is the status of that call, chat or ECF task interaction. For example, a call has a Ringing as channel status and the interaction status would be Incoming if it is an inbound phone call to an agent. Sensing changes in the interaction channel status could be vital for a host application to trigger business events depending on some criterion.

This control lets a visitor-side or agent-side host application know about any changes in the Channel Status property of a bound chat interaction. This control is useful for informing visitor host application about when a queue is full or closed. It lets the host application know about changes in the Channel Status property of an interaction by raising events such as the ChangedChannelStatus event which the visitor or agent host application can subscribe to get notified for any changes in the Channel Status property of an interaction that this control is bound to.

For agent host application this control can let the host application know if a call could not be completed due to an invalid phone number or the number being busy or when the status of a incoming call changes from Ringing to Accepted. If a host application wants to know the different channel status of call or chat interaction, it can create an instance of this control and then pass it an interaction ID.


Controls

Event Reference

changedChannelStatus:(oControlEvent): Event is fired when channel status of a bound interaction changes.

10.4 Chat Controls

● Chat Input [page 89]● Send [page 90]● Chat Transcript [page 91]● Hang Up [page 92]● Video [page 92]● Video Toggle [page 94]● Typing Indicator [page 95]

10.4.1 Chat Input

sap.ecf.controls.ChatInput

The Chat Input control is required for chat participants (for example Agent and Visitor) to input chat messages to be sent to either party. This control is placed in an agent-facing host application and a visitor-facing host web site.

The control is disabled until a connection is made between participants. Once the participants are connected, the Chat Input control is enabled providing a text area allowing the participants to type and copy and paste messages in plain text only.

Once the chat has ended, the Chat Input control for the agent is disabled and the Chat Input control for the visitor is removed.

The Chat Input control has a default size set to 200px by 400px. A vertical scroll bar will be enabled automatically.

Chat Input also updates the information whether the chat party is typing or not. This information is needed by the other chat party’s typing indicator control.

Other attributes for the Chat Input control include:

● The Chat Input control an accept HTML input from the user. The allowed HTML tags are listed at the end.● The Chat Input control has a default size set to 200px by 400px. A vertical scroll bar will be enabled if there are

more than 2 rows of text. Pressing Ctrl + Enter does a carriage return.● The Chat Input control will only allow a maximum of 2000 characters not including carriage returns. HTML

tags are not counted in this word count and while counting the characters in a word it looks for a space between two words.

● Maximum size of the HTML message that is sent out by the Chat Input control is 8kb. If the size of the message is bigger that this, the message will not be sent out, and an error message will be raised to the host application via the contentFormattingError event.


● Label displaying “2000 characters left” counts down the number of characters left in the chat input. This label can be hidden by host application developer.

● The Chat Input control has a default size set to 200px by 400px.● A vertical scroll bar will be enabled when needed.● The default timeout for setting the chat participant status to “not typing” is five seconds.

Allowed HTML Tags

● Hyperlinks● Text formatting: bold, underline, italic● Carriage returns/paragraphs● Lists (bulleted and numbered)

10.4.2 Send Chat

sap.ecf.controls.SendChat

The Send control is required for chat participants (for example Agent and Visitor) to send the text entered in the chat input control to the other chat participant. This control is placed in an agent-facing host application and a visitor-facing host web site along with the Chat Input control.

The control is disabled until a connection is made between participants. Once a connection is made between participants, the Send control is used to content of the Chat Input control. The participant can press the Send control or click Enter to send the contents in Chat Input control.


Controls

10.4.3 Chat Transcript

sap.ecf.controls.ChatTranscript

The Chat Transcript control is required for chat participants (for example Agent and Visitor) as it brokers the messages between participants and used to view the messages in a chat conversation.

As of 1705, it's possible to use chat history search. To enable it, you must install Restful Contact Management Interface (CMI) from the Restful Interfaces software package.

The properties related to the history search function and appearance can be set in this control constructor or later by Setter. For more detailed information, see the Chat Transcript JSDoc. Additionally, the control appearance can be changed by modifying the following style classes directly in the current CSS file:

..\ecf\resources\sap\ecf\pub\sapecflibrary.css

The control allows participants to easily distinguish between messages sent or received from either participant. The Chat Transcript control does this by providing a Timestamp and Agent / Visitor name or Alias next to each message as shown below.

● Timestamp○ 12-hour, for example [2:30:15 PM]○ 24-hour, for example [14:30:15]

● Agent/Visitor name or Alias○ Agent alias: “Agent”○ Visitor alias: “Visitor”

● Agent/Visitor message (from Chat Input control)

Sample Chat Transcript

● The Chat Input control has a default size set to 5 rows, 20 column width.● A vertical scroll bar will be enabled if there are more than 5 rows of text.● The chat messages are displayed in the Chat Transcript control as HTML content.

NoteThe Chat Transcript control consists of HTML text area control and its rendering in IE10 adds an extra line. For see more information, see IE browser information.


10.4.4 Hang Up

sap.ecf.controls.Hangup

The Hang Up control is used to tell the server that the conversation between partcipants has ended. This control is disabled until a connection is made between participants.

When the Hang Up control is clicked, the control along with the chat input and Send controls are disabled.

● If wrap up is configured, it starts wrap up.● Is enabled if the channel type is phone or chat.

When the Hang Up control is clicked, the visitor chat controls (Chat Transcript, Chat Input, Send, and Hang Up) are removed.

10.4.5 Video

sap.ecf.controls.Video

The video widget is used to display a video stream between two participants. The video stream utilizes WebRTC technology, so no local downloads or installations are required.

The video stream for a video control can either be local (own camera) or remote (other person’s camera). The remote mode can be set by the host application to show an optional in-queue Video and when the remote end connects, the video is stopped and the remote end shown. If there is no in-queue video set, the video window appears blank until connected to the other end.

Two video controls can be added to a host application, with different roles. This gives you the option to show the local stream (your own camera) on one video control, and another video control showing the remote camera, all within the same host application. Below is a sample application showing text chat and video chat widgets. The larger blank window is set as the remote video control, and the smaller one for a local camera.


Controls

Permissions are requested from both users prior to video streaming commencing, and this utilizes the browser’s own permissions.

Browsers should be compatible with each other – so one end can send using one browser, and another can receive using a different browser.

Typically the video chat control is used in conjunction with text chat. If for some reason the video chat fails (due to poor connection) the conversation can continue with text chat only.

Note the following about video chats and calls:

● It's not possible to have a video chat stream and a call simultaneously. If a user has an active call, video chat can't be started. And if the user has an active video chat, the Call button is disabled and in case of an incoming call, the Accept button is disabled.

● If a user has several video chat interactions, only one video chat stream can be active at a time.

10.4.5.1 In-Queue Video

The video control also supports playing an “in-queue” video when a video chat is “queued”.


The current implementation of the in-queue video utilizes HTML Video – Browser Support. Currently support is related to HTML Video element which is the base for UI control. There are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser MP4 WebM Ogg

Chrome Yes Yes Yes

Firefox Yes Yes Yes

It is recommended to use a widely supported format, to ensure a larger cross section of consumers can enjoy this functionality. For the latest supported video formats, check the browser information.

NoteThe in-queue video has the following functions:

● Host app can define the video to be played. See the matrix for supported video types per browser.● In- queue video is started when interaction status becomes “Queued”.● In-queue video is stopped when Interaction status becomes “Accepted”.● In-queue video can be stopped and restarted from video toggle control.

10.4.6 Video Togglesap.ecf.controls.VideoToggle

The video toggle is designed with two purposes in mind:

● Check the browser with the toggle embedded is WebRTC compatible● Start or stop the video connection

When a window with the video toggle embedded is opened, it checks whether the browser is WebRTC compatible.

For agents, there is a specific internally used skill for video. This is set by the video toggle as capable/not capable, which is sent to CEM for routing purposes. If the skill is not set, then the agent will never receive a video chat, even if they are available and in the queue. This prevents them receiving a video call without the ability to answer.

On the customer side, when starting a chat with the video toggle button enabled, this sends the intent for video as part of the chat request.

Video capable customers will only be allocated to video capable agents. Text chat customers without video can be allocated to both video and non-video agents.

The toggle can be used by either party to stop or start the video. Video can be stopped or started during a conversation without breaking the connection.

On the visitor side, the toggle can be used for stopping and restarting the in-queue video (if defined) when the Interaction status is “Queued”.

NoteThe video toggle control should always be added when using the Video control.


Controls

10.4.7 Typing Indicator

sap.ecf.controls.TypingIndicator

Typing Indicator is designed for displaying a notification text when the other chat party is typing a new message. The text contains other party’s alias name and localized text is typing. If the other party is not typing, then there is no text.

Typing Indicator needs to be used with the Chat Input control. The Chat Input control recognizes keystrokes and sets the chat party’s status to “typing” or to “not typing”. Other party’s typing indicator can access the status value and display the corresponding information.

Status is set to “not typing” if there are no keystrokes recognized within a specified interval. The default value for this is five seconds. The value can be adjusted with the Chat Input control’s parameter in the host application.

10.5 Call Controls

● Call [page 95]● Hold Toggle [page 96]● Mute Toggle [page 96]● SIPStack [page 97]

10.5.1 Call

sap.ecf.controls.Call

The Call control is used for making outbound calls by setting the variable numberToDial and initiating the call either by clicking the Call button or sending the command from the host application. The Call control can be used for sending DTMF during the active call.

The control doesn’t implement a number input for the user. This implementation is left for the host application. The control has convenience event handlers for the Call button clicks, so the host application can attach a listener to format and set the numberToDial variable when the call button is clicked.

The control is disabled by default when numberToDial is empty. However, with constructor it is possible to enable the button so that even when numberToDial has no value, the Call button can used in different scenarios (for example calling with static input).


When the Destination Input control is paired with the Call control, the input field can be used for searching for a phone number, and when the user chooses a number, it is automatically selected as numberToDial.

10.5.2 Hold Toggle

sap.ecf.controls.HoldToggle

The hold toggle is used for putting a call on hold and resuming it. It displays a text for which an action is possible (Hold or Resume).

When an agent puts a call on hold, the other party cannot hear the agent and vice versa. It is also possible to define an on-hold prompt to be played to the other party.

The toggle is enabled only within active phone calls handled by ECF. When the button is clicked, an event is sent to the server for changing the call hold state. The server responds with a message containing the current (new) state. The hold toggle sets its text and the clicked state according to the given value. It also fires an event about the new state for possible host application use (see the section Event Reference).

The possible hold toggle states are:

Event Reference

callHoldChanged(oControlEvent): Event is fired when call hold status is changed

10.5.3 Mute Toggle

sap.ecf.controls.MuteToggle


Controls

The mute toggle is used for muting and unmuting a call. It displays text for which an action is possible (Mute or Unmute).

When an agent mutes the call, the other party cannot hear the agent. The button is enabled only with active phone calls handled by ECF and when call is not on hold. When the button is clicked, an event is sent to the SIPStack control for changing the call mute state. SIPStack responds with message containing the current (new) state. The mute toggle sets its text and the clicked state according to the given value. It also fires an event about the new state for possible host application use (see Event Reference).

The possible mute toggle states are:

Event Reference

callMuteChanged(oControlEvent): Event is fired when call mute status is changed

10.5.4 SIPStack

sap.ecf.controls.SIPStack

The SIPStack control is faceless control that acts as a bridge between Call, Mute Toggle, and Hold Toggle controls and the jsSIP JavaScript library. There is no user interface for this control. It listens to Call, Mute Toggle and Hold Toggle controls to make an outbound call, mute or unmute a client terminal and let the Hold Toggle control know when a call is placed on hold.

This control registers the client terminal using jsSIP library APIs to a WebRTC gateway if the client is WebRTC compliant with audio capability.

SIPStack lets the session control know when the client terminal has registered and unregistered. After SIP connection to the WebRTC gateway this control automatically makes an attempt to register the client using


extension, sip_host, and sip_proxies properties this control is data bound to and which are updated by the Contact Center Server once the client is WebRTC capable.

This control enables the SIP client to accept a call interaction that is offered to it by the Contact Center Server after successful SIP registration and phone capability validation for the client. The control listens to the callNumberToDial event that is raised by the Call control.

This control also runs through different checks to see when it receives an outbound number to dial by checking the state of the /users/me/interactions/ collections for a phone channel type of interaction whose terminal ID matches with its bound terminal_id property. If an interaction is not in “incoming” or “outgoing” status and it has not been accepted, then it will raise the sap.ecf.core.Constants.events.CALL_NUMBER_DIALED event for the session event bus.

If a match based on the terminal ID takes place and the interaction was in the “Accepted” status, then it will send DTMF tones. Otherwise it will log an error with an error message. Data bindings: It is bound to /users/me/properties/terminal_id in the ECF client Common Model.

Mute/Unmute: This control listens to the callMuteToggle event from the MuteToggle control and invokes the jsSIP API for muting the client terminal if the client was unmuted and vice versa. It also listens to the event fired from jsSIP library when a client has been successfully muted or unmuted. It then fires the session event sap.ecf.core.Constants.events.CALL_MUTE_CHANGED.

10.6 Visitor Queue

sap.ecf.controls.VisitorQueue

Visitor Queue is a faceless control so there is no UI for this control.

This control lets the host application know when a queue has been added or what has changed in a queue that the host application is interested in.

The control accepts queueAddress as input which is an array of queue addresses which are string values and hold the queue address of the queue that you have received from SAP Contact Center for your host application.

var visitorQueueStat = new

sap.ecf.controls.VisitorQueue({"queuesAddress":['[email protected]’],

"pollingInterval":1000,"startPollingWhenCreated":true});

Once the queuesAddress property is set, the request for starting polling mechanism starts at every x interval which has been provided by the host application in the constructor for this control. Also a boolean flag for starting the polling immediately or not can be set as property for this control.

There are two events fired by this control that the host application can use as per their needs:

1. queueAdded2. queueStatsChanged

ECF control Visitor Queue fired the event queueAdded:

Event data = '{ "queue": { "address": "[email protected]",


Controls

"id": "fb60f93e0b7a4878ab7935fc716912d7", "name": "", "statistics": { "avg_wait_time": "0", "service_closed_time": "", "service_open_time": "", "status": "open" }, "type": "chat" }, "changed": [], "id": "__queue0" }' sap.ecf

ECF control Visitor Queue fired the event queueStatsChanged:

Event data = '{ "queue": { "address": "[email protected]", "id": "fb60f93e0b7a4878ab7935fc716912d7", "name": "", "statistics": { "avg_wait_time": "10", "service_closed_time": "", "service_open_time": "", "status": "open" }, "type": "chat" }, "changed": [avg_wait_time"], "id": "__queue0" }' sap.ecf

The changes for the given queue are sent in the “changed” array of the queue object which is returned in the event listener for the queueStatsChanged event.

10.7 E-Mail Controls

● E-Mail Control [page 99]● New Control [page 100]● E-Mail History Control [page 101]

10.7.1 E-Mail Control

sap.ecf.controls.Email

The E-Mail control is used to handle both incoming and outbound e-mail content.

When an e-mail has arrived, the e-mail content is displayed in the E-Mail control. The actions available for the e-mail are Reply, Reply All and Forward. When choosing any of these actions, the E-Mail control changes to editing view. The address in the Bcc field is hidden by default but can be shown by using the Bcc button. Available actions in the editing view are Send, Cancel and Save. When the e-mail is sent, another reply can be made.


NoteSince there is no separate list for e-mail drafts, only one draft can be active at a time. Canceling will delete the draft.

10.7.2 New Controlsap.ecf.controls.New


Controls

The New control is used for initiating a new outbound e-mail interaction draft. The new e-mail is then created on the server and opened for sending in the client in the E-Mail control. It is automatically in the editing view and the available actions are Send, Cancel and Save. When Cancel is clicked, the e-mail draft is deleted. When the e-mail is sent, the control is in the view mode and the e-mail no longer can be edited, only the interaction can be handled.

Initial data for the new e-mail can be defined by the property InitialData. This way you can define for example To addresses to a new outgoing e-mail. For a full list of supported data, see the JSDoc.

NoteThe used From address needs to be some of the supported sender addresses of the user.

For example:

var newButton = new sap.ecf.controls.New(); newButton.setVisible(false); var initialData = { "to":[ { "address": "[email protected]", "name": "John Smith" }, { "address": "[email protected]” } ], "attachedData":{"related_id":"1234"}, "from": "[email protected]", "content":"Hi, this is a message for you all" }; widgetNew.setInitialData(initialData); newButton.press();

The New control is disabled by default until the user has logged in with e-mail permissions.

Model example:

{ "users": { "me": { : "properties": { "login_status": "logged_in", : "permissions": { "email": true, :

10.7.3 E-Mail History Control

sap.ecf.controls.EmailHistory

The E-Mail History control is used for displaying a specific e-mail to agents. This means the e-mails which have already been saved into the database.The control communicates with server for retrieving the e-mail results.


To create and fetch the information about a specific e-mail based on the provided ID, the following code needs to be executed:

var emailHistory = new sap.ecf.controls.EmailHistory(); emailHistory.setEmailById(emailId);

Currently this widget supports e-mail fetching only by the e-mail ID. This ID is a GUID which must be a 32 characters long string.

To use the E-Mail History control, you must install Restful Contact Management Interface (CMI) from the Restful Interfaces software package.


Controls

Event References

Event Description

ServerSuccess Fired when the server responds successfully to a request.

ServerFail Fired when the server responds with an error to a request.

10.8 Script Controls

● Script Control [page 103]● Script History Control [page 104]

10.8.1 Script Control

sap.ecf.controls.script

The Script control is used for displaying a script to agents, filling out the script and sending these results to the server. The Script control is related to an interaction and it needs to be assigned by the host application. This control resolves whether there’s a script for assigned interaction and when it should be opened. At this phase it also constructs the script template. The control communicates with server for retrieving the script templates and submitting the script results. The toolbar and the button location of script control can be customized by the host application.


Event References

Event Description

ScriptingChecked Fired when resolving for script usage is done.

● InteractionId● ScriptId (empty if no scripting for this interaction)

● OpeningType (queuespecific opening type, empty if not defined)

ScriptOpened Fired when the defined opening phase occurs.

InteractionId

ScriptLastQuestionDone Fired when the last question of interactive script is done.

● InteractionId● ScriptId

ScriptSaveDone Fired script save is automatically submitted.


ScriptSavePressed Fired when save button is pressed.


10.8.2 Script History Control

sap.ecf.controls.ScriptHistory

The Script History control is used for displaying script results to agents. The control communicates with the server for retrieving the script results.

To create and fetch the information about specific script results based on the provided ID, the following code needs to be executed:

var scriptWidget = new sap.ecf.controls.ScriptHistory(); scriptWidget.setScriptByContactId(contact_id); // or scriptWidget.setScriptByScriptResultId(script_result_id);


Controls

Currently this widget supports fetching by contact ID or script result ID. Both IDs are GUIDs, and the GUID must be a 32 characters long string.

To use the Script History control, you must install Restful Contact Management Interface (CMI) from the Restful Interfaces software package.

Event References

Event Description

ServerSuccess Fired when the server responds successfully to a request.

ServerFail Fired when the server responds with an error to a request.


11 Embedding an ECF Host Application in C4C

These procedures show you how to host an ECF application in the C4C Live Activity Panel.

SAP Cloud for Customer (C4C) provides the ability to host an HTML mashup in an iFrame in the Live Activity panel. The mashup can be any HTML page, therefore ECF applications can be embedded as C4C HTML mashups.

The C4C documentation provides detailed instructions for how to enable an HTML mashup in the C4C Live Activity panel:

● Mashups and Web Services● Mashup Authoring Quick Guide

Here are the basic steps to activating an ECF application as a Mashup in C4C:

1. Define a Mashup in C4C [page 106].2. Activate the Mashup in C4C [page 108].3. Enable Phone and Chat Activity in C4C [page 114].4. Install the C4C Desktop CTI Adapter [page 115]..

11.1 Defining Mashup in C4C

Prerequisites

Depending on your C4C Solution, you may need to launch in Microsoft Silverlight.

Procedure

1. Go to Application and User Management Business Flexibility Mashup Authoring

or

Administrator Business Flexibility Mashup Authoring .


Embedding an ECF Host Application in C4C

https://help.sap.com/viewer/cea15f900ca04c4faa35d3044577fe27/1708/en-US/1872a289763d1014b30ffe621fe46f41.html

https://help.sap.com/viewer/cea15f900ca04c4faa35d3044577fe27/1708/en-US/186b3de4763d1014bdd381a74921cf5f.html

2. Select New HTML Mashup :

3. Fill out the New HTML Mashup form to register the ECF Reference Mashup and click Save.

Field Value

Mashup Category Productivity & Tools

Port Binding Web Widget

Mashup Name Communication Channels

Description SAP Contact Center ECF Widget

Status Active

Type URL

ECF Developer GuideEmbedding an ECF Host Application in C4C C U S T O M E R 107

Field Value

URL https://[TomcatURL]/ecf/[version]/ecfliveactivity

Height 555

11.2 Activating Mashup in C4C

Context

Now that the ECF Mashup is defined in C4C, it needs to be activated in the Live Activity panel in C4C.

Procedure

1. Go to Adapt Enter Adaptation Mode :



2. In the right Panel, click Live Activity and a Live Activity panel will appear on the right. Then click on the gear icon in the Live Activity panel and click Personalize:

A larger panel will then appear on the left that says Live Activity.

3. Then go to Personalize This Screen :


A Personalize panel will appear on the right side:

4. In that panel, make sure the following items are set:



Item Value

Call Information Pane Checked

Embedded CTI Integration Not checked

Customers Checked

Tickets Checked

Inbound Call Page Checked

CALL INFORMATION Checked

5. Then click the Save button.6. Click the Mashups and Web Services header at the bottom and you will see the following items in the

Personalize menu:

7. Check the Communication Channels checkbox (this is the mashup we defined in C4C in Defining the ECF Reference Mashup in C4C [page 106]). Click the Save button at the top of this panel.

8. Close the Personalize screen (see red circled area):


9. Then click Yes to save the changes when presented with the Confirmation Dialog:

10. Then exit Adaptation Mode by going to Adapt Leave Adaptation Mode :



Then you can leave Silverlight mode and close your browser. When you log back into C4C, you should see the ECF Reference Mashup in the C4C Live Activity panel:


11.3 Enabling Phone and Chat Activity in C4C

Prerequisites

Depending on your C4C Solution, you may need to launch in Microsoft Silverlight.

Procedure

1. Go to Business Configuration Implementation Projects .2. Click Edit Project Scope.3. Click the Next button until you are in section 4: Questions.

4. Check the checkboxes for the following:○ Do you record phone calls?○ Do you record chat activities?

5. Click Next and then Finish.

This will enable the Phone and Chat Activity Log entries in C4C with the CTI Desktop Adapter.



11.4 Installing the C4C Desktop CTI Adapter

Procedure

1. Click the Downloads link in C4C:

2. From the download screen, select the CTI Client Adapter to download:

3. Then run the downloaded installation file and follow the install instructions.4. Enable the CTI Adapter.


Important Disclaimers and Legal Information

Coding SamplesAny software coding and/or code lines / strings ("Code") included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended to better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, unless damages were caused by SAP intentionally or by SAP's gross negligence.

Gender-Neutral LanguageAs far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addressed directly with "you", or a gender-neutral noun (such as "sales person" or "working days") is used. If when referring to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun does not exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the documentation remains comprehensible.

Internet HyperlinksThe SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hint about where to find related information. SAP does not warrant the availability and correctness of this related information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damages caused by the use of related information unless damages have been caused by SAP's gross negligence or willful misconduct. All links are categorized for transparency (see: https://help.sap.com/viewer/disclaimer).


Important Disclaimers and Legal Information

https://help.sap.com/viewer/disclaimer

ECF Developer GuideImportant Disclaimers and Legal Information C U S T O M E R 117

go.sap.com/registration/contact.html

© 2018 SAP SE or an SAP affiliate company. All rights reserved.No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. The information contained herein may be changed without prior notice.Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.Please see https://www.sap.com/corporate/en/legal/copyright.html for additional trademark information and notices.

https://go.sap.com/registration/contact.html

https://go.sap.com/registration/contact.html

https://www.sap.com/corporate/en/legal/copyright.html

ecf developer guide 1 ecf developer guide 5 2 before you start 8 3 simultaneous interactions 12 4...

Documents