0

I am trying to set up a channel menu to group our communication channels together for customers. However, our embedded service chat has quite a few customizations I need to carry over, and I am having difficulty getting them transferred to a snapinsSnippetSettingsFile apparently.

This is the current configuration I have:

    window._snapinsSnippetSettingsFile = (function() {
    // Logs that the snippet settings file was loaded successfully
    console.log("Snippet settings file loaded.");
    
                // Chat menu-item specific settings
                embedded_svc.menu.snippetSettingsFile = {
                    Chat: {
                        settings: {
                            
                            prepopulatedPrechatFields : {"First Name": "Test"};
                            
                            embedded_svc.addEventHandler('onChatRequestSuccess', function(data){
                        // track chat events in Google Analytics
                            GAEventTracking.FireGAEvent("chat", "tab-click", "{{IsViridian}}" === "true" ? "chat-v8" : "chat", false);
                            });
                        embedded_svc.addEventHandler('onSettingsCallCompleted', function(data){
                        // initiate chat sessions from links within the site in addition to the embedded chat button
                        if(data.isAgentAvailable){
                            // show online message and attach click event to start the chat
                            var chatOnlineElmnts = document.querySelectorAll('[data-chat-status=online]');
                            Array.prototype.forEach.call(chatOnlineElmnts, function (elmnt){
                                elmnt.style.display = 'inline';
                                elmnt.addEventListener('click', function (){
                                    var chatButton = document.getElementsByClassName('uiButton helpButtonEnabled');
                                    if(chatButton && chatButton.length > 0 && typeof chatButton[0].onclick == 'function'){
                                        chatButton[0].onclick.apply(chatButton[0]);
                                        }
                                    return false;
                                    }, false);
                                });
                            }
                        else{
                            // show offline message
                            var chatOfflineElmnts = document.querySelectorAll('[data-chat-status=offline]');
                            Array.prototype.forEach.call(chatOfflineElmnts, function (elmnt) {
                            elmnt.style.display = 'inline';
                            });
                            }
                            });
      
                        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);
                            }
                            }, 2500);
                            });
                        
                        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);
                                    }
                                }, 2500);
                            });
                            
                            embedded_svc.snippetSettingsFile.displayHelpButton = true; //Or false
                            //embedded_svc.snippetSettingsFile.language = ''; //For example, enter 'en' or 'en-US'
                            embedded_svc.snippetSettingsFile.defaultMinimizedText = 'Live Chat'; //(Defaults to Chat with an Expert)
                            //embedded_svc.snippetSettingsFile.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
                            embedded_svc.snippetSettingsFile.loadingText = 'Loading...'; //(Defaults to Loading)
                            if(window.location.href.indexOf('samtec.com') > -1){
                                embedded_svc.snippetSettingsFile.storageDomain = 'samtec.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
                                }
                            embedded_svc.snippetSettingsFile.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
                            //embedded_svc.snippetSettingsFile.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
                            embedded_svc.snippetSettingsFile.enabledFeatures = ['LiveAgent'];
                            embedded_svc.snippetSettingsFile.entryFeature = 'LiveAgent';
                            if(window.Samtec && window.Samtec.userInfo){
                                //Sets the auto-population of pre-chat form fields
                                embedded_svc.snippetSettingsFile.prepopulatedPrechatFields = {
                                    FirstName: window.Samtec.userInfo.firstName,
                                    LastName: window.Samtec.userInfo.lastName,
                                    Email: window.Samtec.userInfo.email
                                    };
                                }


                            embedded_svc.snippetSettingsFile.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.snippetSettingsFile.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"
                                    }
                                        ],
                                    }
                                ];


                            //Routing Settings
                            embedded_svc.snippetSettingsFile.directToButtonRouting = function(prechatFormData) {
                            // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
                            // Returns a valid button ID.
                            var btnId;
                            if(prechatFormData[4].value == "Application Support"){
                                btnId = "5731N000000Cmzo";
                                }
                            else if (prechatFormData[4].value == "Custom Products"){
                                btnId = "5731N000000Cmzt";
                                }
                            else if(prechatFormData[4].value == "Flexible Stacking"){
                                btnId = "5731N000000Cmzy";
                                }
                            else if(prechatFormData[4].value == "High-Speed Board-to-Board"){
                                btnId = "5731N000000Cn03";
                                }
                            else if(prechatFormData[4].value == "High-Speed Cables"){
                                btnId = "5731N000000Cn08";
                                }
                            else if(prechatFormData[4].value == "Micro/Rugged"){
                                btnId = "5731N000000Cn0D";
                                }
                            else if(prechatFormData[4].value == "Miscellaneous"){
                                btnId = "5731N000000Cn0h";
                                }
                            else if(prechatFormData[4].value == "Optics"){
                                btnId = "5731N000000Cn0E";
                                }
                            else if(prechatFormData[4].value == "Order Inquiries"){
                                btnId = "5731N000000Cn0F";
                                }
                            else if(prechatFormData[4].value == "Part Specifications"){
                                btnId = "5731N000000Cn0I";
                                }
                            else if(prechatFormData[4].value == "Pricing and Delivery"){
                                btnId = "5731N000000Cn0N";
                                }
                            else if(prechatFormData[4].value == "RF"){
                                btnId = "5731N000000Cn0S";
                                }
                            else if(prechatFormData[4].value == "Website Support"){
                                btnId = "5731N000000Cn0c";
                                }
                            else{
                                btnId = "5731N000000Cn0X";
                                }
                            embedded_svc.snippetSettingsFile.fallbackRouting = [btnId,"5731N000000Cn0X"];
                            return btnId;
                            };


                        
                            }
                        }
                    };
})();

While I did not expect it to work perfectly on first pass, it doesn't seem to work at all once I link it to the channel menu settings. It isn't even firing the console statement if I comment everything else out, so I'm trying to figure out where I'm going wrong. I've created the channel menu, added the Chat component and tied it to my deployment, added the snippet as a public static resource, and added it to the code settings for the channel menu. Deployed the channel menu snippet in a test page, and while the Embedded Chat will work, there are none of the customizations present, and like I said the console statement to confirm that the settings file loaded never fires, so any help would be appreciated because apparently I'm stumbling right out of the gate. Thanks.

1 Answer 1

0

Well I fixed it, apparently the documentation I found was out of date and I wasn't formatting the body properly to start. So after reformatting it into this:

window._snapinsSnippetSettingsFile = (function() {
    // Logs that the snippet settings file was loaded successfully
    console.log("Snippet settings file loaded.");
    // Chat menu-item specific settings
    embedded_svc.menu.snippetSettingsFile = {
        LiveChat: {
            settings: {
                
                enabledFeatures : ['LiveAgent'],
                entryFeature : 'LiveAgent',
                fallbackRouting : ["5731N000000Cn0X"],
                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"]}
                                ],
                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"
                                    }
                                        ],
                                    }
                                ],
                directToButtonRouting : function(prechatFormData){
                            // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
                            // Returns a valid button ID.
                            var btnId;
                            if(prechatFormData[4].value == "Application Support"){
                                btnId = "5731N000000Cmzo";
                                }
                            else if (prechatFormData[4].value == "Custom Products"){
                                btnId = "5731N000000Cmzt";
                                }
                            else if(prechatFormData[4].value == "Flexible Stacking"){
                                btnId = "5731N000000Cmzy";
                                }
                            else if(prechatFormData[4].value == "High-Speed Board-to-Board"){
                                btnId = "5731N000000Cn03";
                                }
                            else if(prechatFormData[4].value == "High-Speed Cables"){
                                btnId = "5731N000000Cn08";
                                }
                            else if(prechatFormData[4].value == "Micro/Rugged"){
                                btnId = "5731N000000Cn0D";
                                }
                            else if(prechatFormData[4].value == "Miscellaneous"){
                                btnId = "5731N000000Cn0h";
                                }
                            else if(prechatFormData[4].value == "Optics"){
                                btnId = "5731N000000Cn0E";
                                }
                            else if(prechatFormData[4].value == "Order Inquiries"){
                                btnId = "5731N000000Cn0F";
                                }
                            else if(prechatFormData[4].value == "Part Specifications"){
                                btnId = "5731N000000Cn0I";
                                }
                            else if(prechatFormData[4].value == "Pricing and Delivery"){
                                btnId = "5731N000000Cn0N";
                                }
                            else if(prechatFormData[4].value == "RF"){
                                btnId = "5731N000000Cn0S";
                                }
                            else if(prechatFormData[4].value == "Website Support"){
                                btnId = "5731N000000Cn0c";
                                }
                            else{
                                btnId = "5731N000000Cn0X";
                                }
                            embedded_svc.snippetSettingsFile.fallbackRouting = [btnId,"5731N000000Cn0X"];
                            console.log('Btn Id: ' + btnId);
                            return btnId;
                            }
                
                    
                }
            }
        };
})();

And moving the event listeners to the menu snippet itself with the prefix embedded_svc.menu. it's all working now. So for anyone else with similar issues, who might stumble across this, here you go since the official examples leave a lot to be desired.

You must log in to answer this question.

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