cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
2101
Views
5
Helpful
7
Replies

UCCX Web Chat

James Hawkins
Level 8
Level 8

Hello,

I have just configured both Classic Chat and Bubble Chat in UCCX 11.6.2

Both work ok for desktop browsers but not so good for mobile devices because of the tiny text size.

What is the best option for making this usable on smartphones and smaller tablets?

I know there is a Facebook Messenger option which I will configure once my customer gets me a public cert for SocialMiner but I am wondering if there are other options?

According to the documentation Classic Chat is going to be deprecated soon so I guess that leaves bubble chat.

Is there any way of detecting the type of browser connecting and then providing a suitable interface?

7 Replies 7

Anthony Holloway
Cisco Employee
Cisco Employee
I haven't played with Bubble chat yet, but if it's like classic chat and if I know Cisco, you have no control over the chat widget in the web page. Let's hope I'm wrong. Can you share with us what the code snippet looks like for which you embed the chat widget into the web page?

Hi Anthony,

Thanks for the response.

The script generated by the bubble chat is included below.

It seems that the bubble chat is created within an iframe - see red highlighted line.

I might try playing about with the iframe settings to see if the text size scales when I modify the size of the iframe.

 

<!-- Add this script tag without any modification to the target webpage -->
<script type="application/javascript">
var ciscoBubbleChat = (function () {
var smHost = 'socialminer.example.com';
var widgetId = '4';

var appId = 'cisco_bubble_chat';
var secure = 'true';
var appMargin = 10;
var messageEventListener = undefined;
return {
showChatWindow: function () {
var logPrefix = 'CISCO_BUBBLE_CHAT: ';
if (document.getElementById(appId)) {
console.log(logPrefix + 'Not loading BubbleChat as it is already loaded');
return;
}
var iframe = document.createElement('iframe');
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
iframe.setAttribute('id', appId);
iframe.setAttribute('style', 'position: fixed;width: 312px; height: 407px; bottom: 0px;right: 0px; border: none; z-index:999;');
var appUrl = 'https://' + smHost + '/ccp/ui/BubbleChat.html?host=' + smHost + '&wid=' + widgetId + '&secure=' + secure;
iframe.setAttribute('src', appUrl);
document.body.appendChild(iframe);
document.getElementById(appId).style.visibility = 'visible';
if(!messageEventListener) {
messageEventListener = function (event) {
console.log(logPrefix + 'Received event from origin: ' + event.origin);
if (event.origin.indexOf(smHost) >= 0) {
console.log(logPrefix + 'Received event data: ' + JSON.stringify(event.data));
if (event.data.messageType === 'resize') {
document.getElementById(appId).height = event.data.height + appMargin;
console.log(logPrefix + 'Successfully resized');
} else if (event.data.messageType === 'unmount') {
document.body.removeChild(document.getElementById(appId));
window.removeEventListener('message', messageEventListener);
console.log(logPrefix + 'Successfully unmounted BubbleChat and removed event listener for message');
}
}
};
}
window.addEventListener('message', messageEventListener);
console.log(logPrefix + 'Event listener for message added');
}
};
})();
</script>

<!-- Use the function 'ciscoBubbleChat.showChatWindow() as the event handler for initiating chat -->
<!-- eg: <button onclick="ciscoBubbleChat.showChatWindow()">Start Chat</button> -->

 

I'm going to guess that you cannot set the font at the iframe object level, and instead, the settings within the BubbleChat.html file hosted on SM will be the winner, when it comes to font size. You *might* be able to use a reference to the Document Object Model (DOM) within the BubbleChat.html file, by using document.getElementById(appId).contentWindow.document, but then you might run into two problems: 1) You need to know the structure of that file and its styles, 2) You need to worry about order of processing; E.g., does your code execute first, and then the embedded page is loaded second, overwriting your changes.

I think the best bet, is to file a defect with Cisco, so they can fix this for everyone.

The BubbleChat.html file seems pretty simple - the Javascript file it links to is not!

I cannot see any easy way of modifying this so I will go with your suggestion and file a defect.

It is frustrating as the client likes the feature but thinks a lot of the contacts will be from mobile devices.

I will see what I can do with Facebook Messenger once I get a proper cert for the SocialMiner.

 

Thanks for your responses.

 

<html>
  <head>
  <title>Bubble Chat</title>
  </head>
  <body>
  <div id="bubble-chat-app"/>
  <script type='application/javascript' src='js/ccp/bubblechat/ccp-chat-components.js'></script>
  <script type='application/javascript'>
  function extractQueryParamValue( queryParam){
  return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(queryParam).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
  };
  var hostAddr = extractQueryParamValue('host');
  var widgetId = extractQueryParamValue('wid');
  var secure = extractQueryParamValue('secure');
  BubbleChatApp.startChat({'smHost':hostAddr,'widgetId':widgetId,'secure':secure});
  </script>
  </body>
  </html>

You might be able to achieve your goal by applying some responsive CSS to the body of the page.

mmusc1220
Level 1
Level 1

I know this is an old post but mobile chat is included with CCX 12.5 released in January/February.

Good to know. Thanks for the info!