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
<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 Code
({
/**
* After this component has rendered, create an email input field
*
* @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();
// This example renders only the email field using the field info that comes back from prechatAPI getPrechatFields()
var emailField = prechatFields.find(function(field) {
return field.type === "inputEmail";
});
// Append an input element to the prechatForm div.
helper.renderEmailField(emailField);
},
/**
* 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 {
// Show some error
}
}
});
Helper Code
({
/**
* Create an HTML input element, set necessary attributes, add the element to the DOM
*
* @param emailField - Email pre-chat field object with attributes needed to render
*/
renderEmailField: function(emailField) {
// Dynamically create input HTML element
var input = document.createElement("input");
// Set general attributes
input.type = "email";
input.class = emailField.label;
input.placeholder = "Your email here.";
// Set attributes required for starting a chat
input.name = emailField.name;
input.label = emailField.label;
// 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() {
var input = document.querySelector(".prechatFields").childNodes[0];
var info = {
name: input.name,
label: input.label,
value: input.value
};
return [info];
}
});
The sample creates the following unstyled pre-chat form.