+ Start a Discussion
Bhavesh Jain 41Bhavesh Jain 41 

custom prechat and post chat form snap-ins community

hey all,
I am stuck in part one where I need to override the pre chat form in snap-ins with the fields defined in contact object
I have created a lightning component for the pre chat form and over-ridden that in a snap-ins setting and the prechat form loads just fine however when I click on start chat it does not fire the chat:

Below is the code:

    <aura:attribute name="userId" access="PRIVATE" type="string" default="-"/>
    <aura:attribute name="FirstName" access="PRIVATE" type="string" />
    <aura:attribute name="LastName" access="PRIVATE" type="string" />
    <aura:attribute name="Email" access="PRIVATE" type="string" />
    <aura:attribute name="Phone" access="PRIVATE" type="string" />
    <aura:attribute name="Salutation" access="PRIVATE" type="string" /> 
    <aura:attribute name="Organization_Name__c" access="PRIVATE" type="string" />.
   <!-- <aura:attribute name="OrganizationType" access="PRIVATE" type="string" /> -->
    <!-- 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="init" value="{!this}" action="{!c.doInit}"/>
    <aura:renderIf isTrue="{!v.userId}">
            <lightning:input type="text" value="{!v.Salutation}" label="Salutation *"/> 
            <lightning:input type="text" value="{!v.FirstName}" label="Name *"/>
            <lightning:input type="text" value="{!v.LastName}" label="Lastname *"/>
            <lightning:input type="text" value="{!v.Email}" label="Email *"/>
            <lightning:input type="text" value="{!v.Phone}" label="Phone *"/>
            <lightning:input type="text" value="{!v.Organization_Name__c}" label="Organisation Name *"/>
        <!--    <lightning:input type="text" value="{!v.OrganizationType}" label="Organization Type *"/> -->
        <aura:set attribute="else">
              <lightning:input type="text" value="" label="Salutation *"/> 
            <lightning:input type="text" value="" label="Name *"/>
            <lightning:input type="text" value="" label="Lastname *"/>
            <lightning:input type="text" value="" label="Email *"/>
            <lightning:input type="text" value="" label="Phone *"/>
            <lightning:input type="text" value="" label="Organisation Name *"/>
        <!--    <lightning:input type="text" value="" label="Organization Type *"/> -->
     <lightning:button label="Start chat!" onclick="{!c.onStartButtonClick}"/>

Client side js:
doInit: function(component, event, helper) {
        var prechatFields = component.find("prechatAPI").getPrechatFields();
        var action = component.get("c.getCurrentUser");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = JSON.parse(response.getReturnValue());
                console.log(result, embedded_svc);
                component.set('v.userId', result.userId);
                    component.set('v.Salutation', result.Salutation);
                    component.set('v.FirstName', result.FirstName);
                    component.set('v.LastName', result.LastName);
                    component.set('v.Email', result.Email);
                    component.set('v.Phone', result.Phone);
                    component.set('v.Organization_Name__c', result.Organization_Name__c);
                    //component.set('v.OrganizationType', result.OrganizationType);
                    helper.startChat(component, event, helper);
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                } else {
                    console.log("Unknown error");
    onStartButtonClick: function(component, event, helper) {
        //handling errors

       // if(!component.get('v.FirstName')
       //   || !component.get('v.LastName')
        //   || !component.get('v.Email')
        //|| !component.get('v.Salutation')
        // || !component.get('v.Phone')
        //  || !component.get('v.Organization_Name__c')) return alert('Missing fields.');
        helper.startChat(component, event, helper);

Server side controller:
public class Bot_PreChatCmpCnt {
    public static String getCurrentUser(){
        Map<String,Object> output = new Map<String,Object>();
        User u = [Select Username, FirstName, LastName, Email, contactId From User Where Id = :UserInfo.getUserId()];
        if(u.contactId != NULL)
        contact c = [Select Id, Salutation, FirstName, LastName, Email, Phone, Contact_Type__c, Organization_Name__c From Contact Where Id =:u.ContactId];
        if(c.Id != null){
            output.put('userId', u.UserName);
            output.put('FirstName', c.FirstName);
            output.put('LastName', c.LastName);
            output.put('Email', c.Email);
            output.put('Salutation', c.Salutation);
            output.put('Phone', c.Phone);
            output.put('Organization_Name__c', c.Organization_Name__c);
            //output.put('OrganizationType', c.Contact_Type__c);
            output.put('userId', '');
        return JSON.serialize(output);

    startChat: function(component, event, helper){
        var fields = [
               label: 'Salutation',
               name: 'Salutation',
               value: component.get('v.Salutation')
            } ,
                label: 'FirstName',
                name: 'FirstName',
                value: component.get('v.firstName')
            } ,
                label: 'LastName',
                name: 'LastName',
                value: component.get('v.LastName')
            }  ,
                label: 'Email',
                name: 'Email',
                value: component.get('v.Email')
                label: 'Username',
                name: 'Username__c',
                value: component.get('v.userId'),
                label: 'Phone',
                name: 'Phone',
                value: component.get('v.Phone')
            } ,
                label: 'Organization Name',
                name: 'Organization_Name__c',
                value: component.get('v.Organization_Name__c')
       // try{
        if(component.find("prechatAPI").validateFields(fields).valid) {
       else {
            console.warn("Prechat fields did not pass validation!");
       // }
        //    console.log(e);
       // }
Raj VakatiRaj Vakati
Refer this links

Bhavesh Jain 41Bhavesh Jain 41
Hey Raj,

I tried both the links it works like a charm however I have to show Salutation field, and couple of more custom fields that are not coming in the prechat form setup while setting up snap-ins that is where I am getting stuck