We have all seen websites these days – which have that little pop-up prompting you to ‘chat with someone’.  Or we see a little ‘chat now’ button on a page, to chat live with someone.  But how can you configure your website to do this too?  And how to setup Live Agent in Salesforce?

But isn’t implementing Live Agent complex?  The short answer is no.  And the good news is, it is relatively easy to do.

So, in this ‘how-to’ guide we look at the steps to implement Live Agent with your Salesforce org.

What is Live Agent?

We have all been there, trying to contact a company for help with a product or service. Their website redirecting you to a call centre, web-form to submit or some even give you a postal address! Eek!

This is where Live Agent comes into the picture. In a digital world, Live Agent from Salesforce allows you to improve the customer’s experience. Making it seamless for customers on your website to get in contact with your support (or sales) team.

At its core, Live Agent is a web-chat support channel. Think of Skype or Slack, but in a customer service context.

Here is a quick overview video from Salesforce, covering some of the features of Live Agent.

And although it is a tool primarily used for Customer Service, it could also be used by your sales teams. Imagine providing sales support to a customer who is stuck completing an order on your website?

The power of Live Agent is its versatility and ability to plug into your sales/service processes within Salesforce, with relative ease.

What does Live Agent cost?

This is an important question, as it isn’t free…

So how much does Live Agent cost?

Well the good news is, as of 2016 Salesforce have included Live Agent in the Lightning Service Cloud Unlimited license.

And it is also available on Enterprise, but at an extra add-on. As an add-on, you will have to speak with your Salesforce Account Executive for a price.

There are other alternatives out there too, which could integrate with Salesforce. But remember to check your if edition is compatible with these packages.

Planning your implementation of Live Agent

Live Agent is a communication tool, it can be used to power your customer service teams. Or if implemented incorrectly, could cause damage to your brand. What is the difference between the two? Planning…

Just like most things, planning is key to success. Just because it is relatively to easy implement, doesn’t mean you should just dive right in and do it.

6 things to consider before you implement:

1. Stating the obvious but remember that Live Agent is a different communication channel. There is a different skillset needed here. So, do you have people who are able to communicate effectively via this channel?
2. What are the objectives of Live Agent? What are the metrics for success and performance indicators (KPIs) that you want to track? And what customer behaviours are you wanting to change as part of this rollout?
3. Do you have an idea of how many people may contact you at any one time? For example, do you have traffic estimates from your site? Do you have enough people to staff the queue? What hours of operation will you offer?
4. Where in the customer journey do you want to prompt the customer? Do you want to invite them to chat, or just offer a ‘chat with us’ button on a contact page?
5. Will you cap the volume of chats to your agents? Is there a Service Level Agreement (SLA) in place for Live Agent? How are you going to prioritising Live Agent chats vs Emails or Phone Calls?
6. Are you using Omni-channel? (This is one for another post.) But if your org is not using it currently, is it something that could set this up too? With the aim of routing of service requests across the multiple channels (Live Agent, Calls, Emails, Social Media) to the right people.

How to setup Live Agent in Salesforce

Now we have the planning out the way, we can start the configuration of Live Agent in your org. For a basic setup, there are seven steps needed to enable Live Agent:

Use Case

As a Salesforce Admin, your marketing team has asked you to help roll out Live Agent to the company’s website.  We are setting up a basic implementation, which means we will present a link to customers when agents are available, or a ‘sorry no agent’s available’`message if none are available/all are offline.

Our agents are using Console, and we want to allow them to set their status/availability, and have that reflected on the website.

Enabling Live Agent

Live Agent works within Classic, Console and Lightning (when omni-channel enabled).  However, at this stage you can only enable Live Agent through Classic.

Update (20th Sept): You will be able to setup and configure Live Agent via Settings in Lightning, once Winter ’19 is released in Oct 2019.

1. Switch to Classic -> Setup -> Type ‘Live Agent’ in the Quick Find
2. Go to Live Agent Settings
3. Check Enable Live Agent and click ‘Save’

This exposes the Live Agent objects, relevant fields, and expands the Setup menu. What objects I hear you say! These objects include everything that drives Live Agent within Salesforce:

• Visitors
• Sessions
• Transcripts
• Transcript Events
• Live Agent Supervisor
• Quick Text

Setup Users

There are two elements which are needed to setup a user for a basic Live Agent setup. Enabling the user for Live Agent, and then adding the available Live Agent users into a ‘skill’ (we will cover what this is shortly).

First enable the Live Agent feature on the user record.

• Go to Setup -> Manage Users -> Users
• Find the user(s) you want to enable for Live Agent, and edit their User record
• Check the ‘Live Agent User’ box for each User you want to enable:

Check User Permissions / Profiles

Another important step in the setup of Live Agent is ensuring a user has access to the relevant objects and fields.

The best way to do this is create or update a Permission Set/Profile to include the new objects and fields used by Live Agent.

Some additional permissions on ability for users to manage Skills exist to.

Salesforce have a detailed overview of the permissions recommended for Agents, and their Supervisors.

Update your Console to include Live Agent

Your Console app, most likely will not include Live Agent by default. So you will need to either enable or create the app for your users.

• Go to Setup -> Create -> Apps
• Either select an existing console app, or create a new one.
• Check ‘Include Live Agent in this App’
  • Additional options display, allowing you to prompt your agent to create a new record (such as a case) to link to the Live Chat

Within console, the user should then see the Live Agent status in the Utility Bar:

Define your Skills

Skills within Live Agent are a way to define or categorise different types of work. And are used to send the Live Agent session to the right person.

For example, on your website you have Live Agent embedded on a general ‘Contact Us’ page, an eCommerce landing page and another on a product specific page. You might not want the same person in your company answering all these different types of queries. This is where Skills allow you to have two different sets of users specialising in the specific skill.

You can control how you break the work down, and who you assign it to. And Skills plug-in to tools like Omni-Channel, if you ever look to expand your implementation.

• Go to Setup -> Customize -> Live Agent -> Skills
• Create a new Skill record, by clicking ‘New’

• Add in the Name and a Description
• Then you can choose to either add in specific Users, or Profiles (keep in mind, only users with Live Agent feature enabled will have access)

Configure your Live Agent

Next up, we need to define how we want Live Agent to behave, and which features we want to enable. You can have multiple configurations, this lets you have different Live Agent settings for different users within your org.

A Live Agent Configuration allows you to setup:

• Chat Capacity – a maximum number of chats an agent can receive
• Sneak Peek – ability to see what is being typed, as it is being typed by the customer
• Sound & Notifications settings
• Assignment of the configuration to users or profiles – control over which agents access this configuration. It is worth noting, a user can belong to only one configuration at a time.
• Supervisor settings
• Chat Transfer settings – allowing you to control who can receive a chat transfer by Skill

For more details on what each of the settings are, you can read more here.

Setup your first Live Agent Configuration:

• Go to Setup -> Customise -> Live Agent -> Live Agent Configurations
• Create a new Live Agent Configuration, by clicking ‘New’

• Add in the Name, then you can customise which settings and features you want.

For this basic setup, we will create a configuration with:

• A maximum of 5 chats
• Sneak Peek enabled
• A basic Auto Greeting of ‘Hello, how can we help you today?’
• A Critical Wait Alert of 10 seconds
• Assistance Flag enabled
• Supervisor monitoring and whisper
• And ability to transfer to others within the same Skill group

Chat Buttons and Invitations

Now we have set the backbone of Live Agent up, we now need to setup part which allows the customer to start a Live Agent Chat when they are on the website.

By creating either buttons or invitations, you can define how a Live Agent session can be started. A button, simply enough is an icon/button you embed on a webpage for users to click on to start a Live Agent chat session.

Alternatively, you can setup an Invitation. Customer are then invited to use Live Agent, when certain criteria have been met. For example, if someone is on the specific page for 5 seconds, you might want to prompt them to see if they need help.

You can fully customise this experience to match your website. For this basic setup, we will create a basic button, without any customisation.

Create your button:

To create your first Live Agent button

• Go to: Setup -> Customize -> Live Agent -> Chat Buttons & Invitations
• Create a new button, by clicking ‘New’
• For a basic setup, you only need to enter:
  • Type – do you want a button or an invitation
  • Name of the button/invitation
  • DeveloperName – this auto-populates from the Name
  • Skills which are related to the button/invitation
  • Additional animation settings are required if you have selected Invitation

• Once you click ‘Save’, you will then be given the HTML code for the button/invitation:

Ready to Deploy

The final step is to create a deployment, these are the final touches for your Live Agent setup. And allows you to control some of the visitor settings.

Once a deployment is created, it will give you some additional HTML to add to the bottom of each web page you want Live Agent embedded into.

Go to: Setup -> Customize -> Live Agent -> Deployment Code

• Create a new deployment, by clicking ‘New’
• For a basic setup, you only need to enter:
  • Name of the deployment
  • DeveloperName – this auto-populates from the Name
  • Chat Window Title

Add the code to your site…

Now for the crowning moment. When you are ready to add the code to your webpage, you will need the code output from the Button/Invitation and the Deployment settings.

Create a test Webpage

To test this, you can create a html file in your favourite text editor. In this example, we are going to add this code to a test page for Live Agent.

Open up a text editor, we will create a test HTML page to begin with. To start with, copy this into the text editor:

<html>

<head></head>

<body>

<!-- add the code output from Buttons/Invitations here-->

<!-- add your HTML code from Deployment here-->

</body>

</html>

And now, replace each of the lines above, with the relevant HTML code from Salesforce. The HTML output from Chat Buttons/Invitations and Deployment is what we want.

So you will end up with something like:

<html>

<head></head>

<body>

<!-- this is the code from Buttons/Invitations -->

<a id="liveagent_button_online_5738E0000008OVJ" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('5738E0000008OVJ')"><!-- Online Chat Content --></a><div id="liveagent_button_offline_5738E0000008OVJ" style="display: none;"><!-- Offline Chat Content --></div><script type="text/javascript">

if (!window._laq) { window._laq = []; }

window._laq.push(function(){liveagent.showWhenOnline('5738E0000008OVJ', document.getElementById('liveagent_button_online_5738E0000008OVJ'));

liveagent.showWhenOffline('5738E0000008OVJ', document.getElementById('liveagent_button_offline_5738E0000008OVJ'));

});</script>

<!-- this is the code from Deployment-->

<script type='text/javascript' src='https://c.la1-c2cs-frf.salesforceliveagent.com/content/g/js/43.0/deployment.js'></script>

<script type='text/javascript'>

liveagent.init('https://d.la1-c2cs-frf.salesforceliveagent.com/chat', '5728E0000008OPk', '00D8E0000000gBA');

</script>

</body>

</html>

Now find the part in the code that shows: <!– Online Chat Content –>. Add in the text ‘Chat Now’. Your code then should look like:

<!-- Online Chat Content -->Chat Now</a>

Additionally, we need to add in some text if an agent is not available. Do to that find: <!– Offline Chat Content –>. Similarly add in the text ‘Sorry no agents currently available’. This should now look like:

<!-- Offline Chat Content -->Sorry no agents currently available</div>

Now go to ‘Save As’, and save the text file as ‘Live Agent.html’.

We have now created a very basic page, to test Live Agent. If you now open the HTML file you have created, you should see:

Alternatively, if you are testing and then select ‘Available’ in Live Agent status. Refreshing the webpage should pickup the change in status and display:

Clicking the ‘Chat Now’ link, will then prompt the Agent logged in with this to accept the chat:

Once the chat is accepted, you should see the transcript of the chat in your Console. And as we ticked the ‘Create new case’ option for Console above, Salesforce will automatically prompt you to create a Case:

Add Live Agent to your WordPress site

The variety of website technology and hosts out there is truly mind-blowing. Deploying Live Agent to your website, needs a bit of knowledge of HTML and your website.

Let’s take a look at adding Salesforce Live Agent to a WordPress page. WordPress is a very common platform that is used globally, even by cirrus.red! ? Other platforms and web hosts, may follow similar steps.

By the way I am assuming you have access to create and publish web pages in WordPress for this section.

Sticking with our Use Case, we want to create a new Contact Us page, where the Live Agent link is embedded.

• Login to the WordPress admin page of your site.
• Click on ‘Pages’ and then ‘Add New’
• Ensure you are on the Text page editor

• Add in a page Title. For example ‘Contact Us’
• First up, take the code from Chat Buttons/Invitations and paste it into the editor
  • Remember, as per above you will need to add-in:
    • Online Chat Content and
    • Offline Chat Content
• Underneath that HTML, now add in the Deployment HTML code

You should end up with something like this:

Now you can preview the page, save it as a draft or publish it (if you wish). We now have a basic setup of Live Agent, tested and working on our site.

Give yourself a round of applause…

Wrap up…

So we have now setup a basic Live Chat implementation. Your internal users can accept incoming chat requests from your customers and record the chats within Salesforce against a case.

Live Agent is fully customisable though, and this is just the beginning of what you can do.

Customisations include overall look and feel, adding in custom landing pages or pre-chat forms to capture contact details.

Additionally, you can integrate Live Agent with Omni-Channel, which allows you to manage work states of your agents across multiple channels.

But these are all things for another how-to guide down the road.

Additional resources to help you

Overall Training / What is Live Agent:

• Trailhead
• Salesforce Help & Training

Planning the roll-out:

While researching this post, I also found these resources which may be of interest in the planning stage:

• The Best of Live Chat: How You Should Use this Customer Service Channel from Salesforce
• Chat-based Customer Service at its Best and Worst from fonolo
• 10 Steps to Launching a Successful Live Chat from Acquire
• 6 reasons to use live chat support from Zendesk

Implementation Guide for Administrators:

• Guide for Admins
• Live Agent for Support Agents
• Live Agent Configuration Settings read more here.

Video resources:

• Live Agent: Let’s Do This
• Omni channel & Live Agent (as at Winter ’17)