Dear users, with the new WhatsApp Web update, a conflict prevented the app from loading. We fixed it and submitted a new version to the Chrome Store, and we're waiting for Google approval. Please stand by!
 
Install Now

As we explained in a previous post, WA Web Plus is able to act as a smart agent on your behalf, that processes the incoming messages and do custom actions with them; in this post, we will cover the technical details that help you setup your first Webhook with only a few lines of code!

The first thing to know is that we currently support only Firebase endpoints, Firebase is a platform managed by Google now, it provides the ability to host NodeJS applications where you can put your Webhook codes, or connect to your custom server or cloud system.

Webhook Dataflow

Webhooks are triggered by Smart Replies, when a user sends a specific keyword to your WhatsApp chat, a Smart Reply catches it, and sends all the message information to a previously selected Webhook that will process it and return the reponse to the sender.

Why Firebase?

Due to security restrictions, a static domain should be whitelisted in the extension in order to allow WA Web Plus to send the data to it, we chose Firebase becuase it is easy to setup, and provides a free service, or a very cheap service if you go over qouta. So we’ve whitelisted “web.app” subdomains to allow users host their own Webhook code on Firebase.

1- If you are not a developer and you don’t have enough programing skills, you probably didn’t understand some of the terms in this post, sit back and let us do it for you, you can hire our dedicated team to setup your customized Webhook to do whatever you want it to do.

2- If you’re a developer, prepare your Caffeine source; it’s time to code!

Writing the First Webhook

  • Create your own basic Firebase Cloud Functions app, you can easily build an app that uses NodeJS to receive the request from WA Web Plus, a good a simple documentation about how to make your first app is here on this link, available in 7 different languages.
  • Receive the incoming requests, for easy and clean setup, use “ExpressJS“, the simplest example would look like this:
const functions = require('firebase-functions');
const express = require('express');
const app = express();

app.get('/get-message', async (req, res) => {
     res.json("Message Received!");
});

exports.app = functions.https.onRequest(app);
  • Make sure your “firebase.json” file looks like this:
{
  "hosting": {
    "public": "public",
    "rewrites": [{
     "source": "**",
     "function": "app"
   }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

After a successful deployment of your code to Firebase cloud, your endpoint/webhook link can be easily accessed with your browser on the following link: https://your-project-name.web.app/get-message

Visiting this link in your browser will return a message that says: “Message Received”, according to the code we wrote above.

  • We’re almost there! Now head to WA Web Plus, in the Business Tools tab you can setup a new Webhook, paste your endpoint/webhook link that we created above into the box, select the Request Payload (parameters) that you wish to send to your endpoint, and hit “SAVE”.
  • Now your Webhook is ready, and waiting for the action that will trigger it! Which is easily done with “Smart Replies“, a smart reply detects previously identified keywords in the incoming messages, and reacts with a specific action according to it, and our action here will be to trigger a Webhook!
  • Since the reply will not always be a static reply, but a dynamic one (according to the response from your Webhook endpoint), we will always use the Dynamic Variable {W} to print out the result of the Webhook response to the reply that will be sent to the user.
  • Now, that’s it! Let us test how the setup goes:
  • Congratulations! you’ve just made your first Webhook with a very little amount of codes. As you can see in the above image, a user sent a keyword to your WhatsApp, the Smart Reply triggered the Webhook, the Webhook returned the reply to the conversation.

Going Deeper

But hey, what if I want my Webhook to get information from another server/data provider? That is very easy to do with “Axios” library.

const functions = require('firebase-functions');
const express = require('express');
const axios = require('axios');
const app = express();

app.get('/get-message', async (req, res) => {
	const m_content = req.query.m_content.toLowerCase();
	axios.get("https://auto-correct-app.com/?text=" + m_content)
	.then(response => {
		res.json(response.data);
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

exports.app = functions.https.onRequest(app);

We used “Axios” to send another “GET” request to a service provider that will auto correct the received message for us, and return it to the user.

Available Parameters

The Webhook request can send a pre-selected list of variables that includes useful information about the message that has been received. This makes it easy for you to receive the data from those parameters and process them in your Firebase app.

Parameter NameValue
m_typeMessage type
m_timestampMessage timestamp
m_userMessage sender phone number
m_contentMessage content (Text only)
m_cnameMessage sender phone book name
m_unameMessage sender WhatsApp account name
m_gnameMessage group name

More Examples

Now that you have learned how to setup your first Webhook with WA Web Plus, you can easily replicate those simple Webhooks and play with them:

Google Translate Webhook
A function that uses Google Translate to translate the incoming message to any language.

// install this library
// https://github.com/statickidz/node-google-translate-skidz
const translate = require('node-google-translate-skidz');
app.get('/translate', async (req, res) => {
	const m_content = req.query.m_content.toLowerCase();
	translate({
		text: m_content.includes('translate:') ? m_content.split("translate:")[1] : m_content,
		source: 'auto', // automatically detect text langauge
		target: 'en' // put your target language here
	}, function(result) {
		res.json(result.translation || 'Sorry :(');
	});
});

Covid-19 Statistics Webhook
A function that will return Covid-19 official statistics about any country.

app.get('/corona', async (req, res) => {
	const m_content = req.query.m_content.toLowerCase();
	const country = m_content.includes('corona:') ? m_content.split("corona:")[1] : m_content;

	axios.get("https://api.covid19api.com/dayone/country/" + country.replace(/\s/g, ''))
	.then(response => {
		let lastKey = response.data.length - 1;
		res.json("🦠 COVID-19 Statistics in " + response.data[lastKey].Country + " until today:\n\n" + "Confirmed: " + response.data[lastKey].Confirmed + "\n" + "Deaths: " + response.data[lastKey].Deaths + "\n" + "Recovered: " + response.data[lastKey].Recovered + "\n" + "Active: " + response.data[lastKey].Active + "\n\n" + "Stay home! 😷🏠");
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

Weather Webhook
A function that returns today’s weather conditions for any given country or city.

// register here to get your API key that you need to include in the URL
// https://openweathermap.org/api
app.get('/weather', async (req, res) => {
	const m_content = req.query.m_content.toLowerCase();
	const city = m_content.includes('weather:') ? m_content.split("weather:")[1] : m_content;

	axios.get("http://api.openweathermap.org/data/2.5/weather?q=" + encodeURI(city) + "&appid=<YOUR API KEY HERE>&lang=en")
	.then(response => {
		res.json("🌍 The weather in " + response.data.name + " is " + response.data.weather[0].main + ", the temperature is 🌡 " + Math.round(response.data.main.temp - 273.15) + "°C and the wind speed is 🌀 " + response.data.wind.speed + ".");
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

Wikipedia Webhook
A function that will return short description about any information on Wikipedia.

app.get('/wiki', async (req, res) => {
	const m_content = req.query.m_content.toLowerCase();
	const search = m_content.includes('wiki:') ? m_content.split("wiki:")[1] : m_content;

	axios.get("https://en.wikipedia.org/w/api.php?format=json&action=query&prop=description&exintro&explaintext&redirects=1&titles=" + encodeURI(search))
	.then(response => {
		let obj = response.data.query.pages;
		let data = obj[Object.keys(obj)[0]] !== "-1" ? obj[Object.keys(obj)[0]].description : 'Sorry, I don\'t know 🥺';
		res.json(data);
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

Pabbly Connect Webhook
A function that will redirect your Webhook request to Pabbly connect Workflow Trigger.

app.get('/pabbly', async (req, res) => {
	// put your Pabbly Connect Webhook URL here
	const pabblyTrigger = "https://connect.pabbly.com/workflow/sendwebhookdata/IYc1MzXi";
	axios.get(pabblyTrigger + '/' + encodeQueryData(req.query))
	.then(response => {
		res.json(response.data);
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

Zapier Webhook
A function that will redirect your Webhook request to a Zapier Catch Hook.

app.get('/zapier', async (req, res) => {
	// put your Zapier Catch Hook here
	const zapierCatchHook = "https://hooks.zapier.com/hooks/catch/8126631/om189oy";
	axios.get(zapierCatchHook + '/' + encodeQueryData(req.query))
	.then(response => {
		res.json(response.data);
		return false;
	})
	.catch(error => {
		res.json(error.message);
		return false;
	});
});

Was this page useful?