Sample Code:

Aura Component:

<aura:component implements="lightningsnapin:prechatUI">
    <lightningsnapin:prechatAPI aura:id="prechatAPI"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}" />
    <aura:attribute name="startBool" type="Boolean" default="false"/>
    <aura:attribute name="errorBool" type="Boolean" default="false"/>
    <aura:attribute name="firstName" type="Boolean" default="false"/>
    <aura:attribute name="lastName" type="Boolean" default="false"/>
    <aura:attribute name="email" type="Boolean" default="false"/>
    <aura:attribute name="subject" type="Boolean" default="false"/>
    <aura:attribute name="prechatFieldComponents" type="List" description="An array of objects representing the pre-chat fields specified in pre-chat setup."/>
    <h2>Prechat form</h2>
    <div>
        Claims FAQs - <a href="www.infallibletechie.com">Click Here</a><br/>
        Payment FAQs - <a href="www.infallibletechie.com">Click Here</a><br/><br/><br/>
        <ui:button label="Want to Chat with our Agent?" press="{!c.onHelpButtonClick}"></ui:button><br/><br/><br/>
        <aura:if isTrue="{!v.startBool}">
            <div>
                <table cellspacing="10" cellpadding="10" width="100%">
                    <aura:iteration items="{!v.prechatFieldComponents}" var="field">                        
                        <tr>{!field}<br/></tr>   
                    </aura:iteration>
                </table>
                <br/>
                <aura:if isTrue="{!v.errorBool}">
                    <div class="errorMessage">
                        Please fill in all the required fields
                    </div>
                </aura:if>
                <ui:button aura:id="startButton" label="Start Chat" press="{!c.handleStartButtonClick}"/>
            </div>
        </aura:if>
    </div>
</aura:component>

JavaScript:

({
    
    onInit : function( component, event, helper ) {
        
        var prechatFields = component.find( "prechatAPI" ).getPrechatFields();
        var prechatFieldComponentsArray = helper.getPrechatFieldAttributesArray( prechatFields );
        $A.createComponents(
            prechatFieldComponentsArray,
            function( components, status, errorMessage ) {
                if ( status === "SUCCESS" ) {
                    
                    component.set( "v.prechatFieldComponents", components );
                    
                }
            }
        );
        
    },
    
    handleStartButtonClick: function( component, event, helper ) {
        
        helper.onStartButtonClick( component );
        
    },
    
    onHelpButtonClick:function( component ) {
        
        component.set( "v.startBool", "true" );
        
    }
    
})

Helper:

({
    
    fieldLabelToName: {
        "First Name": "FirstName",
        "Last Name": "LastName",
        "Email": "Email",
        "Subject": "Subject"
    },
    
    getPrechatFieldAttributesArray: function( prechatFields ) {
        
        var prechatFieldsInfoArray = [];
 
        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
            };
            
            if ( field.type === "inputSelect" && field.picklistOptions )
                attributes.options = field.picklistOptions;
            
            componentInfoArray.push( attributes );
            prechatFieldsInfoArray.push( componentInfoArray );
            
        });
 
        return prechatFieldsInfoArray;
    },
    
    onStartButtonClick: function( component ) {
        
        var prechatFieldComponents = component.find( "prechatField" );
        var fields;
        fields = this.createFieldsArray( prechatFieldComponents );
        
        if ( component.find( "prechatAPI").validateFields( fields ).valid ) {
            
            if ( fields[ 0 ].value && fields[ 1 ].value && fields[ 2 ].value && fields[ 3 ].value ) {
            
                component.find( "prechatAPI").startChat( fields );
                
            } else {
                
                component.set( "v.errorBool", "true" );
                
            }
            
        } else {
            
            console.warn( "Prechat fields did not pass validation!" );
            
        }
        
    },
 
    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" ) ]
                };
            }.bind( this ) );
            
        } else {
            
            return [];
            
        }
        
    }
    
})

CSS:

.THIS .uiLabel {
    font-weight: bold;
}

.THIS .errorMessage {
    color: red;
    font-weight: bold;
}

Output: