add-emoji-api-to-chat-app

Add Emojis to Your Chat App – ChatEngine JavaScript Plugins

In this tutorial, we’ll add emojis to our ChatEngine chat application using the emoji plugin. This allows users to input emojis into chat messages by typing :smile: or :information_desk_person: which automatically turns the command into an emoji (😀 or 💁).

The full GitHub repo for this project is available here.

ChatEngine Setup

First things first, you’ll have to setup ChatEngine via our ChatEngine Quick Start. This enables you to use your own PubNub application keyset and automagically sets up your account to use ChatEngine. It’ll take a couple minutes at most, then you can come back here and continue on.

In this tutorial, we’re going to use the barebones ChatEngine application available in the Quick Start or here. Now, let’s add emojis!

Emoji Plugin

Install the emoji plugin using:

npm install chat-engine-emoji --save

Add a reference to the JavaScript file of the emoji that we got from npm inside the index.html. Place the below-mentioned line just before the </body> ends:

<script src="node_modules/chat-engine-emoji/dist/chat-engine-emoji.js"></script>

Then go to js/index.js. Here we will add the logic to make emoji plugin work. You have to just write this inside the ChatEngine ‘on ready’ event:

myChat.plugin(ChatEngineCore.plugin['chat-engine-emoji']());

This will bring in the emoji plugin and connect it to your chat room instance, which is myChat here. When you enter any emoji, say :pizza:, this plugin will convert it into HTML image tag of pizza. Additional documentation here.

Since the plugin will create some HTML, we need to do HTML escaping while rendering these messages, otherwise we will see messages in raw HTML format, which we don’t want. In order to do that, back in index.html, we have to make one modification.

Change {{messageOutput}} to {{{messageOutput}}}. This is how you escape HTML in Handlebars JS.

Next Steps

With that, we’ve enabled chat users to search for and send emojis directly in chat. With ChatEngine, you can add a ton of other powerful plugins, like typing indicators, buddy lists, and markdown rendering, to build out the chat functionality. You can find all the plugins and how to implement them here.

Use Cases:

Try PubNub Today