[solved] Salesforce Chat failing in Plone 5.1 - Stuck on JS errors

cdw9 · February 19, 2021, 10:05pm

One of our clients has a Salesforce chat on their site. It was working up until this past weekend, when Salesforce made some changes to their code.

I'm wondering if anyone else uses this and has run into the same problem

Here is the code (with client info omitted):

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"></meta>  
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.10/purify.js"></script>
<script type="text/javascript" src="https://service.force.com/embeddedservice/5.0/esw.min.js"></script>
<style type="text/css"> .postChatButton { display:none; } .sidebarBody, .embeddedServiceSidebarFormField .slds-style-inputtext, .embeddedServiceSidebarFormField .slds-style-select, .sidebarHeader { font-family: "Arial" !important; } .message { border: none; background: none; color: white; font-size: 12px; font-family: arial; padding: 0px; } .embeddedServiceHelpButton .helpButton .uiButton { background-color: #005290; sans-serif; text-overflow: "unset"; max-width: 20em; } .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #005290; } </style> 
<script type='text/javascript'> var initESW = function(gslbBaseURL) { embedded_svc.settings.displayHelpButton = true; embedded_svc.settings.language = ''; embedded_svc.settings.enabledFeatures = ['LiveAgent']; embedded_svc.settings.entryFeature = 'LiveAgent'; embedded_svc.settings.defaultMinimizedText ='Chat with us'; embedded_svc.settings.disabledMinimizedText = 'Representatives Offline'; embedded_svc.init('https://client.my.salesforce.com', 'https://client-apprentice.secure.force.com/onlinechat', gslbBaseURL, '00D36000000rbye', 'Contact_Center_Snap_In', { baseLiveAgentContentURL: 'https://c.la4-c1-was.salesforceliveagent.com/content', deploymentId: '12345', buttonId: '12345', baseLiveAgentURL: 'https://d.la4-c1-was.salesforceliveagent.com/chat', eswLiveAgentDevName: 'EmbeddedServiceLiveAgent_Parent04I360000004CAzEAM_16480cd8330', isOfflineSupportEnabled: true }); }; if (!window.embedded_svc) { var s = document.createElement('script'); s.setAttribute('src', 'https://client.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>

This is producing a Error: Mismatched anonymous define() module error in the console from default.js. I built a custom page that excludes default.js, and the chat works fine. Would love some advice on how to make this work

petschki · February 19, 2021, 11:16pm

Maybe this trick helps to fix the requirejs error:

github.com

zopyx/zopyx.plone.persistentlogger/blob/master/zopyx/plone/persistentlogger/browser/logger.pt#L10-L30


<metal:slot fill-slot="javascript_head_slot">
    <script>
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    </script>
    <script type="text/javascript" charset="utf8" tal:attributes="src string:$portal_url/++resource++zopyx.plone.persistentlogger/local.js"></script>
    <script type="text/javascript" charset="utf8" tal:attributes="src string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/datatables.js"></script>
    <script>
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
    </script>
</metal:slot>
<metal:slot fill-slot="style_slot">
    <link rel="stylesheet" type="text/css" tal:attributes="href string:$portal_url/++resource++zopyx.plone.persistentlogger/DataTables/datatables.css" />
    <link rel="stylesheet" type="text/css" tal:attributes="href string:$portal_url/++resource++zopyx.plone.persistentlogger/styles.css" />
</metal:slot>

cdw9 · February 22, 2021, 2:55pm

Thanks, Peter, but this didn't help

espenmn · February 23, 2021, 9:49am

I usually put my code like this, no idea if that would help in any way:

<script>
require([
      'jquery',
      'someotherscript_here'
      ], function(Base) {
        'use strict';
        //your script here
        
      });
</script>

cdw9 · February 23, 2021, 4:00pm

So this didn't work either, but I was finally able to track down the problem. It's a combination of the import of the purify.js (second line in the code above), and a conflict in some custom JS for this site.

Thanks for the suggestions!

espenmn · February 23, 2021, 5:11pm

Did it make any difference if you loaded the purify.js in its own script tag or included it in

    <script>
require([
  'jquery',
  'https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.10/purify.js'
  ], function(Base) {

cdw9 · February 23, 2021, 5:16pm

I had tried that last week without success. The purify.js script isn't necessary, it had been added at one point to make the chat work, but it seems it's not needed anymore. So I just need to fix the conflict in the other custom JS.