UCCX Social miner 12.5 bubble chat html code

[john boxold]

Good morning,

I have a question in regards to the html code handed off to the web developers. When testing the code from the UCCX, a statement was inserted to enable the link to start a chat in testing. When the code was sent over, it came back as that links to a hard drive location we cant use it. If I remove that statement what portion starts the chat.
<button onclick="ciscoBubbleChat.showChatWindow()">Start Chat</button>

[Anthony Holloway]

Are you able to post more of the code you were given by UCCX?  I don't have a system at the moment to test this on, but I'm generally ok-ish at reading html and javascript.

[Jason Scott]

Hey Anthony,

I am working on the same project. Please see attached for the Default Code from UCCX.

Thanks

<!--
    Add this style tag to the target webpage.
    Modify only height and width attributes to resize the chat widget.
    Modify position attributes (bottom, right) to change the widget positioning on the screen.
    -->
<style>
    /*
        Styles will apply when device(view port) width is >768px
    */
    @media (min-device-width : 768px) {
        .desktop_bubble_chat {
            height: 410px;
            max-height: 410px;
            width: 312px;
            position: fixed;
            bottom: 1em;
            right: 1em;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 999;
            overflow: hidden;
            padding: 0;
        }
    }

    /*
        Styles will apply when device(view port) width is <=768px
    */
    @media (max-device-width: 768px) {
        .desktop_bubble_chat {
            height: 100%;
            max-height: 100%;
            width: 100%;
            position: fixed;
            bottom: 0;
            right: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 999;
            overflow: hidden;
            padding: 0;
        }
    }

    /*
        Styles will apply when available width on window resize is >768px
    */
    @media (min-width : 768px) {
        .desktop_bubble_chat {
            height: 410px;
            max-height: 410px;
            width: 312px;
            position: fixed;
            bottom: 1em;
            right: 1em;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 999;
            overflow: hidden;
            padding: 0;
        }
    }

    /*
        Styles will apply when available width on window resize is <=768px
    */
    @media (max-width: 768px) {
        .desktop_bubble_chat {
            height: 100%;
            max-height: 100%;
            width: 100%;
            position: fixed;
            bottom: 0;
            right: 0;
            border: none;
            outline: none;
            box-sizing: border-box;
            z-index: 999;
            overflow: hidden;
            padding: 0;
        }
    }

    /*
        Styles will apply when isMobile function returns true
    */
    .mobile_bubble_chat {
        height: 100%;
        max-height: 100%;
        width: 100%;
        position: fixed;
        bottom: 0;
        right: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
        z-index: 999;
        overflow: hidden;
        padding: 0;
    }

    /*
        Style will apply when chat is minimized
    */
    .minimized_chat {
        height: 56px;
    }
</style>

<!-- Add this script tag without any modification to the target webpage

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

    Optionally, invisible form data can be submitted, which will be submitted along with the fields customer fills in.
    Upto 10 fields can be passed. If more than 10 fields are passed, the invisible form data will not be used and
    the provided error callback will be invoked. For injecting form data, an object should be passed to
    ciscoBubbleChat.showChatWindow() as an argument. The object should be of the form:
    {
        formData: {
            InjectedField1: 'InjectedValue1',
            InjectedField2: 'InjectedValue2'
            ...
        },
        validationErrorCallback: function(){console.log('business specific logic goes here');}
    }
    The form data can have any string as field name and value. The submitted invisible form data values will be
    shown in the agent desktop, as well as will be updated in ContextService if the specified fieldset(s) in the widget
    contains these field names just like the regular visible chat form fields data.
    eg:
    <button onclick="ciscoBubbleChat.showChatWindow({
            formData: {
                AnyFieldName1: 'AnyFieldValue1',
                AnyFieldName2: 'AnyFieldValue2',
                AnyFieldName3: 'AnyFieldValue3',
                AnyFieldName4: 'AnyFieldValue4',
                AnyFieldName5: 'AnyFieldValue5',
                AnyFieldName6: 'AnyFieldValue6',
                AnyFieldName7: 'AnyFieldValue7',
                AnyFieldName8: 'AnyFieldValue8',
                AnyFieldName9: 'AnyFieldValue9',
                AnyFieldName10: 'AnyFieldValue10'
            },
            validationErrorCallback: function(){console.log('error in validating injected data');}
        })">Click to chat</button>
-->
<script type="application/javascript">
    // To detect if the chat is being launched on mobile device
    function isMobile() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        return /(android|bb\d+|meego).+mobile|bada\/|blackberry|iemobile|ip(hone|od)|lge |mobile.+firefox|opera m(ob|in)i|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent);
    }

    var ciscoBubbleChat = (function () {
        var smHost = 'CCP Server Hostname';
        var widgetId = '3';
        // Modify this flag to false, To disable the chat download transcript option
        var enableTranscriptDownload = true;
        
        var msgWaitingForSecureConnectivity = 'Waiting for secure connectivity...';
        var msgCloseButtonLabel = 'Close';

        var appId = 'cisco_bubble_chat';
        var appClass = isMobile() ? 'mobile_bubble_chat' : 'desktop_bubble_chat';
        var appMargin = 15;
        var scheme = 'https://';
        var appUrl = scheme + smHost + '/ccp/ui/BubbleChat.html?host=' + smHost + '&wid=' + widgetId;
        var connectivityCheckUrlSecure = scheme + smHost + '/ccp/ui/ConnectivityCheck.html';
        var secureConnectivityCheckTimeout = 2000;
        var logPrefix = 'CISCO_BUBBLE_CHAT: ';
        var addNoCacheQueryParam;
        document.addEventListener("DOMContentLoaded", function () {
            ciscoBubbleChat.checkChatInProgress();
        });
        return {
            checkChatInProgress: function () {
                if (typeof (Storage) !== 'undefined') {
                    if (sessionStorage.chatInProgress && JSON.parse(sessionStorage.chatInProgress)) {
                        console.log(logPrefix + 'Chat conversation in progress detected. Trying to resume.');
                        ciscoBubbleChat.showChatWindow();
                    } else {
                        console.log(logPrefix + 'There is no chat conversation in progress currently');
                    }
                }
            },
            showChatWindow: function (injectedData) {
                var messageEventListener;
                if (document.getElementById(appId)) {
                    console.log(logPrefix + 'Not loading BubbleChat as it is already loaded');
                    return;
                }

                var validateInjectedData = function (formData) {                    
                    // browser compatible way to check whether it is an object with 10 fields and all the values are strings
                    var result = true;
                    if (formData && typeof formData === 'object' && formData.constructor === Object) {
                        var counter = 0;
                        for (var key in formData) {
                            if (!(typeof formData[key] === 'string' || formData[key] instanceof String)) {
                                result = false;
                                break;
                            }
                            counter++;
                            if (counter > 10) {
                                result = false;
                                break;
                            }
                        }
                    } else {
                        result = false;
                    }
                    return result;
                };
                
                if (injectedData) {
                    if (validateInjectedData(injectedData.formData)) {
                        appUrl += '&injectedFormData=' + encodeURIComponent(JSON.stringify(injectedData.formData));
                    } else {
                        if (typeof injectedData.validationErrorCallback === 'function') {
                            injectedData.validationErrorCallback();
                        } else {
                            console.log(logPrefix + 'Could not invoke validationErrorCallback as it is not a function');
                        }
                    }
                }
                appUrl += '&enableTranscriptDownload=' + enableTranscriptDownload;

                var iframe = document.createElement('iframe');
                iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
                iframe.setAttribute('id', appId);
                iframe.setAttribute('class', appClass);
                document.body.appendChild(iframe);
                var frameWindow = iframe.contentWindow ? iframe.contentWindow : iframe;
                var frameDoc = frameWindow.document;

                // Trigger a page load for iframe inline content loading to work in Firefox
                frameDoc.open();
                frameDoc.close();
                
                if(isMobile()) {
                    frameDoc.body.style = 'margin:0;padding:0;';
                } else {
                    frameDoc.body.style = 'margin:0;padding:4;box-sizing:border-box;';
                }
                
                frameDoc.body.innerHTML = '<div id="secure_connectivity_check_container" style="width: 100%; height: 100%;' +
                        'font-family: Helvetica; font-size: 14px; color: #4F5051;text-align:center;' +
                        'box-shadow: 0 0 3px #000; background: #fff; display: flex; flex-direction: column;justify-content:space-around;">' +
                        '<div style="height:100%;display:flex;flex-direction:column">' +
                            '<div style="height:50%;display:flex;align-items:center;">' +
                                '<div style="width:100%;text-align:center;">' + msgWaitingForSecureConnectivity + '</div>' +
                            '</div>' +
                        '<div style="height:50%;display:flex;align-items:center;">' +
                            '<a href="#" onclick="window.parent.postMessage({messageType: \'unmount\'}, \'*\'); return void(0);" style="width:100%;text-align:center;">' +
                                msgCloseButtonLabel +
                            '</a>' +
                        '</div>' +
                    '</div>';
                '</div>';

                if (!addNoCacheQueryParam) {
                    addNoCacheQueryParam = function (url) {
                        return url + (url.indexOf("?") === -1 ? '?' : '&') + 'nocache=' + new Date().getTime();
                    }
                }

                if (!messageEventListener) {
                    messageEventListener = function (event) {
                        console.log(logPrefix + 'Received event from origin: ' + event.origin);
                        console.log(logPrefix + 'Received event data: ' + JSON.stringify(event.data));
                        switch (event.data.messageType) {
                            case 'resize':
                                var styleData = event.data.styles;
                                if(typeof styleData === 'object' && Object.keys(styleData).length > 0) {
                                    var widgetStyles = '';
                                    for(var style in styleData) {
                                        widgetStyles = widgetStyles + style + ':' + styleData[style] + ';';
                                    }
                                    document.getElementById(appId).style = widgetStyles;
                                }
                                break;
                            case 'unmount':
                                document.body.removeChild(document.getElementById(appId));
                                window.removeEventListener('message', messageEventListener);
                                console.log(logPrefix + 'Successfully unmounted BubbleChat and removed event listener for message');
                                break;
                            case 'bubblechat-cert-accepted':
                                iframe.contentWindow.location.replace(addNoCacheQueryParam(appUrl));
                                console.log(logPrefix + 'Successfully validated certificate acceptance and loaded BubbleChat');
                                break;
                            case 'set-chat-in-progress':
                                if (typeof (Storage) !== 'undefined') {
                                    sessionStorage.chatInProgress = JSON.stringify(true);
                                    console.log(logPrefix + 'chatInProgress flag set in parent window');
                                }
                                break;
                            case 'clear-chat-in-progress':
                                if (typeof (Storage) !== 'undefined') {
                                    sessionStorage.removeItem("chatInProgress");
                                    console.log(logPrefix + 'chatInProgress flag cleared in parent window');
                                }
                                break;
                            case 'minimize':
                                document.getElementById(appId).classList.add('minimized_chat');
                                break;
                            case 'restore':
                                document.getElementById(appId).classList.remove('minimized_chat');
                                break;
                            default:
                                console.log(logPrefix + 'Unknown message type');
                        }
                    };
                }

                window.addEventListener('message', messageEventListener);
                console.log(logPrefix + 'Event listener for message added');

                var obtainSecureConnectivity = function () {
                    window.open(addNoCacheQueryParam(connectivityCheckUrlSecure), 'SM_CERT_PAGE');
                };
                
                var xhrSecureConnectivityCheck = new XMLHttpRequest();
                xhrSecureConnectivityCheck.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        console.log(logPrefix + 'Secure connectivity check status: ' + this.status);
                        switch (this.status) {
                            case 200:
                                iframe.contentWindow.location.replace(addNoCacheQueryParam(appUrl));
                                break;
                            default:
                                obtainSecureConnectivity();
                        }
                    }
                }
                console.log(logPrefix + 'Checking secure connectivity to: ' + connectivityCheckUrlSecure);
                xhrSecureConnectivityCheck.open('HEAD', addNoCacheQueryParam(connectivityCheckUrlSecure), true);
                xhrSecureConnectivityCheck.timeout = secureConnectivityCheckTimeout;
                xhrSecureConnectivityCheck.ontimeout = function () { console.log(logPrefix + 'Secure Connectivity check timed out'); }
                xhrSecureConnectivityCheck.send();
            }
        };
    })();
</script>