LiveAgent ClicktoChat
UI Development

Live Agent Click to chat

Blog About :

Customize Live Agent to fit company’s needs. This blog provides few examples to help you understand and create customized chat windows .

Prerequisites:

  • Live Agent is enabled in your organization.
  • Deployment API your organization uses from the deployment code that’s generated after you create a deployment.  This is what the code looks like from the configuration wizard
    <script type='text/javascript' src='https://c.la3-c1-was.salesforceliveagent.com/content/g/js/33.0/deployment.js'></script>
    <script type='text/javascript'>
    liveagent.init('https://d.la3-c1-was.salesforceliveagent.com/chat', '572o0000000L5B4', '00Do0000000eOwe');
    </script>

Customize Chat Window :

Chat window can be customized according to website requirement .

Chat button need to be customized to pass the values if the agent is online or offline.

<a id="liveagent_button_online_573o0000000L671" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('573o0000000L671')"><!-- Online Chat Content --></a><div id="liveagent_button_offline_573o0000000L671" style="display: none;"><!-- Offline Chat Content --></div>
<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('573o0000000L671', document.getElementById('liveagent_button_online_573o0000000L671'));
liveagent.showWhenOffline('573o0000000L671', document.getElementById('liveagent_button_offline_573o0000000L671'));
});
</script>

 

  • Show when online : When the agent is online we can add the Let’s chat button which is used to connect with Live agent
  • Show when offline : when the agent is offline we can add the text according to requirement

Sample code :

<html>
<body>
<script type='text/javascript' src='https://c.la3-c1-was.salesforceliveagent.com/content/g/js/33.0/deployment.js'></script>
<script type='text/javascript'>
liveagent.init('https://d.la3-c1-was.salesforceliveagent.com/chat', '572o0000000L5B4', '00Do0000000eOwe');
</script>
<h2>My Test Page</h2>
<a id="liveagent_button_online_573o0000000L671" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('573o0000000L671')"><!-- Online Chat Content --></a><div id="liveagent_button_offline_573o0000000L671" style="display: none;">Offline Chat Content</div><script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('573o0000000L671', document.getElementById('liveagent_button_online_573o0000000L671'));
liveagent.showWhenOffline('573o0000000L671', document.getElementById('liveagent_button_offline_573o0000000L671'));
});</script>
</body>
</html>

 

 

Custom details can be added to the live agent as we have the features configured for the live agent . Some of commonly requested features in Live Agent implementation is to capture the URL where chat is initiated and store that URL in a case field. To accomplish this, let’s first create a case custom field and name it “Chat_Request_Page__c”. Then we can pull the URL value from the “DOM” property of the page and pass the URL to the custom field.

<script type='text/javascript'>
liveagent.init('https://d.la3-c1-was.salesforceliveagent.com/chat', '572o0000000L5B4', '00Do0000000eOwe');
liveagent.startChat(chatId);
liveagent.addCustomDetail('chatOrigin', 'Live Chat');
liveagent.addCustomDetail('chatSubject', 'Live Chat Case');
liveagent.addCustomDetail('ChatRequestPage', location.href);
liveagent.findOrCreate("").map("Chat_Request_Page__c", "ChatRequestPage", false, false,true);
liveagent.findOrCreate("").map("Origin", "chatOrigin", false, false, true);
liveagent.findOrCreate("").map("Subject", "chatSubject", false, false,true);
liveagent.findOrCreate("").showOnCreate();
liveagent.findOrCreate("").saveToTranscript("CaseId");
liveagent.setChatWindowWidth();
liveagent.setChatWindowHeight()
liveagent.showWhenOnline(chatId, document.getElementById(agentOnline));
liveagent.showWhenOffline(chatId, document.getElementById(agentOffline));
liveagent.addCustomDetail("URL", currentPageUrl, agentDisplayParam);;
</script>

Summary:

Customize Live Agent chat can be accommodated to website through sales force deployment api and is useful for the users to communicate with agents to resolve the queries .

 

 

 

About The Author

Leave a Reply

*