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

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

Maybe this trick helps to fix the requirejs error:

Thanks, Peter, but this didn't help :frowning:

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>

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!

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) {

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.

Plone Foundation Code of Conduct