How To Upgrade an Existing Configuration to Support Mobile Users

This article discusses how to convert an existing operator group already in operation to support mobile users. If you are setting up a new operator group and you intend to support mobile users, skip this article and instead read the Configuring Ace Operator for Mobile Users blog which covers your case more simply. For purposes of this discussion, both visitor and operator mobile access are covered; of course, you can decide to provide only one or the other in which case just follow the parts that pertain to the user for which you want to provide mobile access. Before proceeding, you should be familiar with the blogs on the Core ConceptsConfiguration and Customization.

Ace Operator supports visitors using tablet devices or mobile (smart) phones, and it supports operators using tablet devices. Mobile phone support for operators is not recommended due to insufficient window size on the device. Some of the configuration, as you will see, is shared by the different mobile devices while other configuration items are unique to the device.

The 2 areas of configuration to be modified to add mobile support include:

  • the user profiles under the .ace/profiles directory
  • the HTML pages under the tomcat webapps/ace-custom/groups/<existing group> directory.

In the steps below, replace “default” with the name of the existing group and associated profiles to which you are adding mobile capability.

Enabling mobile for operators is covered first, followed by the same for visitors.

To Configure Operators for Using Tablet Devices

In the .ace/profiles directory

1) copy default-operator.properties to default-operator-tablet.properties
2) in the tablet properties, add this line: smallSpace=true
3) also add this line: fastPollTimer=30000

In webapps/ace-custom/groups/default, create a tablet version of operator.html by copying operator.html to operator_mobile.html, and to that:

1) add the following lines within the <header> element:

<!– Setup for mobile –>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

2) remove the onclick window.open call and set the href to:

chat_mobile.html?profile=default-operator-tablet

(note the profile change – be sure to append “-tablet”)

3) create a tablet/mobile version of chat.html by copying chat.html to chat_mobile.html, and to that:

a) add the following lines into the header section of chat_mobile.html:

<meta name=”ao.browser” content=”auto”>
<link rel=”apple-touch-icon” href=”icon.png”/>

<!– Setup for mobile –>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

b) replace the contents of the <body> element of chat_mobile.html with this:
<div id=”aceoperator”></div>

c) copy icon.png from the ace-custom/groups/default directory to the ace-custom/groups/<group being modified> directory.

To Configure Visitors for Using Tablet or Mobile Devices

In the .ace/profiles directory

1) copy default-visitor.properties to default-visitor-mobile.properties and modify the mobile properties as follows.

theme=chrome-large
smallSpace=true
fastPollTimer=30000

Comment out these properties: operatorAvailableOnClickUrl and operatorBusyOnClickUrl

Add these properties:
operatorAvailableHrefUrl and operatorBusyHrefUrl
They will have the URL values from operatorAvailableOnClickUrl, operatorBusyOnClickUrl without the window.open/javascript and appending “_mobile” to the chat.html or custom_form.html reference in the URL.
(Ie, in the URL, change chat.html, if present, to chat_mobile.html and change custom_form.html, if present, to custom_form_mobile.html)

That is, before if you had this:
operatorAvailableOnClickUrl=window.open(‘/ace-custom/groups/default/custom_form.html?profile=${profile}’,”, ‘scrollbars=0,menubar=0,height=650,width=600,resizable=1,toolbar=0,location=0,status=0′); return false;
Now you wll have this:
operatorAvailableHrefUrl=/ace-custom/groups/default/custom_form_mobile.html?profile=${profile}

2) copy default-visitor-mobile.properties to default-visitor-tablet.properties and modify the tablet properties as follows.

theme=chrome

In webapps/ace-custom/groups/default

1) create chat_mobile.html as described above for operator, if not already done

2) if you are using the customized example visitor page visitor.html, copy it to visitor_mobile.html and make the following changes to the copied file (see the default ace-custom/groups/default/visitor_mobile.html as a guide, if in doubt).

a) make it handheld friendly by adding the following in the header element:

<!– Setup for mobile –>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

b) update it to pass browsertype to icon servlet:

- add above refreshChatButton() javascript the following:
<script src=”/ace-contactcenter/ao-browser-detect.js”></script>

- update the javascript refreshChatButton() function for browser detection (preserving profile of the customer) as follows:
function refreshChatButton() {
var browserType = detectBrowser();
dt = new Date();
spice = dt.getTime();
img = document.getElementById(“aceChatButton”);
img.src = “/ace-contactcenter/icon?profile=default-visitor&browser=” + browserType + “&spice=”
+ spice;
}

- in the body, for iframe source, use: src=”icon.png”

- under the body table element, add this:
<script>refreshChatButton()</script>

c) under the iframe, add this:
<b>Note that your mobile service provider may charge you a fee for the use of this service</b>

d) within the <header> element, add this:
<style>
body {
font-family: Arial Unicode MS, Arial, sans-serif;
font-size: 17px;
}
</style>

3) edit busy.html, if used by the customer configuration, to be handheld friendly by adding the following in the header element:

<!– Setup for mobile –>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

4) for custom_form.html, if used by the customer configuration: copy custom_form.html to custom_form_mobile.html, and to that:

a) make it handheld friendly by adding the following in the header element:

<!– Setup for mobile –>
<meta name=”HandheldFriendly” content=”true” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”viewport” content=”width=device-width; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />

b) continue with one of the two alternatives below for the custom_form_mobile.html file.

Alternative 1: For both mobile and tablet to get the same custom form (no header/footer)

i) remove the <div> header and footer elements (and the <p> below the header)

ii) add this javascript into the header area:

function getQueryString() {
var result = {}, queryString = location.search.substring(1),
re = /([^&=]+)=([^&]*)/g, m;

while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

return result;
}
function setProfileFromUrl() {
document.getElementById(‘profile’).value = getQueryString()["profile"];
}

iii) replace the form action and onsubmit, and the profile field definition as follows:

<form name=”visitorForm” action=”/ace-custom/groups/default/chat_mobile.html” method=”get”
onsubmit=”setProfileFromUrl(); return validateForm()”>

<input type=”hidden” id=”profile” name=”profile”>

Alternative 2: For tablet to get header/footer on the custom form

i) update “visitorForm” action to go to chat_mobile.html instead of chat.html

ii) copy custom_form_mobile.html to custom_form_tablet.html

iii) in custom_form_mobile.html, remove the <div> header and footer elements (and the <p> below the header)

iv) in custom_form_mobile.html, append “-mobile” to the hidden profile field value

v) in custom_form_tablet.html, append “-tablet” to the hidden profile field value

c) Update your visitor mobile profiles. Above, if you used:

    • Alternative 1: both mobile and tablet get the same custom form :  make the same update to default-visitor-mobile.properties and default-visitor-tablet.properties: update the “operatorAvailableHrefUrl” property and replace “chat_mobile.html” with “custom_form_mobile.html”.
    •  Alternative 2: tablet and mobile custom forms differ : update  default-visitor-mobile.properties and replace “chat_mobile.html” with “custom_form_mobile.html”; update default-visitor-tablet.properties and replace “chat_mobile.html” with “custom_form_tablet.html”.

That’s it – the setup is complete.

Testing it out

You should now be able to test it out, as described here.

VN:R_U [1.9.20_1166]
Rating: 0.0/5 (0 votes cast)

About amit

Amit Chatterjee is a software professional with over 20 years of experience as a software developer and architect. He has been involved in large and complex software products for Telecommunications, B2B E-Commerce and Healthcare industries. He has founded and contributed to open-source projects since the 1990s. Currently, he leads two open-source projects, QUIK-J and CafeSip. His primary interests are in the areas of Service Oriented Architecture, Enterprise Applications, Business Intelligence and Big Data.
This entry was posted in Install, Setup, Administer and tagged , , . Bookmark the permalink.

Leave a Reply