How to set up LiveAgent in a React App

Sophia Bell
Dec 16, 2020 · 3 min read

In this article, we provide a step-by-step guide on how to integrate the SalesForce LiveAgent Chat feature into a React app. We also explain how customising the functionality will enable the initialisation and startChat function to run on a single button click.

LiveAgent
Photo by Andrew Neel from Pexels

Identifying code scripts

When setting up LiveAgent, you are initially provided with the following pieces of code. In these examples, we have removed any identifying ID numbers and replaced them with descriptions:

<script type=’text/javascript’   src=’https://API_endpoint_ID.salesforceliveagent.com/content/g/js/50.0/deployment.js'>
</script>

<script type=’text/javascript’>     liveagent.init(‘https://API_endpoint_ID.salesforceliveagent.com/chat', ‘Deployment_ID’, ‘Organisation_ID’);
</script>

<img id="liveagent_button_online_idNo" style="display: none; border: 0px none; cursor: pointer" onClick="liveagent.startChat(Your_ID)" src="Link_to_online_image" /><img id="liveagent_button_offline_idNo" style="display: none; border: 0px none;" src="Link_to_offline_image" />

<script type=”text/javascript”>   if (!window._laq) { window._laq = []; }window._laq.push(function(){
liveagent.showWhenOnline(‘Your_ID’, document.getElementById(‘liveagent_button_online_ID’));
liveagent.showWhenOffline(‘Your_ID’, document.getElementById(‘liveagent_button_offline_ID’)); });</script>

Common challenges of implementing the LiveAgent chat feature

In most cases, the LiveAgent chat feature works seamlessly, but there are a number of common challenges that will need to be addressed when implementing this feature.

  1. LiveAgent should not initialise upon render as this will negatively affect page load time performance. It should only initialise when a user is needing to talk with an agent.
  2. LiveAgent should initialise in isolation in a reusable component.
  3. The deployment code should run before any of the other functions to prevent the receival of error messages stating that LiveAgent is not defined.
  4. The initialisation process and startChat function should occur on the same click event.

Running the deployment code

In this section, we will explore how to run the deployment code.

The easiest way to do this in the LiveAgent component is to install react-helmet and run the script inside the Helmet tags. React Helmet manages changes to the document head at the individual page level, meaning additions will not feature in the rest of the app.

<Helmet>
<script
defer
type="text/javascript" src="https://API_endpoint_ID.salesforceliveagent.com/content/g/js/50.0/deployment.js">
</script>
</Helmet>

Adding the defer attribute means that this code will not run until after the page has rendered, and will therefore have less of an impact on page load times.

Next, you can create a custom chat button and replace the images provided in the initial code, making sure to give them the same IDs as the images provided.

<button id="liveagent_button_online_ID">
Start Chat
</button>
<button style={{display: "none"}} id="liveagent_button_offline_ID">
There are no agents currently available
</button>

If an ‘offline’ button is not included with the offline ID, the ‘Start Chat’ button will disappear if it is clicked and there are no agents available. The offline button does not need to be included as a button, but can feature as anything as long as it has the offline ID.

As aforementioned, LiveAgent should not initialise as soon as the page is rendered but only when someone wishes to talk to an agent — ideally combining the initialise LiveAgent function with the startChat function. Liveagent.init loads asynchronously, so it needs to finish loading before you call startChat. Otherwise, you will end up with either a CORS error or a notice that you cannot call startChat on undefined (or both). Below, we have included a handy callback function that has been wrapped in an initialise Chat function to do just that:

const initializeChat = () => {
liveagent.addButtonEventHandler("Your_ID", function (e: any) {
if (e == liveagent.BUTTON_EVENT.BUTTON_AVAILABLE) {
liveagent.startChat("Your_ID");
}
});
liveagent.init('https://API_endpoint_ID.salesforceliveagent.com/chat', ‘Deployment_ID’, ‘Organisation_ID’);
};

You can now pull out the initialise function and include the code that identifies the relevant button for our button event:

const initializeAgent = () => {
liveagent.init("https://PI_endpoint_ID.salesforceliveagent.com/chat", ‘Deployment_ID’, ‘Organisation_ID’);
if (!window._laq) {
window._laq = [];
}
window._laq.push(function () {
liveagent.showWhenOnline("Your_ID", document.getElementById("liveagent_button_online_ID"));
});
};

Finally, you can pass the initializeChat function as an onClick event to the button. The final LiveAgent component will now look something like this:

In a nutshell

We hope this short guide will help you in your efforts to set up the LiveAgent chat function in your React app. In following this guide, you will have a reusable component that initialises both the LiveAgent functionality and chat feature in a single click event.

Credera Engineering

Our engineers have solved some of the most complex technical challenges facing organisations today.

Credera Engineering

Credera is a consulting firm focused on strategy, transformation, cloud, data, and engineering. Our more than 700 consultants across the globe partner with clients ranging from FTSE 100 companies to large government departments.

Sophia Bell

Written by

Junior software engineer at Credera UK and graduate of Makers Academy

Credera Engineering

Credera is a consulting firm focused on strategy, transformation, cloud, data, and engineering. Our more than 700 consultants across the globe partner with clients ranging from FTSE 100 companies to large government departments.