Skip to main content

Filter any report by current Logged In User in Salesforce | Salesforce Tutorials | Salesforce Development

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials


Hello folks,

In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 

Prerequisite : 

Create a custom object WhatsApp__c

Create custom fields as shown below : 



Please follow the code below : 


WhatsAppComponent
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<aura:component controller="Vlog_whatsappCTRL" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<aura:attribute name="recordId" type="String" />
    <aura:attribute name="con" type="Contact" />
    <aura:attribute name="msg" type="String" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="WhatsApp">
                        <img src="{!$Resource.whatsapp}" style="width:60px"/>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="WhatsApp">
                            <span>WhatsApp</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">Please enter text in body and click on send button.</div>
    </article>
    <div class="row">
        <lightning:textarea aura:id="myText" name="whatsappText" label="Message" placeholder="type here..." value="{!v.msg}"/>
        <lightning:button label="Send" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendWhatsApp }" />
    </div>
</aura:component>


WhatsAppController.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
({
	doInit : function(component, event, helper) {
        var action = component.get("c.fetchContact");
         action.setParams({
            "conId" : component.get("v.recordId").toString()
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                component.set("v.con", result);
            }
        });
        $A.enqueueAction(action);
	},
    sendWhatsApp : function(component, event, helper){
        var action = component.get("c.saveChat");
         action.setParams({
            "conId" : component.get("v.recordId").toString(),
             "chat" : component.find("myText").get("v.value")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
            }
        });
        $A.enqueueAction(action);

        
        var contact = component.get("v.con");
        var msg = component.find("myText").get("v.value");
        var url= "https://wa.me/91"+contact.MobilePhone+"?text="+msg;
        window.open(url, '_blank');
        $A.get("e.force:closeQuickAction").fire();
    }
    
})

WhatsAppApex
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
public class Vlog_whatsappCTRL {
    @AuraEnabled 
    public static Contact fetchContact(String conId){
        return [Select Id, Name,Phone, MobilePhone FROM Contact where Id=:conId ];
    }
    
    @AuraEnabled
    public static String saveChat(String conId, String chat){
        WhatsApp__c wa = new WhatsApp__c();
        wa.WhatsAppText__c = chat;
        wa.ContactId__c = conId;
        wa.WhatsAppDate__c = System.Datetime.now();
        insert wa;
        return wa.Id;
    }
}



Follow below code to display chat component 😀

Component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<aura:component controller="LightningDataTableCTRL" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="pageNumber" type="Integer" default="1" />
    <aura:attribute name="pageSize" type="Integer" default="10" />
    <aura:attribute name="isLastPage" type="Boolean" default="false" />
    <aura:attribute name="totalPages" type="Integer"/>
    <aura:attribute name="totalRecords" type="Integer"  />
	<aura:attribute name="hasRecords" type="Boolean" default="false" />
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    
    <lightning:layout multipleRows="true" horizontalAlign="center">
        <lightning:layoutItem padding="around-small" size="12">
            <lightning:datatable keyField="Name" data="{! v.recordList}" 
                                 class="myCss"
                                 columns="{! v.columns}"
                                 hideCheckboxColumn="true"
                                 />
        </lightning:layoutItem>
        <aura:if isTrue="{!v.totalPages>1}">
            <lightning:layoutItem padding="around-small" flexibility="auto">
                <lightning:button label="First" iconName="utility:chevronleft" iconPosition="left"
                                  onclick="{!c.onFirst}" disabled="{! v.pageNumber==1}"/>
                <lightning:button label="Prev" iconName="utility:chevronleft" iconPosition="left"
                                  onclick="{!c.onPrev}" disabled="{! v.pageNumber == 1}"/>
                <span class="slds-p-horizontal_small">
                    Page {!v.pageNumber} | Showing records from {!((v.pageNumber-1)*v.pageSize)+1} to {!if(v.totalPages==v.pageNumber, v.totalRecords, (((v.pageNumber-1)*v.pageSize)+v.pageSize))}
                </span>
                <lightning:button label="Next" iconName="utility:chevronright" iconPosition="right" 
                                  disabled="{! v.isLastPage}" onclick="{!c.onNext}"/>
                <lightning:button label="Last" iconName="utility:chevronright" iconPosition="right" 
                                  disabled="{!v.isLastPage}" onclick="{!c.onLast}"/>
            </lightning:layoutItem>
            
        </aura:if>
        
    </lightning:layout>
</aura:component>


Controller.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
({
    doInit : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Name', fieldName:'Name',sortable:true,type:'text', initialWidth: 200},
            {label: 'Date Time', fieldName:'WhatsAppDate__c',sortable:true,type:'text', initialWidth: 300},
            {label: 'Chat', fieldName:'WhatsAppText__c',sortable:true,type:'text', initialWidth: 400}
        ]);
        helper.getChats(component, helper);
        helper.getChatsCount(component, helper);
    },
   
    onFirst: function(component, event, helper) {
        var totalPages = component.get("v.totalPages");
        component.set("v.isLastPage", false);
        component.set("v.pageNumber", 1);
        helper.getChats(component, helper);     
    },
    onPrev: function(component, event, helper) {
        var pageNumber = component.get("v.pageNumber");
        var totalPages = component.get("v.totalPages");
        if(pageNumber <= totalPages){
            component.set("v.isLastPage", false);
            component.set("v.pageNumber", pageNumber-1);
            helper.getChats(component, helper);     
        } 
    },
    onNext: function(component, event, helper) {
        var pageNumber = component.get("v.pageNumber");
        var totalPages = component.get("v.totalPages");
        if(totalPages > pageNumber){
            component.set("v.pageNumber", pageNumber+1);
            helper.getChats(component, helper);
            if(pageNumber==(totalPages-1)){
                component.set("v.isLastPage", true); 
            }
        }
    },
    onLast: function(component, event, helper) {
        var lastPage = component.get("v.totalPages");
        component.set("v.isLastPage", true); 
        component.set("v.pageNumber", lastPage);
        helper.getChats(component, helper);
    },
    
})


Helper.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
({
    getChats : function(component, helper) {
        var action = component.get("c.getChatsList");
        action.setParams({
            "pageSize" : component.get("v.pageSize").toString(),
            "pageNumber" : component.get("v.pageNumber").toString(),
            "conId" :  component.get("v.recordId").toString()
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            var data;
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                component.set("v.recordList", result);
            }
        });
        $A.enqueueAction(action);
    },
    getChatsCount: function(component, helper) {
        const action = component.get("c.getChatsCount");
        // Register the callback function
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS'){
                var result = response.getReturnValue();
                var pageSize=component.get("v.pageSize");
                component.set("v.totalRecords", result)
                var totalPages = Math.ceil(result/pageSize);
                component.set("v.totalPages",totalPages);
            }
        });
        $A.enqueueAction(action);
    },
    
})


Style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.THIS {
}

.THIS .myCss thead th span{
    background-color: #3258a8;
    color: white;
}
.THIS .myCss td {
    background-color: #fffbdb;
    color: black;
}
.THIS .myCss tr {
    background-color: #fffbdb;
    color: black;
}
.THIS .myCss td:hover {
    background-color: #ffed63 !important;
    color: black !important;
    font-weight:bold !important;
}


Apex Controller
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public class LightningDataTableCTRL {
    @AuraEnabled
    public static list<WhatsApp__c> getChatsList(String pageSize, String pageNumber, String conId){
        String soql = 'Select Name, FORMAT(WhatsAppDate__c), WhatsAppText__c FROM WhatsApp__c where ContactId__c=\''+conId+'\' Order By WhatsAppDate__c';
        system.debug('###SOQL : '+soql);
        if(pageSize==null){
            pageSize='10';
        }
        if(pageNumber==null){
            pageNumber='1';
        }
        Integer ps = Integer.valueOf(pageSize);
        Integer pn = Integer.valueOf(pageNumber)-1;
        soql += ' limit '+ps+' OFFSET '+(ps*pn);
         system.debug('### Complete SOQL : '+soql);
        List<WhatsApp__c> accList= Database.Query(soql);
        if(accList != null && accList.size()>0){
		return accList;
        }
        else{return null;}
    }
     @AuraEnabled
    public static Integer getChatsCount(){
        String soqlStr = 'Select COUNT() From WhatsApp__c';
        Integer recCount= database.countQuery(soqlStr);
        return recCount;
    }
}



Checkout the vlog also !


If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 


Comments

  1. Hello, THANKs for Code. but i am getting error while saving .cmp

    Failed to save WhatsAppComponent.cmp: resource whatsapp cannot be found in namespace .: Source

    ReplyDelete
    Replies
    1. Hi, could you check for whatsapp word on the particular line number once? Or you could paste your complete code here and let me know the line number of error.

      Delete
    2. Hello Kapil, THANK YOU. Awesome work done by you.i fixed issue...can you please tell me How to put chat history in contact

      Delete
    3. Hi, edit the contact page and create a new section in it. Then add your chat history component in that section as mentioned in the tutorial below : https://youtu.be/QuzJok7JqMI

      Delete
  2. How to put chat history in contact

    ReplyDelete
    Replies
    1. Hi, edit the contact page and create a new section in it. Then add your chat history component in that section as mentioned in the tutorial below : https://youtu.be/QuzJok7JqMI

      Delete
  3. Hi kapil can you tell me how to do inbound messaging using whatsapp

    ReplyDelete
  4. Alsoi tried out by writing triggers on messaging user and messaging sessions object one by one to check , but nothing is happening :(

    ReplyDelete

Post a Comment

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …

Modal Popup in Lightning Component Salesforce

How to display modal popup on button's click in Lightning Component ?  To display modal popup in your component first create a button in your Component which will be used to show & hide modal popup.  
1 2 3 4<lightning:button variant="brand" label="Click to Open" title="Click to Open" onclick="{!c.showModel}"/> After that lets add a boolean type attribute above button tag to storeTrue & False value.1<aura:attribute name="showModal" type="boolean"default="false"/>
Copy and paste below code after button in your component. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35<aura:if isTrue="{!v.showModal}"><section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby=…