Qualified and its client-side API can be used for programmatic support hand-offs. When used and configured properly, your prospects will continue to receive a best-in-class buying experience using Qualified while existing customers will experience a seamless handoff to your support chat tool of choice.
This article provides examples of leveraging the client-side API to create a more programmatic hand-off between Qualified and common support tools. Please note: support handoffs are not a supported feature of the Pipeline Cloud platform. The below code are for example only. Please work with your web team to troubleshoot custom code.
Examples
First, see below for an example of how you can use Qualified’s API response to populate the pre-chat form in Salesforce’s LiveAgent:
<style type='text/css'>
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #606FF0;
font-family: "Georgia", sans-serif;
}
.embeddedServiceHelpButton .helpButton .uiButton:focus {
outline: 1px solid #606FF0;
}
</style>
<input type="hidden" name="liveagent.prechat:CaseStatus" value="New" />
<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.storageDomain = 'YOURDOMAIN.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
// Providing context to an Agent using Service Cloud Chat from information gathered by Qualified requires using Prechat Forms and Prechat Form Details
// For an in-depth walkthrough on using Prechat and extra Prechat, see: https://help.salesforce.com/s/articleView?id=000383795&type=1
// If you have built a dedicated component or page for your Prechat form (not shown in this example), see: https://developer.salesforce.com/docs/atlas.en-us.live_agent_dev.meta/live_agent_dev/live_agent_creating_records_prechat.htm
qualified('getIdentity', function(visitorInfo) {
console.log("Here is the information from the Qualified getIdentity API call: " + visitorInfo);
// Sets the auto-population of pre-chat form fields that exist in our LiveAgent prechat form
embedded_svc.settings.prepopulatedPrechatFields = {
FirstName: "SampleFirstName", // example prefilled field
LastName: "SampleLastName",
Email: visitorInfo.field_values['email'], // example value pulled from Qualified's getIdentity result. Be sure to check the 'email' example matches the respective API field name in your Qualified Visitor Fields
Subject: "Sample prefilled subject"
};
// These Settings are used to find the appropriate fields where mapped values are placed.
embedded_svc.settings.extraPrechatInfo = [{
"entityName": "Contact",
"showOnCreate": true,
"linkToEntityName": "Case",
"linkToEntityField": "ContactId",
"saveToTranscript": "Contact",
"entityFieldMaps": [
{ "isExactMatch": true, "fieldName": "FirstName", "doCreate": true, "doFind": true, "label": "First Name" },
{ "isExactMatch": true, "fieldName": "LastName", "doCreate": true, "doFind": true, "label": "Last Name" },
{ "isExactMatch": true, "fieldName": "Email", "doCreate": true, "doFind": true, "label": "Email" }
]
},
{
"entityName": "Case",
"showOnCreate": true,
"entityFieldMaps": [
{ "isExactMatch": false, "fieldName": "Subject", "doCreate": true, "doFind": false, "label": "Subject" },
{ "isExactMatch": false, "fieldName": "Description", "doCreate": true, "doFind": false, "label": "Description" },
{ "isExactMatch": false, "fieldName": "Status", "doCreate": true, "doFind": false, "label": "Status" },
{ "isExactMatch": false, "fieldName": "CaseCategory", "doCreate": true, "doFind": false, "label": "Case Category" }
]
}
];
// This section provide data to Salesforce and the Agent without requiring direct inputs from the visitor on the Prechat Form
// The label names must match the Field Label in the Salesforce Object exactly
// These values will overwrite whatever is provided in the prepopulated Chat Fields (seen above) as well as the values populated by the visitor in the prechat form
embedded_svc.settings.extraPrechatFormDetails = [{
"label": "Email",
"value": visitorInfo.field_values['email'],
"displayToAgent": true
}, {
"label": "Subject",
"value": "Sample subject - overridden!",
"displayToAgent": true
}, {
"label": "Description",
"value": "Description of the issue passed in by Qualified.",
"displayToAgent": true
}, {
"label": "Case Category",
"value": "Messenger",
"displayToAgent": true
}, {
"label": "Status",
"value": "Completed",
"displayToAgent": false
}];
});
embedded_svc.settings.enabledFeatures = ['LiveAgent'];
embedded_svc.settings.entryFeature = 'LiveAgent';
embedded_svc.init(
'https://XXXXXXXX.my.salesforce.com',
'https://XXXXXXXX.my.site.com/XXXXXXXX',
gslbBaseURL,
'XXXXXXXX',
'XXXXXXXX', {
baseLiveAgentContentURL: 'https://c.la5-c1cs-ia5.salesforceliveagent.com/content',
deploymentId: 'XXXXXXXX',
buttonId: 'XXXXXXXX',
baseLiveAgentURL: 'https://XXXXXXXX.salesforceliveagent.com/chat',
eswLiveAgentDevName: 'XXXXXXXX',
isOfflineSupportEnabled: true
}
);
};
if (!window.embedded_svc) {
var s = document.createElement('script');
s.setAttribute('src', 'https://XXXXXXXX.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>In this code, we make the Qualified API call getIdentity to retrieve data about the visitor. The response provides the data that you have made available from your Qualified instance. Not seeing a value that you expect? Make sure you have it turned on in your Qualified Visitor Field configuration!
Next, we use the extracted data to populate the relevant fields in the Embedded Service Chat pre-chat form fields (embedded_svc.settings.prepopulatedPrechatFields). The values in this section there will be displayed to the visitor in the LiveAgent Prechat Form.
Then, we provide hidden fields to the Embedded Service Chat to any of the objects that we've located and related to this visitor (e.g. the Contact, Case, Account, etc.) using the Prechat Form Details (embedded_svc.settings.extraPrechatFormDetails).
Note: This method works if you are using the native Embedded Service Chat PreChat Form. If you have built your own PreChat form that you're using to collect visitor information before talking to an Agent, the related Salesforce documentation can be found here.
Here’s an example of how you can use Qualified’s API response to update an Intercom user’s name using Intercom’s Javascript API:
// First, make the Qualified API call to retrieve data about the visitor
qualified(‘getIdentity’, function(data) {
// Extract the relevant fields from the response data
const name = data.field_values.name;
// Set up the Intercom settings object with your app ID and user data
const intercomSettings = {
app_id: ‘YOUR_APP_ID’,
name: name,
email: data.field_values.email,
phone: data.field_values.phone,
custom_attributes: {
issue: data.field_values.issue,
tier: data.field_values.tier
}
};
// Use the Intercom ‘boot’ method to initialize the Intercom Messenger
Intercom(‘boot’, intercomSettings);
// Use the Intercom ‘update’ method to update the user’s name
Intercom(‘update’, { name: name });
});Much like in the example above, we first make the initial Qualified API call.
Next, we set up the intercomSettings object with your Intercom app ID and the extracted user data. This object is passed to the Intercom(‘boot’, intercomSettings) method to initialize the Intercom Messenger.
Finally, we use the Intercom(‘update’, { name: name }) method to update the user’s name in Intercom. Note that you’ll need to ensure that the Intercom Javascript API is properly loaded and accessible in your code.
.svg)
