Custom Live Chat Using Salesforce Live Chat REST API

PREFACE

We may choose to build a custom live chat app using Salesforce Live Chat REST API. There may be below given reasons or any specific reasons:

  • Custom Experience:- Header, Footer, Navigation, Offline Form, Pre-chat Form
  • Security Reason:- Salesforce generated embedded service snippet code does not require authentication and works publicly. Also, the script may contain some dangerous Javascript functions like (eval(), create()) which may be against our company privacy policy.
  • Building any embedded web app which is tightly coupled with Salesforce Service Cloud.

Here are Salesforce REST API link: https://developer.salesforce.com/docs/atlas.en-us.live_agent_rest.meta/live_agent_rest/live_agent_rest_understanding_resources.htm

Also, here are some useful content regarding same problem/requirement

https://salesforce.stackexchange.com/questions/86376/how-create-a-live-agent-session-by-rest-api

https://salesforce.stackexchange.com/questions/157048/how-to-create-live-agent-chat-invitation-with-rest-api

https://salesforce.stackexchange.com/questions/179207/unable-to-send-chat-message-in-live-agent-via-rest-api

GOTCHAS

  • If you try to hit Salesforce Live Chat Server endpoint (something like https://d.la1-c2-iad.salesforceliveagent.com) using any web app, you will get the CORS error because Salesforce Live Chat Server will not serve any request by the client (browser i.e javascript) as the client domain is not added as an allowed domain. So the question is can we add our domain at Live Chat Server, answer is NO, we can not whitelist.

SOLUTION

  • As a workaround, we will have to create a proxy server that will get requests from the web app and pass the request to the Live Chat Server. Likewise, the proxy server will return the response to the web app.
  • We can orchestrate the request and response at this proxy server.
  • We can add the layers of security as well as this proxy server.
PROXY SERVER
  • This server must have a very high throughput rate & low latency.
  • Must be able to cope with tons (yes, I mean it – huge numbers of HTTP request trips would be made) requests.
  • You can develop this in any technology, just for example, here are two ways-
    • Java: Here is a working repo that can be helpful: https://github.com/pepefloyd/LiveAgentChatClient
    • Salesforce Apex REST Endpoint: Not an ideal approach keeping in mind the performance prerequisites of the server but still can work if there is not much traffic on the chat channel for you or you just want to play with it. This is explained further in this article.
Salesforce Apex REST Endpoint as Proxy Server
  • Develop an Apex class as below to make enabled for APEX REST
@RestResource(urlMapping='/livechat/*')
global with sharing class LiveChatService{

	@HttpPost
	global static String doPost(String type, String payload) {
            if(type == 'availibity'){
                responseBody = checkAgentAvailability();
	    } 
	}
	public static String checkAgentAvailability(){
            String endPoint = 'https://d.la1-c1-ukb.salesforceliveagent.com/chat/rest/Visitor/Availability?Availability.prefix=Visitor&Availability.ids='+BUTTONID+'&deployment_id='+DEPLOYMENTID+'&org_id='+ORGANIZATIONID;
        HttpResponse response = makeHttpRequest(null, 'GET', endPoint);
        return response.getBody();
    }

}
  • Add this apex class to a site by using Guest User Profile.
  • After that, we can use this service as below in our client side code:
let CHATSERVICEENDPOINT = 'https://<site URL>/services/apexrest/livechat/service';
const resp = await fetch(CHATSERVICEENDPOINT, {
              method: 'POST', 
              headers: {
                'Content-Type': 'application/json'
              },
              redirect: 'follow',
              body: '{"type":"availibity", "payload":""}'
 });
          
 const data = await resp.json();