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.

The legacy chat product is in maintenance-only mode, and we won't continue to build new features. You can continue to use it, but we no longer recommend that you implement new chat channels. Instead, you can modernize your customer communication with Messaging for In-App and Web. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time.

Important

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

This code sample is an example and doesn’t create a functioning pre-chat form on its own. You can use this sample as a starting point, but you must add more pre-chat fields and include your own styling.

Important

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.Preview of the unstyled pre-chat form using this code sample.