Share Content On WhatsApp Using Lightning | Salesforce Developers Blog

WhatsApp is one of the most popular messaging apps, with one-third of world’s population is using Whatsapp on their smartphones. That is why I thought to implement a functionality by which user can share content on WhatsApp. I implemented this with Salesforce1 Lightning.

I got this idea from Query Rain .

In this demo I am showing you user’s feeds with WhatsApp Share button. When you click on this button it will ask you to share your specific feed with any contact in your mobile device. When complete it will look like this:

Here is the complete code let’s walk through it :


public class FeedItemController{
    public static List getFeedItems(){
        return [SELECT Body FROM FeedItem WHERE InsertedById =: UserInfo.getUserId() ORDER BY CreatedDate DESC LIMIT 10 ];

In this controller I have created a method getFeedItems() to return feeds of current logged in user.


<aura:component controller="bklightning.FeedItemController" implements="force:appHostable">

    <ltng:require styles="/resource/whatsappfiles/whatsappfiles/bootstrap,

    <aura:attribute name="feeds" type="FeedItem[]" />

    	<h1>Share Your Feeds</h1>
    <div id="msg">
    	Please share this article in mobile device
    <aura:iteration items="{!v.feeds}" var="feed">
            	<a data-text="{!feed.Body}">Share</a>

Resources for this Lightning Component could be found here jQuery , Bootstrap.


    afterLoaded : function(component, event, helper) {


    rerender : function(cmp, helper){

In “WhatsAppLightningComponentRenderer.js” I am calling whatsAppJS() method of Helper.I am doing this to initialize jQuery variables and click events after files and records get loaded.This Renderer will override default rendering of “WhatsAppLightningComponent.cmp” component.


	loadFeeds : function(component) {
		var action = component.get("c.getFeedItems");
        action.setCallback(this, function(a) {
            component.set("v.feeds", a.getReturnValue());

    whatsAppJS : function(component){
        var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i);
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i);
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            Opera: function() {
                return navigator.userAgent.match(/Opera Mini/i);
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i);
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

            if( isMobile.any() ) {
 				var text = jQuery(this).attr("data-text");
                var message = encodeURIComponent(text);
                var whatsapp_url = "whatsapp://send?text=" + message;
                window.location.href = whatsapp_url;
            } else {

In WhatsAppLightningComponentHelper.js whatsAppJs() method is used to share content on Your WhatsApp. It can support any mobile device but we know that Lightning app is not supporting Android and other devices so it will not work for them. I did not change code because I hope Lightning will support other Mobile Devices in future.

Please change Namespace to your Namespace before running this code.Thanks.

About The Author

Hi my name is Balkishan Kachawa.I am a Certified Developer working as Salesforce Technical Consultant.
I have 4+ years of experience in implementations.I am experienced in various technologies like PHP,JAVA,J2EE,jQuery,Angular.Js,BootStrap.I had worked on various APIs(like Google,Yahoo,Drop Box and Many others) with

Follow me here:


Stay up to date with the latest news from the Salesforce Developers Blog