SF Learners Hub


How to add Custom Component in the Embedded Chat Service

Share This Post

Follow these Steps to Add a Custom Component when starting an embedded chat on any third-party website.

Step 1: Open Developer Org.

Step 2: Click the Setup cog Icon.

Step 3: Click Developer Console.

Step 4: Click File -> New -> click Lightning Component.

Aura Component: EmbeddedPreChatComponent.cmp

<aura:component implements="lightningsnapin:prechatUI" description="Sample custom pre-chat component for Embedded Chat. Implemented using Aura.">
    <!-- You must implement "lightningsnapin:prechatUI" for this component to appear in the "Pre-chat Component" customization dropdown in the Embedded Service 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}"/>


Aura Component Controller: EmbeddedPreChatComponentController.js

     * 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) {

Aura Component Helper: EmbeddedPreChatComponentHelper.js

	 * 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",
        "Subject": "Subject",
        "Web Name": "SuppliedName",
        "Web Email": "SuppliedEmail"
	 * 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: newLabel,
                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;

Step 5: Setup -> Quick Find Box -> Click Embedded Service Deployment.

Step 6: Click the Dropdown menu of your Embedded Service Deployment and Click View.

Step 7: Click Edit Code Button on the Embedded Service Code Snippet Section at the bottom.

Step 8: Paste this code before the closing body tag (</body>) for each web page. Don’t place the code in your header.

Step 9: Add this CSS code in between the <Style></Style> tag.

<style type='text/css'>
	.embeddedServiceHelpButton .helpButton .uiButton {
		background-color: #005290;
		font-family: "Arial", sans-serif;
	.embeddedServiceHelpButton .helpButton .uiButton:focus {
		outline: 1px solid #005290;

    .embeddedServiceSidebarState.stateBody {
    width: 100%;
    height: 100%;
    text-align: left;
    .embeddedServiceSidebarFeature ul, .embeddedServiceSidebarFeature li{
    max-inline-size: min-content;
    margin-top: 16px;
    position: absolute;
    top: 75%;
    left: 34%;

Step 10: Click Edit Chat Setting.

Step 11: Click the Edit Button of Customize with Lightning Component.

Step 12: Override the Standard Chat Component with Custom Component of Pre-Chat in the Standard Component Section.


I hope you like this blog and if you want any help let me know in the comment section.

Stay tuned, there is way more to come! Follow me on LinkedIn, Instagram, and Twitter. So you won’t miss out on all future articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

The Power of Salesforce Integration

What You’ll Learn What Is Salesforce Integration? Salesforce integration involves combining the data and features of Salesforce with another application, creating a cohesive experience for