Simple Customer Support Application for WhatsApp

Build a Simple Customer Support Channel with WhatsApp

Published August 12, 2020 by Lorna Mitchell

Good customer service interactions are made even better when the customer is confident in the communication as it happens. One way to achieve this is to use a communications platform that is familiar to them, and given the popularity of WhatsApp, it’s an excellent choice for customer support!

Today’s post shows you the demo app we built to do just that – using our favorite emojis to identify the threads between multiple chats 😊.

mobile phone screenshot showing chat messages of pretend customer support messages. Each user gets their own emoji prefix to assist message threading

TL;DR for the impatient, the code is on GitHub

Prerequisites

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Start building with Vonage

Other Accounts & Tools:

  • Either a WhatsApp Business Account, or (as we do in this tutorial) set up the Messages API Sandbox to whitelist the numbers you will use for the demo.
  • NodeJS and Redis – or a Heroku account.

You will also need to know the URL that your application will be running on, which we will call APP_URL. For Heroku, this is the URL of your running application. If you are running the application locally you will still need a public URL to your code so that Vonage can send webhooks to it; we recommend Ngrok.

Set Up Your Application

Start by cloning the repository to your local machine (or you can click “Deploy to Heroku” on the README): https://github.com/nexmo-community/text-based-whatsapp-callcenter.

You will also need to configure the Messages API Sandbox by whitelisting all the phone numbers that will use this application.

show the messages sandbox setup page for whitelisting numbers, showing a QR code and the current count of associated numbers

On the same screen, configure the webhooks to be APP_URL/webhooks/inbound for the Inbound webhook and APP_URL/webhooks/status for the Status webhook. Great thought went into those naming conventions as you can tell! By configuring these endpoints, we tell Vonage where to send incoming WhatsApp messages and status updates about sent messages.

screenshot of the inbound and status webhooks input fields

With the code locally and the sandbox configured, this is an excellent time to grab the dependencies (pushing to Heroku does this automatically). Run this command in the top-level directory of the code:

The last configuration step is adding your credentials, depending on your platform:
– for Heroku, set environment variables
– to run locally, copy the .env.example file to .env and add your own details for each field.

Start the application locally (Heroku starts itself) with the commmand:

app web interface shows active agents and customers, with phone numbers mostly screened just with the last few digits showing

If you are running locally, we recommend setting up ngrok. You may need to update the webhook URLs used in the Sandbox if the ngrok URL changes.

Start Chatting!

Begin by sending a message saying “sign in” to the Sandbox number to register as an agent. You should get a response that you are now an agent and some instructions on how to handle customer messages.

Your “customers” (who also need to have their numbers whitelisted on the sandbox) can now send their support inquiries to the Sandbox number. Each one will arrive prefixed with an emoji – this is so that the agent can tell multiple customers apart. To reply to each customer, the agent must start their message with the matching emoji!

mobile phone screenshot showing chat messages of pretend customer support messages. Each user gets their own emoji prefix to assist message threading

Perhaps it’s a gimmick but it’s a fun one, and a simple identified to type on mobile if you’re using WhatsApp in that context. We certainly had fun testing this demo and we hope you do too. Please let us know how you get on?

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].