This tutorial shows how to integrate the Sendbird SDK into Salesforce and enable real-time communication between a Salesforce Agent interface and a client application. If you don’t have a Salesforce account, sign-up for a developer org here.
Below is a map to integrate Sendbird into Salesforce.
This document provides insights into adding an Agent chat window into a Salesforce case. The Agent chat window is housed in Salesforce and connected to Salesforce. It can communicate with Sendbird in real-time, enabling a live chat experience.
Let us guide you through a possible flow to create a new Salesforce case and a Sendbird Group Channel. We will use a client application, a server to handle API requests to Salesforce, and the Platform API for requests to Sendbird.
A customer accesses a client-side application and creates a Salesforce case with a corresponding Sendbird Group Channel (a ticket) using a webserver.
When set up, call the endpoint /createticket from Postman and check in Salesforce and in your Sendbird dashboard that the server is creating both a Salesforce Case and a Sendbird Channel with a user.
1.1. Receive and process a create ticket request from the user’s device.
1.2. Fetch an access token from Salesforce (SF_TOKEN explained).
1.3. Create a Salesforce Case.
1.4. Create a channel in Sendbird using the Salesforce Case ID as the channel URL. Also, invite the user using their Sendbird user_id
1.5. Create a client-side application to call to the above webserver
There is a basic client-side application here, that uses the Sendbird UIKit message view.
This section describes the implementation of a Salesforce Lightning Container containing the Sendbird JavaScript UIKit, to create a Utilities Bar widget. For a high-level overview of a Salesforce Lightning Component, try this blog post and this guide for Salesforce Lightning Containers. Here is an example video.
Glossary:
Utilities Bar Widget:
A Salesforce “Lightning Component” is displayed in the Salesforce’s utilities bar at the bottom.
Lightning Container:
The iframe HTML and JavaScript code are loaded as a static resource into Salesforce and compiled as a view within the Utilities Bar Widget.
2.1. Create an empty Utilities Bar Widget house a Lightning Container
2.2. Add Utilities Bar Widget code
Set aura:component as a utility bar and provide an aura:id
2.3. Upload a barebones Lightning Container
This step aims at uploading a barebones Lightning Container to check everything works. We will use the same resource, later, to upload the UIKit code.
Notes:
2.4. Reference the static resource “sendbird_bar” in the Utilities Bar widget
sendbird_utilities_bar.cmp
2.5. Add the Utilities Bar Widget to display in Salesforce
In Salesforce click “Setup” and search for “App Manager” to set where the Utilities Bar widget will appear. Here “Service Console” is used to show the Utilities Bar Widget
Click “▾” and “Edit” in the App called Service Console
2.6. Download a sample UIKit for the Lightning Container
There is an annotated sample Sendbird UIKit Lightning Container here.
Note: (March 8th, 2021), there is a bug in Parcel Bundler version 1.12.4. Before downloading from the code sandbox, check the Parcel Bundler version is 1.12.3
2.7. Grant permissions to Sendbird to operate within Salesforce
Update the Salesforce CSP files to include the URLs below (choose your own names). Also, after adding the UIKit Lightning Container (seen later), check the Salesforce browser developer console for connection errors.
2.8. Prepare Utilities Bar Widget to initialize the UIKit Lightning Container
The Lightning Container needs to communicate readiness to the Utilities Bar Widget.
Send a message to the Utilities Bar Widget and Include retry logic. Clear the retry interval in messageHandler when the Utilities Bar Widget returns a Salesforce Agent’s user_id.
lightningContainer.Index.js
The Utilities Bar Widget onMessage handler calls handleMessage
sendbird_utilities_bar.cmp
TheUtilities Bar Widget’s handleMessage() method listens for all messages from the Lightning Container. Therefore, conditionally process the “READY” message.
sendbird_utilities_barController.js
helper.initUIKit() in the Utilities Bar Widget sends a message to the Lightning Container.
“Sendbird_Bar” = lightning:container’s aura:id
sendbird_utilities_barHelper.js
The Lightning Container receives the message from the Utilities Bar Widget in the LLC.addMessageHandler()
Stop the retry logic and render the UIKit.
lightningContainer.Index.js
2.9 Load the Lightning Container to Salesforce
2.10 Optional but important extras
Once a case has been created, a Salesforce Agent will take ownership of the Case and be invited to the corresponding Sendbird Channel. A Salesforce’s Trigger listens for the Case Ownership change and calls a Salesforce Apex Callout.
3.1. Listen for manual Case assignment.
AssignAgent.apxt
3.2. Listen for automatic case assignments via the Salesforce Omni Channel (Recommended)
Salesforce’s omnichannel can indicate to an agent when they have a new Case that they should process:
Salesforce Developer console –> New –> Apex Trigger –> Name = “AgentOmniChannel” & sObject = “AgentWork”
AgentOmniChanne..apxt
3.3. Salesforce Callouts to assign Sendbird Channel membership
The Salesforce Callout below acts as a type of backend web server built into Salesforce. Because Callouts operate in Salesforce’s backend, it is safe to call to the Sendbird Platform API endpoints.
Salesforce Developer console –> New –> Apex Class –> Name = “SendbirdCallOuts”
SendbirdCallOuts.apxc
Congratulations! You’ve just added Sendbird Chat to your web or mobile application so that your users can engage in real-time communication with a Salesforce Agent. They will be delighted with this new and engaging support experience! Next, check out our voice and video Sendbird Calls product and bring your support to the next level with voice and video. In the meantime, happy support building!
Stay up-to-date on the latest technical content from Sendbird.
Thank You for registering!