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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .