Add Snap-ins Chat to your website so customers can quickly get answers to their questions by chatting with an agent while browsing your site. Snap-ins Chat uses a Live Agent deployment that you can quickly configure. Then, simply add the chat code to the web pages where you want the chat snap-in to be available. When agents chat with customers via Snap-ins Chat, the agents use Live Agent in their console. In this post, we will see how to create a pre-chat form by using the lightning components. You can able to Customize the fields, layout, buttons, images, validation, or any other part of the user interface for pre-chat using a custom Lightning component by using Pre chat API. I am assuming that you have live agent deployments is available to use the snap-ins
prerequisites
To set up Snap-ins Chat, your org must meet these prerequisites:
- Lightning Experience must be enabled to set up snap-ins
- Service Cloud License
- Live Agent License
- Live Agent must be enabled in your Org
- A Live Agent chat button and a Live Agent deployment must be set up and available in your Org
- A Salesforce Community (preferable) or a Salesforce Site must be set up on your org and available for guest user access.
Create a Snap-Ins Deployment
we need to create a Snap-in deployment for each snap-in that you’re using on your website. In this example, the Snap-ins Chat setup uses a Salesforce Community. From Setup, find Snap-ins and click New Deployment and enter details as shown below In the Site Endpoint menu, select a Salesforce community or Salesforce Site where you want to host the snap-ins.
After saving the snap-ins deployment, you need to enable the live agent setting. Go to the snap-ins which you configured and select view. In the Snap-ins configuration page, go to the Live Agent settings section and click Start.
- In the Live Agent Deployment menu, select the Live Agent configuration that you want to use with the chat snap-in from the dropdown list.
- In the Live Agent Button menu, select the Live Agent chat button or automated invitation that you want to use with the chat snap-in from the dropdown list.
- Select Show queue position if you want to display the customer’s place in line while they wait for a support agent. Make sure that the Live Agent chat button you selected has Enable Queue selected in your Live Agent chat button settings.
- Click Save.
To set up the pre-chat form
From the snap-in deployment, you can able to add the pre-chat form that will be able to the user before the chat starts.
- In the Pre-chat section, move the radio button to Active.
- Click Edit.
- Select the use case for the pre-chat form.
<aura:component
description="Sample pre-chat component that uses Aura only when absolutely necessary"
implements="lightningsnapin:prechatUI">
<!-- Contains methods for getting pre-chat fields, starting a chat, and validating fields -->
<lightningsnapin:prechatAPI aura:id="prechatAPI"/>
<!-- After this component has rendered, call the controller's onRender function -->
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
<div class="prechatUI">
Prechat Form
<div class="prechatFields">
<!-- Add pre-chat field HTML elements in the controller's onInit function -->
</div>
<button class="startChatButton" onclick="{!c.onStartButtonClick}">
Start Chat
</button>
</div>
</aura:component>
Controller.js
({
/**
* After this component has rendered, create an input fields
*
* @param component - This prechat UI component.
* @param event - The Aura event.
* @param helper - This component's helper.
*/
onRender: function(component, event, helper) {
// Get array of pre-chat fields defined in Setup using the prechatAPI component
var prechatFields = component.find("prechatAPI").getPrechatFields();
console.log('prechatFields'+JSON.stringify(prechatFields));
// Append an input element to the prechatForm div.
helper.renderField(prechatFields);
},
/**
* Handler for when the start chat button is clicked
*
* @param component - This prechat UI component.
* @param event - The Aura event.
* @param helper - This component's helper.
*/
onStartButtonClick: function(component, event, helper) {
var prechatInfo = helper.createStartChatDataArray();
if(component.find("prechatAPI").validateFields(prechatInfo).valid) {
component.find("prechatAPI").startChat(prechatInfo);
} else {
console.log('error'+component);
}
}
});
helper.js
({
/**
* Create an HTML input element, set necessary attributes, add the element to the DOM
*
* @param fields - pre-chat fields object with attributes needed to render
*/
renderField: function(fields) {
// Dynamically create input HTML element
//
fields.forEach(function(field) {
//console.log(field);
console.log('field---'+field);
var componentName = (field.type === "inputSplitName") ? "inputText" : field.type;
var input = document.createElement("input");
// Set general attributes
input.type = componentName;
input.class = field.label;
input.placeholder = "Your"+field.label+" here.";
// Set attributes required for starting a chat
input.name = field.name;
input.label = field.label;
input.options = field.picklistOptions
input.required= field.required;
// Add email input to the DOM
document.querySelector(".prechatFields").appendChild(input);
})
},
/**
* Create an array of data to pass to the prechatAPI component's startChat function
*/
createStartChatDataArray: function() {
console.log('input');
var inputs = document.querySelector(".prechatFields").childNodes;
console.log('input');
var infos=[] ;
for (var i = 0; i < inputs.length; i++) {
var info = {
name: inputs[i].name,
label: inputs[i].label,
value: inputs[i].value
};
infos.push(info) ;
}
return infos;
}
});
Now override the Pre Chat component with this lightning component.
Adding Your Snap-In to a Website
Now go to the community builder and add the out of box lightning component Snap-ins to the builder as show below.
Here we are configuring the Snap-ins Chat deployment and configure as shown below.
Add Your Website to the CORS Whitelist
Add the URLs of the web pages where you intend to add the snap-in to the CORS whitelist in your Org. The web page where you add the snap-in is the page that customers use to access chat.
Testing
You can able to see the Pre chat form from the community as shown below . Before going to snap-ins, make sure at least one agent in on live agent with available status.
Beyond Cloud 