Retailers need WebSphere CEA

There have been so many times lately that I have been realizing that websites need the WebSphere CEA features and functions. Recently my wife was shopping online and trying to send me links and describe over instant messaging what she was seeing. It was painful and we finally decided we would hold off until later that evening. We forgot that night and looked again at it a day later. That was a sale that was almost lost. Actually, to be honest, the sale was lost...but had we had peer to peer cobrowsing on that site we may have purchased it that first day.

I have also had the experience many times when buying gifts where I knew nothing about the subject matter and had to call a company or visit their store. Whether it was custom jewelry I bought my wife for mother's day or shopping for something for my own mother, there are times I just need more information than I can find online.

After talking to a major US retail company the past couple of days it became evident that our CEA functions when shown were much more amazing. This is why I made the video above, to show this typical experience I have when shopping for something and I need help. But the ability to shop with a friend brings a whole new experience to online shopping and could help drive another boost to online commerce sites. Below I have shown a video describing how that interaction might work.

There are other major areas when seeing something online would be useful when on the phone. For example, last year it was apparent our credit card info was stolen and had to call into Chase and describe the transactions that were invalid. We could have saved time if I could have shown them which transactions through a couple of clicks rather than describing them. But security is a constraint...can you show your customer information without security? How about without a plugin? The CEA FEP does this with security, using the application's current security model. There is no plugin, its all Javascript. It requires some new thinking - but not necessarily new code. :-) We'll talk more about secure cobrowsing soon...

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.

Contact Center Demo of CEA function

Here is another homemade demonstration of the WebSphere Application Server Communications Enabled Applications function in a Contact Center environment. Here we have our call notification widget, click to call widget, and contact center cobrowsing functionality embedded in our Plants by WebSphere sample application.



Savio wrote more about how these Contact Center scenarios can play out here. Also, the widgets have some further detail here in a blog I wrote. Finally, if you are at IBM Impact this week, check out our 10:30 AM Session in Murano 3205 entitled "Lower Costs, Improve Satisfaction with Communications-Enabled Applications." And, more importantly, ask us questions while there!

Your applications need a dose of CEA - Contact Center Scenario

In my previous post I mentioned that the WAS V7 Feature Pack for CEA Beta can help you create some pretty awesome user experiences for multi-modal online interactions. Well, what does that really mean? Let's start with a common scenario.

While searching for a life insurance policy online a user might want to call a customer service representative (CSR) about discounts since her mortgage is held by the bank. More often than naught, the CSR wants to point the user to more information on the bank's website. But here's the dilemma. The user and CSR are involved in a multi-modal interaction, but there's no synchronization between the two modes of communication. If the CSR wants to direct the user to a specific page on the site, he must tell the user "okay, go to the homepage, on the left navigation bar, click Other Offers and then scroll half way down the page, look for a link that says...." Agreed, that's an ugly interaction.

When the user decides to purchase life insurance, the interaction is no prettier. While the user and CSR are speaking on the phone and both have browser windows open, there is no linkage between the two modes of communication. The user still has to speak certain information which the CSR must transcribe into the application form. There's no visual way for the user to verify that the CSR has transcribed the spoken information properly. Try saying "Savio Rodrigues" and the person on the other end of the phone not transcribe "Fabio Rodriguez" or "Flavio Rodriguez" or "Sabio Rodriguez". Not cool.

We designed the WAS V7 Feature Pack for CEA Beta to address a scenario in which a user and CSR are involved in a multi-modal interaction prior to the user making a decision.

Click to Call
Let's consider the same scenario with a Click to Call Web Widget that you can embed in existing and new web applications.

Unlike third party hosted Click to Call offerings, the Click to Call feature in the WAS V7 Feature Pack for CEA Beta can be completely integrated into your application. No need to spawn another browser window or advertise your hosted provider's service. Integrated and consistent user experience? Check.

Next, our Web Widget is integrated with your telephony infrastructure (so far, Cisco & Nortel). Why pay a third party Click to Call hosted provider per minute fees for calls when you can leverage your existing telephony infrastructure? Lower costs and driving higher utilization of existing resources? Check.

Finally, any information that you want to share between the user and the CSR through the Click to Call session, such as login information or account numbers, does not have to go through a third party. Increased privacy & security? Check.

Contact Center Cobrowsing
Okay, you added a Click to Call widget to your application, now what? Well, your customer enters her phone number and clicks on "Connect". The result is a shared session between the user and the CSR (through WebSphere Application Server). Oh, and there is no software for the user or CSR to install. Security and ease of use? Check.

With this shared session both the CSR and the user can take control and direct what is shown on the other person's browser window. Both can highlight elements on the page for the other person to see. No more having to say "scroll half way down the page and look for the link to the right of the picture of a monkey". Improved user experience? Check.

Two Way Forms
Next up, the dreaded filling out of forms over the phone. But have no fear. Since you have a shared session between the user and CSR, there's no reason that the form can't be displayed to both parties. But why stop there? The Two Way Forms feature of the WAS V7 Feature Pack for CEA Beta lets both parties enter data into various elements of the form. You can even restrict the data shown in a form field between the CSR and user. For example, the user could type in and see their full credit card or social security number, while the CSR would only see the last 3 digits. The user can even click to confirm that individual form field data was transcribed correctly by the CSR. Fewer frustrated users? Check.

Want to learn more?
Get the WAS V7 Feature Pack for CEA Beta here and the Getting Started guide, part of the Library materials, here. Also, here's a good description of the widgets from Erik. Finally, if you need a copy of WAS V7, you can get a trial here.

Let us know what you think!