4

I am leaning on my friends at Salesforce Stack for a very important question that I have spent a great deal of time on over the past few weeks. Warning: This is a long one, please grab yourself a glass of insert drinkOfChoice and help us help every future Salesforce customer by identifying and resolving this issue.

What issue? I believe that Lightning Locker Service makes it impossible to implement Salesforce Live Agent into a Lightning Community Component.

I do not have a premiere account with Salesforce support so I have no avenue to contact the correct people at Salesforce for a true resolution to this issue, so I am reaching out to you all to see if we can collaborate together to determine:

  1. If Salesforce Live Agent (in its current state) can be implemented into a Lightning Community with Locker Service enabled?
  2. Who to contact at Salesforce to get this addressed prior to the forceful release of the Lightning Locker Service critical update in early 2017.

I should mention that prior to Lightning Locker Service being enabled, I had an implementation of Salesforce Live Agent running without any major issues since March of 2016. In fact, since this update hasn't reached production yet, I still have a working implementation on our live site right now. Details below...

Pre-Locker Service Implementation (Works W/O Locker Service):

1. I placed the hosted deployment.js file (copied straight from Setup > Live Chat Deployment) in the Header Markup in the Advanced Settings of Community Builder:

Advanced Head Markup

enter image description here


2. I created a very basic Lightning Component with 2 different anchor tags, one for if the chat is offline and the other for when it is online:

<aura:component implements="forceCommunity:availableForAllPageTypes">

<!--Initialize the Live Agent-->
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-4 msiBoxCol">
            <a href="" id="liveagent_button_online" class="thumbnail msiBox1" style=" text-align:center;padding-bottom: 2em;display: none;" onclick="{!c.startChat}">
                <div class="msi-img1" style="padding-top:20px;"></div>
                <h3 class="msiSmall">Live Chat Online</h3>
            </a>

            <a href="" id="liveagent_button_offline" class="thumbnail msiBox1" style=" text-align:center;padding-bottom: 2em;">
                <div class="msi-img1" style="padding-top:20px;"></div>
                <h3 class="msiSmall">Live Chat Offline</h3>
            </a>
        </div>
    </div>
</div>

</aura:component> (I had to do the <aura:component> tags weird because they don't render inside of a code block)


3. I created a Client Side Controller method to handle displaying the correct anchor tag based on online/offline and initializing the live agent (init method), and starting the chat when clicked (startChat method):

({
init : function(component, event, helper) {
    if (!window._laq) { 
        window._laq = []; 
        console.log('MM-LC++++ - !window._laq');
    }
    window._laq.push(function(){
        liveagent.showWhenOnline('CHAT ID 123', document.getElementById('liveagent_button_online'));
        liveagent.showWhenOffline('CHAT ID 123', document.getElementById('liveagent_button_offline'));
        console.log('MM-LC++++ - window._laq.push');
    });
    liveagent.init('https://d.la1w1.salesforceliveagent.com/chat', 'CHAT BUTTON ID', 'ORG ID');
},


    startChat : function(component, event, helper) {
        liveagent.startChat('CHAT ID 123');
    },
})  

The above implementation works without Locker Service, and uses a slightly modified version of the exact implementation instructions for Salesforce Live Agent buttons, It operates the same way you would set it up for any website embed, with the exception of using the Lightning Component Controller for the init actions... The hosted deployment.js is provided by and hosted by Salesforce and provides us with the liveagent. methods, and all of the references to those methods (liveagent.init, liveagent.start, etc) are used in the same way as instructed for a traditional website embed.



Then we turned on Locker Service in our Dev environment...

Immediately following that, this same component which once worked flawlessly now causes the entire page to bomb, returning an "Invalid Page" message.

By commenting out each line in the Lightning Components Controller one by one, I was able to find that the liveagent.init line was the one causing the entire page to not display and throw the "Invalid Page" error:

liveagent.init('https://d.la1w1.salesforceliveagent.com/chat', 'CHAT BUTTON ID', 'ORG ID');

With that line commented out, the page loads, but the page is displaying the offline anchor tag when it should be online (agents are online and available).

Further troubleshooting on my part shows that window._laq = [] is not working the same way after enabling locker service. This results in an undefined response when typing window._laq into the console after page load.

Here are screenshots of me typing window._laq into my console window immediately upon fresh load of the page:

Production - Get a more expected return:

Expected Return

Dev with Locker Service - Get undefined:

Undefined

If I manually type window._laq = []; into the browser console, it is successfully created, and then I can manually run the window._laq.push portion of the code in the console, and then manually run liveagent.init to init the Live Agent, which results in my Online button being displayed and the liveagent.startChat working as expected... **but I can't figure out how to get this to run automatically on / after page render because all of my attempts result in window._laq still being undefined. And if window._laq is undefined, then we can't push to it, and if we can't push to it, we can't init... and so on, and so on.

I also tried using a static resource version of deployment.js via <ltng:require scripts=""> instead of referencing Salesforce's external one in my Head Markup to see if it made a difference - this resulted in even less desirable results, with the console telling me that liveagent wasn't even defined.**

SO, the ultimate questions are:

  1. Is there a way to fix this within the current design of Salesforce Live Agent and its associated methods?
  2. After enabling Locker Service, why is window._laq not being defined even though the code block is being run?
  3. If there is no way around this problem and it is indeed a more advanced problem that needs to be addressed by Salesforce, what do we do about it to get it fixed before Locker Service releases?

If you've made it this far, thank you, I am happy to provide as much more detail as is necessary so please make comments as needed.

4

excellent post and I am sorry to see that you had to spend so much time on this.

  1. Known issue and already tracked with bug W-3214759 Live Agent Chat is blocked in Community Templates with Locker Service. The programming mode of including a global scoped library such as deployment.js - not into the component using ltng:require - is not going to work. Actually a good thing because a component is required to be a self contained entity that declares its dependencies - all of its dependencies. The library is being included and bound to global scope not the scope of the component and its effectively invisible to the component. In other words this approach was never one that should have been used but before Locker nothing was stopping it.

  2. That looks like the difference of scope between the code that is running in the console versus the actual code you've stepped through. If you set a breakpoint inside the code (or add a debugger statement if you can alter the code) then window._laq should be defined. LS virtualizes global scope (window) along with the rest of the DOM/BOM and I suspect in one case you are working with the actual global window and in the other the virtual one in the locker context.

  3. Getting this fixed is on Salesforce and if we can't get it fixed (along with the long list of other issues in LS we're working hard to address) then the activation date will be adjusted accordingly. We're not going to activate locker if its still blocking code that is supposed to work with it enabled.

  • Hi Doug - thanks for commenting on this directly, feels a lot more comfortable when you hear it from someone on the inside. I too would have liked to avoid spending so much time on this, but unfortunately when I search for a known issue related to this - or search for bug W-3214759 as you mentioned above, I find no results. So, I didn't have any transparency (that I can find) into this being a known issue already, hence my worry. Could you provide some light on that subject? Was it available to me? Where should I have gone to see this Known Issue information for myself? Many thanks! – Morgan Marchese Sep 12 '16 at 19:32
  • @MorganMarchese did you manage to track this issue in salesforce? I cannot find this using the bug ID or even text? – whoisthis Jan 31 '17 at 13:10
  • @whoisthis unfortunately no and I never heard back from Doug on the matter either. At this point they keep moving back the target date of Lighting Locker service release, so at least Doug was true to his word in the fact that they won't activate locker if it is still blocking things that should be working. As of not-too-long ago it was due to release in February, but I just checked again and Lightning Locker Service for Communities has been pushed back again to 6/13/2017 (124 days from today) – Morgan Marchese Feb 9 '17 at 19:35
  • @MorganMarchese I created a case with SF they did acknowledge that there is a bug with that ID but not publicly visible since they haven't created a known issue for it (don't know why), they asked me to email them weekly to check the status :-( – whoisthis Feb 10 '17 at 7:06
  • I am not sure why a Known Issue along with communication from the folks that own this area has not materialized but I will shake the tree now and make sure something falls out. I did not continue to monitor this issue once the rightful owners supposedly took responsibility. – Doug Chasman Feb 10 '17 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.