11-19-2018 05:32 AM - edited 03-14-2019 06:38 PM
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?
11-19-2018 09:17 AM
11-19-2018 09:25 AM
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> -->
11-19-2018 10:46 AM - edited 11-19-2018 11:48 AM
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.
11-19-2018 11:21 AM
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> |
11-21-2018 12:13 AM
You might be able to achieve your goal by applying some responsive CSS to the body of the page.
04-14-2020 04:28 PM
I know this is an old post but mobile chat is included with CCX 12.5 released in January/February.
04-14-2020 06:24 PM
Discover and save your favorite ideas. Come back to expert answers, step-by-step guides, recent topics, and more.
New here? Get started with these tips. How to use Community New member guide