Custom Pre-Chat Component Sample Using JavaScript

({
	/**
	 * 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
		}
	}
});

({
	/**
	 * 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];
	}
});