What is Embedded Chat?
Embedded chat windows use a Chat deployment that you can quickly configure. Then, simply add the code snippet to the web pages where you want the chat window to be available. Setting up Embedded Chat doesn’t change how your agents chat with customers in their console.
What is Einstein Bot?
A chatbot is a computer program that simulates human conversation by voice or text communication and is designed to help solve a problem. Organizations use chatbots to engage with customers alongside classic customer service channels like phone, email, and social media.
There are mentioned few steps to implement Einstein chatbot with embedded chat. Please follow these steps :
Step 1: Login on Salesforce developer org.
Step 2: Enable Einstein Bot.
Step 3: Goto Service Setup -> click on view All
Step 4: Search the Chat with Customer after clicking on the View All Button.
Step 5: After Selecting this option then please create the chat queue for the customer chat. and in that chat select the type Service. Click Next.
Step 6: Quick Find Box -> Search Embedded Service Deployment and open it.
Step 7: After Clicking on that, click the dropdown button in the Embedded Service Deployment and click the view button.
Step 8: Click the Embedded Service Code Snippets to get the Code for testing.
Step 9: Copy that code and paste it into the visual force page in between the tags. Like that:
<apex:page >
<style type='text/css'>
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #005290;
font-family: "Arial", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
outline: 1px solid #005290;
}
</style>
https://service.force.com/embeddedservice/5.0/esw.min.js
<script type='text/javascript'>
var initESW = function(gslbBaseURL) {
embedded_svc.settings.displayHelpButton = true; //Or false
embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
// Settings for Chat
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
// Returns a valid button ID.
//};
//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
embedded_svc.settings.enabledFeatures = ['LiveAgent'];
embedded_svc.settings.entryFeature = 'LiveAgent';
embedded_svc.init(
'https://curious-narwhal-kyfqk7-dev-ed.trailblaze.my.salesforce.com',
'https://curious-narwhal-kyfqk7-dev-ed.trailblaze.my.site.com/',
gslbBaseURL,
'00D2w00000ISVt0',
'Chat_Agents',
{
baseLiveAgentContentURL: 'https://c.la2-c2-hnd.salesforceliveagent.com/content',
deploymentId: '5722w000000Lyya',
buttonId: '5732w000000M1vr',
baseLiveAgentURL: 'https://d.la2-c2-hnd.salesforceliveagent.com/chat',
eswLiveAgentDevName: 'Chat_Agents',
isOfflineSupportEnabled: false
}
);
};
if (!window.embedded_svc) {
var s = document.createElement('script');
s.setAttribute('src', 'https://curious-narwhal-kyfqk7-dev-ed.trailblaze.my.salesforce.com/embeddedservice/5.0/esw.min.js');
s.onload = function() {
initESW(null);
};
document.body.appendChild(s);
} else {
initESW('https://service.force.com');
}
</script>
</apex:page>Step 10: For testing this feature open the org URL and after that add two keywords after the URL like that:
https://curious-narwhal-kyfqk7-dev-ed--c.trailblaze.vf.force.com/apex/chatTest
Step 11: How to Deploy this feature on the live website:
- Quick Find Box -> Search Chat -> Select Chat Button and Invitation -> Click on the name, in the Bottom need to Copied the Chat Button Code.
- Quick Find Box -> Search Chat -> Select Deployment -> Click on the name, in the Bottom need to Copied the Deployment Code.
- Create a New HTML File and paste it immediately above the closing </body> tag
<html>
<body>
<!-- live chat button -->
<a id="liveagent_button_online_5732w000000M1vr" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('5732w000000M1vr')">
Online Chat
</a>
<div id="liveagent_button_offline_5732w000000M1vr" style="display: none;">
Offline Chat
</div>
<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(
function(){
liveagent.showWhenOnline(
'5732w000000M1vr',
document.getElementById('liveagent_button_online_5732w000000M1vr')
);
liveagent.showWhenOffline(
'5732w000000M1vr',
document.getElementById('liveagent_button_offline_5732w000000M1vr')
);
}
);</script>
<!-- live agent deployment -->
https://c.la2-c2-hnd.salesforceliveagent.com/content/g/js/56.0/deployment.js
<script type='text/javascript'>
liveagent.init('https://d.la2-c2-hnd.salesforceliveagent.com/chat', '5722w000000Lyya', '00D2w00000ISVt0').
</script>
</body>
</html>Screenshot of Live Agent Chat Using Einstein Bot
- If the End Chat button clicks, then the chat will end.
- If we want to run this script in the live website like that:
- In Step 3 of this Image, you need to change your chat status when the user sends the request then the status should be Showing Available - Chat
- When the agent receives the request from the user then the agent needs to check the checkbox which is shown in the Step 3 image in the new tab.
- Once the Agent accepts the request the chat will start between the user & agent.
How to populate the value in Chat Bot:
The following sample code for embedded_svc.settings.prepopulatedPrechatFields populates the First Name, Last Name, Email, and Subject fields in the pre-chat form.
embedded_svc.settings.prepopulatedPrechatFields = {
FirstName : "SandeepTest",
LastName : "KumarTest",
Email : "sandeep.saini482@gmail.com",
Subject: "Need Assistance Immediately"
};
embedded_svc.addEventHandler("afterMaximize", function(data) {
document.querySelector('.FirstName').parentNode.style.display = 'none';
document.querySelector('.LastName').parentNode.style.display = 'none';
document.querySelector('.Email').parentNode.style.display = 'none';
let typeEle = document.querySelector('.Type');
typeEle.value = '';
typeEle.dispatchEvent(new Event('change',{'bubbles':!0}));
});Note: It should be added before “embedded_svc.init”
How to implement the Embedded Chat Element in the Third-Party Website for Customer Support. Please follow the steps below.
- open Embedded service deployment.
- Then click on the Embedded Service Code Snippets click on the Get Code Button and copy the code from the snippet.
- Paste the code like this:
<html>
<body>
<apex:page >
<style type='text/css'>
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #005290;
font-family: "Arial", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
outline: 1px solid #005290;
}
//Hide the Name field from End User
.embeddedServiceSidebarFormField.inputSplitName {
display: none !important;
}
</style>
<script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>
<script type='text/javascript'>
var initESW = function(gslbBaseURL) {
embedded_svc.settings.displayHelpButton = true; //Or false
embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'
//embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
//embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
//embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
//embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
// Settings for Chat
//embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
// Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
// Returns a valid button ID.
//};
//embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
//embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
//embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
embedded_svc.settings.enabledFeatures = ['LiveAgent'];
embedded_svc.settings.entryFeature = 'LiveAgent';
// Populate the value automatically in the pre-chat form
embedded_svc.settings.prepopulatedPrechatFields = {
FirstName : "Test",
LastName : "Test",
SuppliedName : "Test",
Email : "TestData482@gmail.com",
SuppliedEmail : "TestData482@gmail.com",
Subject: "Need Assistance Immediately"
};
embedded_svc.init(
'https://cunning-goat-kaby9g-dev-ed.trailblaze.my.salesforce.com',
'https://cunning-goat-kaby9g-dev-ed.trailblaze.my.site.com/',
gslbBaseURL,
'00D2w00000KLQDs',
'Chat_With_Customer',
{
baseLiveAgentContentURL: 'https://c.la2-c2-hnd.salesforceliveagent.com/content',
deploymentId: '5722w000000UhUN',
buttonId: '5732w000000UkNk',
baseLiveAgentURL: 'https://d.la2-c2-hnd.salesforceliveagent.com/chat',
eswLiveAgentDevName: 'Chat_With_Customer',
isOfflineSupportEnabled: true
}
);
};
if (!window.embedded_svc) {
var s = document.createElement('script');
s.setAttribute('src', 'https://cunning-goat-kaby9g-dev-ed.trailblaze.my.salesforce.com/embeddedservice/5.0/esw.min.js');
s.onload = function() {
initESW(null);
};
document.body.appendChild(s);
} else {
initESW('https://service.force.com');
}
</script>
</apex:page>
</body>
</html>
One Response
Thanks Aman for sharing your knowledge. Its very useful.