In some org we use Custom Pre-Chat Component(aura) to start chat on community.

Here's the implemenation

Component Code

<aura:component implements="lightningsnapin:prechatUI" description="Sample custom pre-chat component for Snap-ins. Implemented using Aura.">
<!-- You must implement "lightningsnapin:prechatUI" for this component to appear in the "Pre-chat Component" customization dropdown in the Snap-ins setup -->

<!-- Pre-chat field components to render -->
<aura:attribute name="prechatFieldComponents" type="List" description="An array of objects representing the pre-chat fields specified in pre-chat setup."/>

<!-- Handler for when this component is initialized -->
<aura:handler name="init" value="{!this}" action="{!c.onInit}" />

<!-- For Aura performance -->
<aura:locator target="startButton" description="Pre-chat form submit button."/>

<!-- Contains methods for getting pre-chat fields, starting a chat, and validating fields -->
<lightningsnapin:prechatAPI aura:id="prechatAPI"/>

<h2>Prechat form</h2>
<div class="prechatUI">
    <div class="prechatContent">
        <ul class="fieldsList">
            <!-- Look in the controller's onInit function. This component dynamically creates the pre-chat field components -->
    <div class="startButtonWrapper">
        <ui:button aura:id="startButton" class="startButton" label="{!$Label.LiveAgentPrechat.StartChat}" press="{!c.handleStartButtonClick}"/>

Controller Code

 * On initialization of this component, set the prechatFields attribute and render pre-chat fields.
 * @param cmp - The component for this state.
 * @param evt - The Aura event.
 * @param hlp - The helper for this state.
onInit: function(cmp, evt, hlp) {
    // Get pre-chat fields defined in setup using the prechatAPI component
    var prechatFields = cmp.find("prechatAPI").getPrechatFields();
    // Get pre-chat field types and attributes to be rendered
    var prechatFieldComponentsArray = hlp.getPrechatFieldAttributesArray(prechatFields);

    // Make asynchronous Aura call to create pre-chat field components
        function(components, status, errorMessage) {
            if(status === "SUCCESS") {
                cmp.set("v.prechatFieldComponents", components);

 * Event which fires when start button is clicked in pre-chat
 * @param cmp - The component for this state.
 * @param evt - The Aura event.
 * @param hlp - The helper for this state.
handleStartButtonClick: function(cmp, evt, hlp) {

Helper Code

 * Map of pre-chat field label to pre-chat field name (can be found in Setup)
fieldLabelToName: {
    "First Name": "FirstName",
    "Last Name": "LastName",
    "Email": "Email",
    "Phone": "Phone",
    "Fax": "Fax",
    "Mobile": "MobilePhone",
    "Home Phone": "HomePhone",
    "Other Phone": "OtherPhone",
    "Asst. Phone": "AssistantPhone",
    "Title": "Title",
    "Lead Source": "LeadSource",
    "Assistant": "AssistantName",
    "Department": "Department",
    "Subject": "Subject",
    "Case Reason": "Reason",
    "Type": "Type",
    "Web Company": "SuppliedCompany",
    "Web Phone": "SuppliedPhone",
    "Priority": "Priority",
    "Web Name": "SuppliedName",
    "Web Email": "SuppliedEmail",
    "Company": "Company",
    "Industry": "Industry",
    "Rating": "Rating"

 * Event which fires the function to start a chat request (by accessing the chat API component)
 * @param cmp - The component for this state.
onStartButtonClick: function(cmp) {
    var prechatFieldComponents = cmp.find("prechatField");
    var fields;

    // Make an array of field objects for the library
    fields = this.createFieldsArray(prechatFieldComponents);

    // If the pre-chat fields pass validation, start a chat
    if(cmp.find("prechatAPI").validateFields(fields).valid) {
    } else {
        console.warn("Prechat fields did not pass validation!");

 * Create an array of field objects to start a chat from an array of pre-chat fields
 * @param fields - Array of pre-chat field Objects.
 * @returns An array of field objects.
createFieldsArray: function(fields) {
    if(fields.length) {
        return fields.map(function(fieldCmp) {
            return {
                label: fieldCmp.get("v.label"),
                value: fieldCmp.get("v.value"),
                name: this.fieldLabelToName[fieldCmp.get("v.label")]
    } else {
        return [];

 * Create an array in the format $A.createComponents expects
 * Example:
 * [["componentType", {attributeName: "attributeValue", ...}]]
 * @param prechatFields - Array of pre-chat field Objects.
 * @returns Array that can be passed to $A.createComponents
getPrechatFieldAttributesArray: function(prechatFields) {
    // $A.createComponents first parameter is an array of arrays. Each array contains the type of component being created, and an Object defining the attributes.
    var prechatFieldsInfoArray = [];

    // For each field, prepare the type and attributes to pass to $A.createComponents
    prechatFields.forEach(function(field) {
        var componentName = (field.type === "inputSplitName") ? "inputText" : field.type;
        var componentInfoArray = ["ui:" + componentName];
        var attributes = {
            "aura:id": "prechatField",
            required: field.required,
            label: field.label,
            disabled: field.readOnly,
            maxlength: field.maxLength,
            class: field.className,
            value: field.value

        // Special handling for options for an input:select (picklist) component
        if(field.type === "inputSelect" && field.picklistOptions) attributes.options = field.picklistOptions;

        // Append the attributes Object containing the required attributes to render this pre-chat field

        // Append this componentInfoArray to the fieldAttributesArray

    return prechatFieldsInfoArray;

How can I control contact matching during the prechat? From what I noticed, contact is found with the use of e-mail. In the case of two identical e-mails but different types of contacts when we start chat - to live chat transcript object no contact is added and the contact list is displayed to the agent. I would like to change way of selecting contacts in order to add a specific condition to it. Is it possible using the pre chat in aura component?

Any suggestions will be welcome.

1 Answer 1


Solved. For all who have this problem, I put a link to the documentation:

Create a Snippet Settings File to Use Snippet Settings in a Community

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.