+ Start a Discussion
Bryan RobisonBryan Robison 

Integrating Live Agent Chat Into Communities

I have created the code via the Chat Button design, but am unable to add it to the current Communities page. Community Builder does not allow anything be added in, and Site.com does not allow the template to be edited (as it mentions the page is a Lightning template.) Lightning Components can be built, but do not allow for this sort of scripting. How does something scripted get added via Community Builder or Site.com Studio?
James LoghryJames Loghry

Community Builder is really limited with how you can customize it. Generally speaking if you can somehow get the code in your footer, then you should be good to go.

That being said, this SSE post from September declares that you can get Live Agent to work by including the script in a static resource, and then creating a lightning component that uses that static resource, then adding the lightning component to community builder.

Bryan RobisonBryan Robison

James, thank you very much for your reply. I've completed most of those steps, but am again running into a snag.

When attempting to add the static resource to the component, I receive this error: 'Could not load Static Resource from Salesforce: sObject type 'StaticResource' is not supported'

James LoghryJames Loghry
You should be using the ltng:require tag to load the static resource.  See here for more information: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_libs_platform.htm
Bryan RobisonBryan Robison

A-ha. Then my follow-up to that would be, after I have saved the component and it is now a .cmp, how does it get added/included to the list of available components within Community Builder? 

I apologize if I am coming off as a complete moron here.

James LoghryJames Loghry
Hi Bryan,

Sorry I forgot to mention that.  You'll need to implement the community interface.  You can do that by adding the following to your aura:component tag:

Adding this to your aura:component element lets Community Builder know this component should work with communities.

To add the component to your template then, you would:
  1. Open Community Builder for your community
  2. Click the Page Editor tab (little page icon with a corner turned up)
  3. Go to the lightning components tab (which is indicated by a puzzle piece icon)
  4. At the bottom of this lightning components tab, if all goes well, you should see your lightning component listed under Custom Components.

Hope that helps.
Bryan RobisonBryan Robison
Hey James,

So essentially, if I were to create a static resource titled 'LiveAgentButton', the component should look like this, both to be available as a component and for it to allow Chat to be accessed:

<ltng:require scripts="/resource/LiveAgentButton"
James LoghryJames Loghry
No, it should look like:
<aura:component implements="forceCommunity:availableForAllPageTypes">
<ltng:require scripts="/resource/LiveAgentButton"

Morgan MarcheseMorgan Marchese
Have either of you gotten this to work yet? I made a post on dev forums where James directed me to check this post, but this post just directs me to the same Stack Exchange post that I already read about and still nets me the same result - I cannot figure this out. I've already tried the static resource method but I get errors in my console and can't continue.

Bryan/James, have either of you gotten this working? I would appreciate any information you can give, I've been banging my head against this for the last month and I just can't get it to work right.

Now with the Spring '16 preview, I've even tried adding the scripts to the head section in the new Advanced options. That got me farther than I've ever gotten before, I got the scripts to load and if I manually display the "Live Chat Online" button on the page I am able to click it and get to my LC PreChat window, but now my problem appears to be that the scripts in the head section aren't able to see the IDs that i've assigned to the "LC Offline" and "LC Online" images, so the page ALWAYS display the "LC Offline" since it can't getElementById.

When I inspect the source of my page, and try to manually find the ID that I assigned to the element in my lightning component, I can't find it in the source either... In fact, I can't find ANY of the page data in the source. Now I'm even more confused than before.
Bryan RobisonBryan Robison

You've made more progress than I have, Morgan. I am able to see that the button is available under Custom Components. However, once added to the page, I am not seeing anything actually being active within that space. You mention that that you're able to see the images that you integrated, which is where I'm hoping to get to next.


What James mentioned to me is all accurate, and was a great help. Unfortunately, I am hitting the same snags as you. 

Has anyone been successful at implementing a Live Agent Chat button in the Community Builder?
Megan D MoodyMegan D Moody
I'm also wondering if anyone has been successful.
I found this Lightning compent on the appexchange and successfully implemented it:  https://login.salesforce.com/packaging/installPackage.apexp?p0=04t61000000Tmnp
Swathi Gaddam 11Swathi Gaddam 11
Seahorcesolns - Did you have any issues implementing?  I added all the properties but it still gives error that some properties are missing.
No issues implementing it in my org, but I already have Live Agent Chat configured.  I used the Property Editor for the Live Agent Chat Button Lightning component to add my Org ID, Deployment URL, etc. Then I made my Live Agent Chat user available and was able to preview the published page with it working.
Rahul Jichkar 42Rahul Jichkar 42
I have configured the 'Live Agent Button' package in the community along with the necessary parameters. But the chat button is still showing the status 'Chat Unavailable' even though the live agent is 'online'. Plz help.
User-added image
Hi Rahul, that's what my chat button shows too.  It means that the component is configured correctly.  When you go to the Preview of the Community and an agent is online, that's where you should see it working.
Morgan MarcheseMorgan Marchese
Well - I had a custom integration of Live Agent working perfectly in our community site for the last few months, and unsurprisingly, the upcoming critical update for lightning locker service for communities COMPLETELY broke it, and I am unable to figure out how to fix it.

Ironically, I've also tried to use the custom lightning component mentioned above ^, which was created by Salesforce themselves, and it ALSO doesn't appear to work when lightning locker service for communities is enabled in our Sandbox. Honestly unbelievable. How are we supposed to implement Live Agent into our Salesforce Community if even Salesforce themselves cannot code a component that conforms to their own rules and functions without code manipulation?

I've now spent the better part of a day ripping apart their component through various console.log(); lines to find out where the break points are, and I find that a majority of their code returns undefined variables or no results at all.

Meanwhile, I'm able to spin up a basic HTML page and save it to my desktop (No Apex, No VisualForce, no Lightning), and I can get a Live Agent button working within 12 seconds. 

Swathi Gaddam 7Swathi Gaddam 7
So I was able to successfully configure the component properties. I see the chat button online and able to initiate the chat as well. After I fill in details in the pre chat form and hit the Reuqest chat button I am getting error  'The chat window may only be launched from a button- you cannot access it directly' Did anyone have this issue? See the attachedUser-added image
Brian KnowltonBrian Knowlton

I'm in the same boat. Actually getting the error "No 'Access-Control-Allow-Origin' header is present on the requested resource."

Anyone see that yet?
I tried loading the js as a static resource, but evenHandling doesn't work now.

Is there any further advance on this from anyone?
I've tried both the <head> and resource file approach - whilst the Online/Offline process is working for me - when the Online is clicked I get chrome reporting via the console: 
Blocked opening '' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
and also
Blocked form submission to '<<redacted>>' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

Is this due to Locker or have I missed something?
This URL http://salesforce.stackexchange.com/questions/105455/spring16-community-builder-lightning-javascript-in-head-cant-find-elementbyi/105633 is what's got me this far.
OK tail between legs moment - it helps if I preview the site instead of relying on just clicking on the Start Chat from within the builder page. Doh!.
Brian KnowltonBrian Knowlton
I found out (through very long trial and error) that SFDC updated the locker service in the communities. Once I disabled that, I had no troubles. It's currently not mandatory so you can disable it (via critical updates). I hope they figure out a solution soon. 
Bala Egambaram 9Bala Egambaram 9
Here is my lighting component with Live Chat code:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!$Resource.TrailChat}" />
    <ltng:require scripts="{!$Resource.Deployment}" /> 
    <img id="liveagent_button_online_57341000000CzRV" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('57341000000CzRV')" src="https://bala-trailhead1-developer-edition.na35.force.com/resource/1481731369000/OnlineButton" />
    <img id="liveagent_button_offline_57341000000CzRV" style="display: none; border: 0px none; " src="https://bala-trailhead1-developer-edition.na35.force.com/resource/1481731401000/OfflineButton" />

I removed all the <script> tags and made two .js files ( one contains deployment.js content and other contains all other javascripts ) like below:
liveagent.init('https://d.la2-c1-phx.salesforceliveagent.com/chat', '57241000000Cx1z', '00D41000001hJ6b');
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('57341000000CzRV', document.getElementById('liveagent_button_online_57341000000CzRV'));
liveagent.showWhenOffline('57341000000CzRV', document.getElementById('liveagent_button_offline_57341000000CzRV'));

When I add this component in my Napili community home/custom page, I am getting "Uncaught SyntaxError: Unexpected end of input throws at https://playful-bear-281399-dev-ed--livepreview.na35.force.com/sfsites/c/resource/1481921103000/TrailChat:4:114" error. It comes either in line 3 or 4.

Any clue?

Bala Egambaram 9Bala Egambaram 9
It looks like document.getElementById(...) is not working. I am getting error in deployment.js file at line 34.
Also, tried with document.getElementByName(..) or document.getElementByClassName(..). Bot are not working.

Also, if I give alert(..) statement in the onClick, it is not firing.

<img id="liveagent_button_online_57341000000CzRV" style="display: none; border: 0px none; cursor: pointer" onclick="alert('test');liveagent.startChat('57341000000CzRV')" src="https://bala-trailhead1-developer-edition.na35.force.com/resource/1481731369000/OnlineButton" />

When I place the lightning component in the Napili community home page, I can get the button image. But no action is happening when I click.