Salesforce Handoff Integration
This document outlines the prerequisites and steps required to integrate Salesforce Embedded Messaging as a support chat handoff on your website. Follow this guide to enable Salesforce chat support using your own configuration settings.
Prerequisites
Before implementing the Salesforce handoff, ensure you have the following:
- Salesforce Organization Credentials:
- **Organization ID:**A unique identifier for your Salesforce organization (e.g.,
[YOUR_ORG_ID]). - **Deployment/Chat Name:**The name of your Salesforce Embedded Messaging deployment (e.g.,
[YOUR_DEPLOYMENT_NAME]).
- **Organization ID:**A unique identifier for your Salesforce organization (e.g.,
- Site Configuration:
- **Site URL:**The URL where your Salesforce chat is hosted (e.g.,
https://[YOUR_SITE_URL]). - **SCRT2 URL:**The secure URL endpoint used for initializing the chat (e.g.,
https://[YOUR_SALESFORCE_SCRT2_URL]).
- **Site URL:**The URL where your Salesforce chat is hosted (e.g.,
- Script Access:
- Ensure that the Salesforce Embedded Messaging script (bootstrap file) is accessible via the provided URL, typically ending in
/assets/js/bootstrap.min.js.
- Ensure that the Salesforce Embedded Messaging script (bootstrap file) is accessible via the provided URL, typically ending in
- Network Permissions:
- Confirm that your website is permitted to load external scripts from the Salesforce domain and that there are no cross-origin restrictions preventing the script from loading properly.
Implementation Steps
Follow these steps to load and initialize the Salesforce Embedded Messaging widget:
1. Load the Salesforce Script Dynamically
Create a function that dynamically loads the Salesforce script by inserting it into the <head> of your page. This ensures that the script is loaded only once.
<script>
function loadSalesforceWidget() {
// Prevent multiple script loads by checking if it already exists
if (document.getElementById("salesforce-script")) {
return;
}
const script = document.createElement("script");
script.src = "https://[YOUR_SITE_URL]/assets/js/bootstrap.min.js";
script.id = "salesforce-script";
script.defer = true;
script.onload = function () {
try {
if (!window.embeddedservice_bootstrap) {
console.error("Salesforce Embedded Messaging script did not load.");
return;
}
// Set widget settings for Salesforce chat
window.embeddedservice_bootstrap.settings = {
language: "en_US",
scrt2URL: "https://[YOUR_SALESFORCE_SCRT2_URL]",
hideChatButtonOnLoad: true, // Optionally hide the default chat button
};
// Initialize the Salesforce chat widget using your organization credentials
window.embeddedservice_bootstrap.init(
"[YOUR_ORG_ID]", // Organization ID
"[YOUR_DEPLOYMENT_NAME]", // Deployment/Chat name
"https://[YOUR_SITE_URL]",// Site URL
{
scrt2URL: "https://[YOUR_SALESFORCE_SCRT2_URL]", // SCRT2 URL
}
);
console.log("Salesforce Embedded Messaging initialized successfully.");
} catch (err) {
console.error("Error initializing Salesforce Embedded Messaging: ", err);
}
};
script.onerror = function () {
console.error("Failed to load Salesforce script.");
};
document.head.appendChild(script);
}
// Automatically load the Salesforce widget when the page loads
window.onload = loadSalesforceWidget;
</script>
2. Trigger the Salesforce Chat Handoff
When a user action requires transferring the session to Salesforce chat (for example, clicking a support button), use the following helper function to launch the chat:
<script>
function triggerChat() {
if (window.embeddedservice_bootstrap && window.embeddedservice_bootstrap.utilAPI) {
window.embeddedservice_bootstrap.utilAPI.launchChat();
console.log("Salesforce chat launched.");
} else {
console.error("Salesforce Embedded Messaging is not available.");
}
}
</script>
You can attach this function to any user interaction element (e.g., a button) to hand off the support session to Salesforce chat.
3. Navigate to Next Best Actions in Agent Settings
Configure the Next Best Action as callback function to invoke the triggerChat method to handoff the salesforce chat widget
Summary
- **Prerequisites:**Confirm you have the required Salesforce organization details, correct site URLs, and the necessary network permissions.
- **Dynamic Script Loading:**Use JavaScript to load the Salesforce Embedded Messaging bootstrap script dynamically.
- **Widget Initialization:**Configure the widget with your organization credentials and required settings.
- **Triggering Chat:**Provide a method (such as the
triggerChat()function) to launch the Salesforce chat interface when needed. - Setup Next Best Action under Agent Settings
By following these steps and ensuring that all prerequisites are met, you can implement a seamless handoff to Salesforce Embedded Messaging for enhanced customer support.