0

We're currently integrating GetFeedback with our embedded service chat. There's one quirk we're trying to account for in the post-chat behavior, however. Since we have the setting enabled to allow users to save their transcripts, the 'Close Chat' button is getting booted out of the endChatContainer in favor of only showing the 'Give Feedback' and 'Save Transcript' buttons. In the interest of not making it seem like we're implying users have to give feedback we reached out to SF support to see if we could easily bring the button back. Nope. It's a feature, not a bug according to them, and advised we add some scripting to inject the button back in to invoke the embedded_svc.liveAgentAPI.endChat() call to restore it that way. I played around with an editor, and created what I would have thought would work (at least it did in fiddle aside from the close call), but in trying to attach it to the event handlers for user ended chat and agent ended chat is not working (or the generic onChatConferenceEnded event), so if someone has implemented something like this before or can point out what's wrong in the snippet, that'd be great. Thanks.

<apex:page >
  <style type='text/css'>
    .embeddedServiceHelpButton .helpButton .uiButton {
        background-color: #222222;
        font-family: "Salesforce Sans", sans-serif;
    }
    .embeddedServiceHelpButton .helpButton .uiButton:focus {
        outline: 1px solid #222222;
    }
    @font-face {
        font-family: 'Salesforce Sans';
        src: url('https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Regular.woff') format('woff'),
        url('https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Regular.ttf') format('truetype');
    }
</style>

<script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>
<script type='text/javascript'>
    var initESW = function(gslbBaseURL) {
        embedded_svc.settings.displayHelpButton = true; //Or false
        embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'

        //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
        //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)

        //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
        //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)

        embedded_svc.addEventHandler("onChatEndedByChasitor", function(data){
            console.log("onChatConferenceEnded Chasitor event was fired.  liveAgentSessionKey was " + data.liveAgentSessionKey);
            var searchBtn = document.getElementById("closeBtn");
            console.log(searchBtn);
            if(searchBtn === undefined || searchBtn === null){
                var btn = document.createElement("BUTTON");
                btn.setAttribute('id', 'closeBtn');
                btn.innerHTML = "Close Chat";
                btn.onclick = function(){
                    embedded_svc.liveAgentAPI.endChat();
                    };
                var myDiv = document.getElementsByClassName("endChatContainer");
                myDiv[0].insertBefore(btn, myDiv[0].firstChild);
                }
        });
        
        embedded_svc.addEventHandler("onChatEndedByAgent", function(data){
            console.log("onChatConferenceEnded Agent event was fired.  liveAgentSessionKey was " + data.liveAgentSessionKey);
            var searchBtn = document.getElementById("closeBtn");
            console.log(searchBtn);
            if(searchBtn === undefined || searchBtn === null){
                var btn = document.createElement("BUTTON");
                btn.setAttribute('id', 'closeBtn');
                btn.innerHTML = "Close Chat";
                btn.onclick = function(){
                    embedded_svc.liveAgentAPI.endChat();
                    };
                var myDiv = document.getElementsByClassName("endChatContainer");
                myDiv[0].insertBefore(btn, myDiv[0].firstChild);
                }
        });

        embedded_svc.settings.extraPrechatFormDetails = [
            {"label": "Email", "transcriptFields": ["Visitor_Email__c"]},
            {"label": "Department", "transcriptFields": ["Visitor_Category__c"]},
            {"label": "Company", "transcriptFields": ["Visitor_Company__c"]},
            {"label": "First Name", "transcriptFields": ["Visitor_First_Name__c"]},
            {"label": "Last Name", "transcriptFields": ["Visitor_Last_Name__c"]}
        ];

        // Settings for Chat
        embedded_svc.settings.extraPrechatInfo = [
            {
                "entityName": "Contact",
                "entityFieldMaps": [
                    {
                        "doCreate":false,
                        "doFind":true,
                        "fieldName":"LastName",
                        "isExactMatch":true,
                        "label":"Last Name"
                    },
                    {
                        "doCreate":false,
                        "doFind":true,
                        "fieldName":"FirstName",
                        "isExactMatch":true,
                        "label":"First Name"
                    },
                    {
                        "doCreate":false,
                        "doFind":true,
                        "fieldName":"Email",
                        "isExactMatch":true,
                        "label":"Email"
                    }
                ],
            }
        ];
        
        // Settings for Chat
        //Routing Settings
        embedded_svc.settings.directToButtonRouting = function (prechatFormData) {
            // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
            // Returns a valid button ID.
            if (prechatFormData[4].value == "AS") {
                console.log('AS');
                return "5731N000000Cmzo";
            }
            else if (prechatFormData[4].value == "CP") {
                console.log('CP');
                return "5731N000000Cmzt";
            }
            else if (prechatFormData[4].value == "FS") {
                console.log('FS');
                return "5731N000000Cmzy";
            }
            else if (prechatFormData[4].value == "HSBTB") {
                console.log('HSBTB');
                return "5731N000000Cn03";
            }
            else if (prechatFormData[4].value == "HSC") {
                console.log('HSC');
                return "5731N000000Cn08";
            }
            else if (prechatFormData[4].value == "MR") {
                console.log('MR');
                return "5731N000000Cn0D";
            }
            else if (prechatFormData[4].value == "Misc") {
                console.log('Misc');
                return "5731N000000Cn0h";
            }
            else if (prechatFormData[4].value == "Opt") {
                console.log('Opt');
                return "5731N000000Cn0E";
            }
            else if (prechatFormData[4].value == "OI") {
                console.log('OI');
                return "5731N000000Cn0F";
            }
            else if (prechatFormData[4].value == "PS") {
                console.log('PS');
                return "5731N000000Cn0I";
            }
            else if (prechatFormData[4].value == "PD") {
                console.log('PD');
                return "5731N000000Cn0N";
            }
            else if (prechatFormData[4].value == "RF") {
                console.log('RF');
                return "5731N000000Cn0S";
            }
            else if (prechatFormData[4].value == "WS") {
                console.log('WS');
                return "5731N000000Cn0c";
            }
            else{
                console.log('FAIL');
            }
        };
        //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
        embedded_svc.settings.fallbackRouting = ['5731N000000Cn0X']; //An array of button IDs, user IDs, or userId_buttonId
        //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
        embedded_svc.settings.autoOpenPostChat = false; // or true
        embedded_svc.settings.enabledFeatures = ['LiveAgent'];
        embedded_svc.settings.entryFeature = 'LiveAgent';
        
        

        embedded_svc.init(
            'https://sandbox--surveytest.my.salesforce.com',
            'https://surveytest-sandboxsupport.cs27.force.com/CustomerSupport',
            gslbBaseURL,
            '00D22000000DOzs',
            'Chat_with_Support_Team',
            {
                baseLiveAgentContentURL: 'https://c.la1-c1cs-ph2.salesforceliveagent.com/content',
                deploymentId: '5721N000000CmL3',
                buttonId: '5733l000000g7iG',
                baseLiveAgentURL: 'https://d.la1-c1cs-ph2.salesforceliveagent.com/chat',
                eswLiveAgentDevName: 'Chat_with_Support_Team',
                isOfflineSupportEnabled: false
            }
        );
    };

    if (!window.embedded_svc) {
        var s = document.createElement('script');
        s.setAttribute('src', 'https://sandbox--surveytest.my.salesforce.com/embeddedservice/5.0/esw.min.js');
        s.onload = function() {
            initESW(null);
        };
        document.body.appendChild(s);
    } else {
        initESW('https://service.force.com');
    }
</script>
</apex:page>

1 Answer 1

1

For anyone who comes across this needing a solution we did actually come up with one that meets our needs:

embedded_svc.addEventHandler("onChatEndedByChasitor", function (data){
            setTimeout(function () {
                console.log("onChatEndedChasitor event was fired.  liveAgentSessionKey was " + data.liveAgentSessionKey);
                var searchBtn = document.getElementById("closeBtn");
                if(!searchBtn){
                    var btn = document.createElement("BUTTON");
                    btn.id = "closeBtn";
                    btn.innerHTML = "Close Chat";
                    btn.className = "endChatButton postChatButton uiButton--default uiButton embeddedServiceSidebarButton";
                    btn.addEventListener("click", function (e){
                        e.preventDefault();
                        console.log('Clear Session Clicked');
                        embedded_svc.liveAgentAPI.clearSession();
                        var chatHeader = document.getElementsByTagName('embeddedservice-chat-header');
                        if(chatHeader && chatHeader.length > 0){
                            var close = chatHeader[0].getElementsByClassName("closeButton");
                            if(close && close.length > 0){
                                close[0].click();
                                }
                            }
                        });
                var myDiv = document.getElementsByClassName('endChatContainer');
                myDiv[0].appendChild(btn);
                }
                }, 1000);
            });
        
        embedded_svc.addEventHandler("onChatEndedByAgent", function(data){
            setTimeout(function () {
                console.log("onChatEndedAgent event was fired.  liveAgentSessionKey was " + data.liveAgentSessionKey);
                var searchBtn = document.getElementById("closeBtn");
                if(!searchBtn){
                    var btn = document.createElement("BUTTON");
                    btn.id = "closeBtn";
                    btn.innerHTML = "Close Chat";
                    btn.className = "endChatButton postChatButton uiButton--default uiButton embeddedServiceSidebarButton";
                    btn.addEventListener("click", function (e){
                        e.preventDefault();
                        console.log('Clear Session Clicked');
                        embedded_svc.liveAgentAPI.clearSession();
                        var chatHeader = document.getElementsByTagName('embeddedservice-chat-header');
                        if(chatHeader && chatHeader.length > 0){
                            var close = chatHeader[0].getElementsByClassName("closeButton");
                            if(close && close.length > 0){
                                close[0].click();
                                }
                            }
                        });
                var myDiv = document.getElementsByClassName('endChatContainer');
                myDiv[0].appendChild(btn);
                }
                }, 1000);
            });

First, regardless of how the documentation says the event listeners only need to be placed before the embedded_svc.init() method, I found it wasn't even firing unless placed before the embedded_svc.settings.extraPrechatFormDetails section. Next, we had to add a timeout/offset because while the event was firing it was happening too close to the actual rendering of the section we needed to manipulate, so there had to be a pause or else the function would throw an error trying to find the right element. Third, embedded_svc.liveAgentAPI.endChat() and embedded_svc.liveAgentAPI.clearSession() aren't worth anything in this situation, they're only meant to be called when the chat is still engaged, so we had to go through the convoluted process of grabbing the Close button in the header and clicking it via JS. Fourth, you better believe that last part was hidden in the shadow-DOM, so while it looks convoluted to go grab the button it was the only working path to get it to do what we wanted. There are probably other ways, but it caused enough of a headache to get to this point, and it works, so we're leaving it be.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .