Embedded Service Chat for Web Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Custom Pre-Chat Component Sample Using JavaScript
The following code sample contains examples of the component, controller, and helper
code for a custom pre-chat component using plain JavaScript.
This component:
- Uses Javascript to create an email input field
- Uses minimal Aura to get pre-chat fields from Embedded Service setup in a render handler
- Provides an example of getting pre-chat field values to pass to the startChat Aura method on lightningsnapin:prechatAPI
Component Code
1<aura:component
2 description="Sample pre-chat component that uses Aura only when absolutely necessary"
3 implements="lightningsnapin:prechatUI">
4
5 <!-- Contains methods for getting pre-chat fields, starting a chat, and validating fields -->
6 <lightningsnapin:prechatAPI aura:id="prechatAPI"/>
7
8 <!-- After this component has rendered, call the controller's onRender function -->
9 <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
10
11 <div class="prechatUI">
12 Prechat Form
13 <div class="prechatFields">
14 <!-- Add pre-chat field HTML elements in the controller's onInit function -->
15 </div>
16 <button class="startChatButton" onclick="{!c.onStartButtonClick}">
17 Start Chat
18 </button>
19 </div>
20
21</aura:component>Controller Code
1({
2 /**
3 * After this component has rendered, create an email input field
4 *
5 * @param component - This prechat UI component.
6 * @param event - The Aura event.
7 * @param helper - This component's helper.
8 */
9 onRender: function(component, event, helper) {
10 // Get array of pre-chat fields defined in Setup using the prechatAPI component
11 var prechatFields = component.find("prechatAPI").getPrechatFields();
12 // This example renders only the email field using the field info that comes back from prechatAPI getPrechatFields()
13 var emailField = prechatFields.find(function(field) {
14 return field.type === "inputEmail";
15 });
16
17 // Append an input element to the prechatForm div.
18 helper.renderEmailField(emailField);
19 },
20
21 /**
22 * Handler for when the start chat button is clicked
23 *
24 * @param component - This prechat UI component.
25 * @param event - The Aura event.
26 * @param helper - This component's helper.
27 */
28 onStartButtonClick: function(component, event, helper) {
29 var prechatInfo = helper.createStartChatDataArray();
30
31 if(component.find("prechatAPI").validateFields(prechatInfo).valid) {
32 component.find("prechatAPI").startChat(prechatInfo);
33 } else {
34 // Show some error
35 }
36 }
37});Helper Code
1({
2 /**
3 * Create an HTML input element, set necessary attributes, add the element to the DOM
4 *
5 * @param emailField - Email pre-chat field object with attributes needed to render
6 */
7 renderEmailField: function(emailField) {
8 // Dynamically create input HTML element
9 var input = document.createElement("input");
10
11 // Set general attributes
12 input.type = "email";
13 input.class = emailField.label;
14 input.placeholder = "Your email here.";
15
16 // Set attributes required for starting a chat
17 input.name = emailField.name;
18 input.label = emailField.label;
19
20 // Add email input to the DOM
21 document.querySelector(".prechatFields").appendChild(input);
22 },
23
24 /**
25 * Create an array of data to pass to the prechatAPI component's startChat function
26 */
27 createStartChatDataArray: function() {
28 var input = document.querySelector(".prechatFields").childNodes[0];
29 var info = {
30 name: input.name,
31 label: input.label,
32 value: input.value
33 };
34
35 return [info];
36 }
37});The sample creates the following unstyled pre-chat form.