Making Salesforce’s Live Agent Button & Deployment Code Portable

During a recent implementation of Salesforce’s Live Agent website chat product, I decided to see how portable I could make the button & deployment code, to minimize the environment-specific changes that would have to be made.

Here is what I came up with:


<html>
   <body>
      <!-- Begin Live Agent button code -->
         <a id="onlineContent" href="javascript://Chat">
            <!-- Online Chat Content -->
         </a>
<div id="offlineContent">
            <!-- Offline Chat Content -->
</div>
<script type="text/javascript">
            var buttonId;
            function beginChat(){
               liveagent.startChat(buttonId);
            }
            if (!window._laq) { window._laq = []; }
            window._laq.push(function(){
               document.getElementById('onlineContent').onclick = beginChat;
               liveagent.showWhenOnline(buttonId, document.getElementById('onlineContent'));
               liveagent.showWhenOffline(buttonId, document.getElementById('offlineContent'));
            });
         </script>
      <!-- End Live Agent button code -->

      <!-- Begin Live Agent deployment code -->
         <script type='text/javascript' src = 'https://la1c1.salesforceliveagent.com/content/g/js/39.0/deployment.js'>
         </script>
         <script type='text/javascript'>
            var firstName;
            var emailAddress;
            var endpointUrl;
            var deploymentId;
            var orgId;

            if (firstName != null) {
               // Sets the display name of the visitor when engaged in a chat.
               liveagent.setName(firstName);
            }
            if (emailAddress != null) {
               // Creates a custom detail called Email and sets its value.
               liveagent.addCustomDetail('Email', emailAddress);
               // Searches for a contact with an exact match to the Email custom detail. Creates a new contact if needed. Links contact to case.
               liveagent.findOrCreate('Contact').map('Email','Email',true,true,true).saveToTranscript('ContactId').linkToEntity('Case','ContactId');
            }
               // Creates a custom detail called Case Origin and sets its value to Chat.
               liveagent.addCustomDetail('Case Origin', 'Chat');
               // Creates a case and sets its origin. Associates the case to the chat transcript and opens the case in the agent console.
               liveagent.findOrCreate('Case').map('Origin','Case Origin',false,false,true).saveToTranscript('CaseId').showOnCreate();
               // Initiates the chat
               liveagent.init(endpointUrl, deploymentId, orgId);
         </script>
      <!-- End Live Agent deployment code -->
   </body>
</html>

This code should work for any Live Agent implementation. Simply do the following:

  • modify the online and offline content elements as desired
  • add the endpointUrl, deploymentId, and orgId from Salesforce
  • populate the firstName and emailAddress variables via your website

Enjoy!  🙂

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s