How to send WhatsApp from Lightning Component Salesforce ?


Send WhatsApp from Lightning Component Salesforce

Hi 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: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
({
 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 contact = component.get("v.con");
        var msg = 'Hello '+contact.Name+' '+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();
    }
    
})


Vlog_whatsappCTRL.apxc

1
2
3
4
5
6
public class Vlog_whatsappCTRL {
    @AuraEnabled 
    public static Contact fetchContact(String conId){
        return [Select Id, Name,Phone, MobilePhone FROM Contact where Id=:conId ];
    }
}



Step 2 : Create a Quick Action on Contact named "Send WhatsApp" and connect the component.

Step 3 : Place the button on the Contact page layout.

Output : 







Please check below links also and subscribe if you like the content : 


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 😊

Post a Comment

16 Comments

  1. This is so useful and you explain in very understanding manner

    ReplyDelete
  2. It's a bit interesting, but I see it only as a workaround; a shortcut. It doesn't really send the message from within the platform. It doesn't really "send WhatsApp from Lightning Component"... it just opens another tab asking to download the WhatsApp Application and copies the content into to the application.

    Dependency: Native WhatsApp Application installed on your machine.
    *Sending a message in 3 steps (minimum) after clicking send, isn't cool.

    This is not to say it's not useful. It may be enough to solve some problems.
    Don't get me wrong either. I loved it. It's simple and FREE! And you don't have to save the number as a contact on your phone previous to the action of sending the message.

    It has its low and high points.
    Thank you for the content.

    ReplyDelete
  3. Can we add 2 numbers(like phone and mobile) to contact and send message at once, is it possible through this?

    ReplyDelete
    Replies
    1. Yes you can add phone & mobile number and use the same functionality twice to send message.

      Delete
  4. Great session kapil

    Small doubt,

    Can we enable the whatsapp feature through Whatsapp bussiness API in to salesforce

    If we enabled the Whatsapp feature, is it free or we need to pay for API. Any links that will help

    ReplyDelete
    Replies
    1. Hi, Glad you like it ! Below link might help
      https://help.salesforce.com/articleView?id=messaging_set_up_whatsapp.htm&type=5

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. hello i have one Question.
    we are write html code as a default value.

    ReplyDelete
    Replies
    1. Hello, no we are not using it as default value. The values are coming from object dynamically.

      Delete
    2. Thanks For quick response ,

      But My Question again repeat whenever we create filed long text-area that time we are set default value. okay, In this default value we can not set html code Right??

      Delete
  7. This is so helpful
    I just have a question,do you have a test class or any tips on how I can increase the code's coverage

    ReplyDelete
    Replies
    1. Hi, to increase the test coverage there is no specific way for it. Just make sure that every use case should covered including positive, negative, bulk and single record.

      Delete