Friday, June 5, 2009

Embedding the CEA Telephony Widgets

The first step when embedding any of the CEA widgets into your application is to copy the ceadojo directory ( <washome>\feature_packs\cea\javascript\ceadojo ) into your application.

Based on where you copied the ceadojo directory you will need to use that path when pointing to the various JavaScript and CSS files. For this post I will assume that I've copied the ceadojo directory directly under the context root and the HTML file that I am adding the widget to is at the same path.

For the Click to call widget we need to import the following CSS files:
<style type="text/css">
@import "./ceadojo/dijit/themes/tundra/tundra.css";
@import "./ceadojo/cea/widget/ClickToCall/ClickToCall.css";
@import "./ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>
 The CSS imports for the Call notification widget are the same just replace ClickToCall/ClickToCall.css with CallNotification/CallNotification.css.

The next step is to import the CEA widget toolkit. Importing the CEA widget toolkit is just like importing any other Dojo toolkit. This step is the same for both telephony widgets. ( Note: I will cover the steps to import ceadojo on a page already using Dojo in a later post )
<script type="text/javascript" src="./ceadojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>
The CEA widgets are built on top of Dojo's Tundra theme. So next we need to add this theme to the body:
<body class="tundra">
And finally the last step is to place the CEA widget on the page. The following HTML code snippet will place the Click to call widget on the page:
<div ceadojoType="cea.widget.ClickToCall" widgetNumber="xxx-xxx-xxxx" enableCollaboration="true" canControlCollaboration="true" defaultCollaborationUri="cobrowseWelcome.html"></div>
There are a few additional attributes that need to be configured for Click to call.
  • widgetNumber is used by the Click to call widget to determine what number to call.
  • enableCollaboration determines whether this widget will be made available for Contact center cobrowsing. If Contact center cobrowsing is enabled you should also configure the next two attributes
  • canControlCollaboration determines whether this widget will be able to drive the collaboration session
  • defaultCollaborationUri specifies what page to load first when the Contact center cobrowsing is started.
The following HTML code snippet will place the Call notification widget on the page:
<div ceadojoType="cea.widget.CallNotification" enableCollaboration="true" canControlCollaboration="true" defaultCollaborationUri="index.html"></div>
For the Call notification widget the same attributes apply, however "widgetNumber" is an optional attribute that determines what number to monitor for incoming calls. If not specified the user will be presented with a textfield to enter the number.
Posted by at
Labels: , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)