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 : 

• Use ZAPIER with Salesforce.
• Create Surveys in Salesforce.
• Line Clamp in Lightning Component.
• How to get Parent Id from encoded URL in Lightning Component ?
• How to add sorting in Lightning Data Table ?
• How to Send SMS from Salesforce ?
• How to Add Star Ratings in Salesforce ? 

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 😊