👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js
Tags: javascript, node, whatsapp, twilio
Published: 2018-08-27 06:05:52

---
title: 👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js
published: true
description: Find out how to use the Twilio API for WhatsApp to translate messages from text to emoji using Node.js.
tags: javascript, node, whatsapp, twilio
canonical_url: https://www.twilio.com/blog/2018/08/emoji-translations-twilio-api-whatsapp-node-js.html
cover_image: https://s3.amazonaws.com/com.twilio.prod.twilio-docs/images/twilio-loves-whatsapp-1.width-808.png
---

I 💖 emojis, so when I heard about the new <a href="https://www.twilio.com/whatsapp">Twilio API for WhatsApp</a> I wanted to build something <em>emojiriffic</em>. Inspired by <a href="https://twitter.com/notwaldorf">Monica Dinculescu’s</a> <a href="https://twitter.com/to_emoji/">to_emoji Twitter bot</a> and <a href="https://meowni.ca/emoji-translate/">emoji translator</a> I decided to build a WhatsApp text-to-emoji translator. You can try it out now by <a href="https://wa.me/441745472072?text=she%20sells%20sea%20shells%20on%20the%20seashore">sending your message to our WhatsApp number +441745472072</a>.

<img alt="An example of sending a message to the app we're going to build. The WhatsApp number responds with the message translated to emoji." data-alt="An example of sending a message to the app we're going to build. The WhatsApp number responds with the message translated to emoji." data-embedtype="image" data-format="left" data-id="26150" data-mce-contenteditable="false" height="407" src="https://www.twilio.com/blog/wp-content/uploads/2018/07/example.png" width="750"/>

Here’s how you too can build this app.

## 🛠 Tools

I decided to build this project using Node.js, following in the footsteps of Monica’s projects. WhatsApp messages via Twilio result in webhooks, much the same as receiving an SMS message to a Twilio number, so if you’ve built a Twilio SMS application before this will be familiar. For ease of deploying this, I’m going to build this as a <a href="https://www.twilio.com/docs/runtime/functions">Twilio Function</a>.

If you want to follow along with building the emoji translator you’ll need:

* A Twilio account (<a href="https://www.twilio.com/try-twilio">sign up for a free Twilio account here</a>)
* The WhatsApp Sandbox Channel. Follow <a href="https://www.twilio.com/docs/sms/whatsapp/api#twilio-sandbox-for-whatsapp">these instructions to install the WhatsApp Sandbox Channel in your account</a>. You will also need to <a href="https://www.twilio.com/docs/sms/whatsapp/api#joining-a-sandbox">connect your own WhatsApp account with the sandbox</a>

And that’s all. Let’s get building!

## 🏗 Building the app

First up, let’s take a look at the what powers Monica’s apps.

Powering both of them is the <a href="https://github.com/notwaldorf/emoji-translate"><code>moji-translate</code> module</a>, which in turn uses the <a href="https://github.com/muan/emojilib"><code>emojilib</code></a> keyword library by <a href="https://github.com/muan">Mu-An Chiou</a>. To use <code>moji-translate</code> in a Twilio Function we need to install it.

In the Twilio console, head into the <em>Runtime</em> section to <a href="https://www.twilio.com/console/runtime/functions/configure">configure your Functions</a>. In the dependencies section add version 1.0.8 of <code>moji-translate</code>. Save the config and we’re ready to build the function.

<img alt="Add moji-translate and the version 1.0.8 to the dependencies section, then save." data-alt="Add moji-translate and the version 1.0.8 to the dependencies section, then save." data-embedtype="image" data-format="left" data-id="26151" data-mce-contenteditable="false" height="328" src="https://www.twilio.com/blog/wp-content/uploads/2018/07/dependencies-1024x525.png" width="640"/>

Add a new Function from the <a href="https://www.twilio.com/console/runtime/functions/manage">management page</a> and choose the “Hello SMS” template, as responding to an incoming WhatsApp message uses the same <a href="https://www.twilio.com/docs/sms/twiml">TwiML</a> as responding to an incoming SMS message. Give your Function a name and a path.

<img alt="Give your function a name and a path." data-alt="Give your function a name and a path." data-embedtype="image" data-format="left" data-id="26152" data-mce-contenteditable="false" height="544" src="https://www.twilio.com/blog/wp-content/uploads/2018/07/function.png" width="854"/>

The code should look like this so far:
          
```javascript
exports.handler = function(context, event, callback) {
  let twiml = new Twilio.twiml.MessagingResponse();
  twiml.message("Hello World");
  callback(null, twiml);
};
```
    
To build our emoji translator we will first need to grab the body of the incoming message from the <code>event</code> object.  We can then pass it through the <code>moji-translate</code> module and return it in the TwiML in the place of “Hello World” in the above example.    
      

```javascript
exports.handler = function(context, event, callback) {
  const { translate } = require('moji-translate');
  const incomingBody = event.Body;
  const translatedBody = translate(incomingBody);

  const response = new Twilio.twiml.MessagingResponse();
  response.message(translatedBody);
 
  callback(null, response);
};
```
    
Save the Function and it will automatically deploy. Copy the URL as we will need it to configure the WhatsApp channel.

Open the <a href="https://www.twilio.com/console/sms/whatsapp/sandbox">WhatsApp sandbox</a>, find the field for when a message comes in and paste in the Function URL. Save the channel and prepare to test!

## 📱 Testing the app

Open up WhatsApp on your phone, send a message to the sandbox number and you’ll receive a response with your message translated to emoji.

Or in emoji:

> 👐 🆙 WhatsApp 🔛 your 🤳, send a 💬 to the sandbox 💯 and you’ll receive a response with your 💬 translated to emoji.

<img alt="A screen shot of the original and translated message." data-alt="A screen shot of the original and translated message." data-embedtype="image" data-format="left" data-id="26153" data-mce-contenteditable="false" height="460" src="https://www.twilio.com/blog/wp-content/uploads/2018/07/result.png" width="750"/>

If you get a message back saying your number is not associated with the sandbox channel, make sure you follow <a href="https://www.twilio.com/docs/sms/whatsapp/api#using-phone-numbers-with-whatsapp">the instructions to connect your number to the sandbox</a>.

If you want to try the app out without connecting to the sandbox, <a href="https://wa.me/441745472072?text=she%20sells%20sea%20shells%20on%20the%20seashore">send your message to our WhatsApp number +441745472072</a>. You can start a conversation by scanning this QR code with your phone too.

<img alt="Scan this QR code and start translating your text to emoji over WhatsApp." data-alt="Scan this QR code and start translating your text to emoji over WhatsApp." data-embedtype="image" data-format="left" data-id="26154" data-mce-contenteditable="false" height="300" src="https://s3.amazonaws.com/com.twilio.prod.twilio-docs/original_images/qr-1.png" width="300"/>

## 👞 Next steps

Emoji translation via WhatsApp is possible with only a few lines of code when you have the right tools to hand. In this post we’ve seen how you can build, deploy and scale an application using Node.js and Twilio Functions, with all the emoji power supplied by <a href="https://github.com/notwaldorf/emoji-translate"><code>moji-translate</code></a>. This is just the start though, you can build on this to create more interactive applications with Twilio, WhatsApp, and the other <a href="https://www.twilio.com/channels">channels</a> available through the Twilio messaging API.

Now we have the WhatsApp sandbox to play with, what other apps are you looking forward to creating? Get in touch in the 💬 comments below, 📧 email me at philnash@twilio.com or send me your favourite emoji on 🐦 Twitter at <a href="https://twitter.com/philnash">@philnash</a>.

___

_[👉 Emoji translations with the 📞 Twilio API for 💬 WhatsApp and Node.js](https://www.twilio.com/blog/2018/08/emoji-translations-twilio-api-whatsapp-node-js.html) was originally published on the [Twilio blog](https://www.twilio.com/blog) on August 1st, 2018._