Do you want to know one of the beautiful things about Data McFly? It integrates really easily with other services.
In this article, we are going to walk through using Data McFly and Twilio together to build a real-time SMS call center.
This could be used as a customer help desk where customers send a text message for help and an agent sends a reply back from their web browser.
The actual phone work will be handled by Twilio, and Data McFly will store the data and display the chats in real-time. We’ll use node.js to send and receive the text messages and an HTML frontend to handle the actual chatting.
We’ll be using a few tools to build this app. You’ll want to have these set up before you continue on:
If you haven’t already, Sign up for a free Data McFly account now, then create a new app. You’ll use your app for your call center.
We first need to set up our Node.js app.
Besides the Twilio and Data McFly modules, we’ll be using the Express framework to set up our node web server to receive the POST request from Twilio so we’ll need to install the express package. We’ll also be using the body-parser module so we are going to install that as well.
Let’s create our
Save this file, and from the terminal run the following command:
This will create a
node_modules folder containing all of the modules we want to use.
Let’s set up our folder structure, create a folder called
views, this is where we will keep our frontend.
Now, create a folder called
public, this will host our static files, inside that folder, create a
css folder and a
js folder, we’ll come back to these later.
At the beginning of our app.js file we’ll need to require express and initialize it into a variable called app. We’re also going to use the bodyParser middleware to make it easy to use the data we’ll be getting in our POST request.
Create a new file called
app.js and require the twilio, express and datamcfly packages:
YOUR-NUMBER with your Twilio credentials, and a phone number in your Twilio account that you’ll be using.
smscontact with your Data McFly API Key, and create a collection to use. If you haven’t already created a collection, one will be automatically created for you when you first save data, so you can leave the collection name set to
smscontact if you want.
Data McFly uses collections to organize data inside apps, so one app could have several collections. If you’re familiar with relational databases, this is the equivalent of a table.
This is the start of our app, next we’ll tell it what to do when new texts come in and when an agent replies to a text.
Twilio uses webhooks to let your server know when an incoming message or phone call comes into our app. We need to set up an endpoint that we can tell Twilio to use for the messaging webhook.
We’re going to add a route for
/message that responds with some TwiML. TwiML is a basic set of instructions you can use to tell Twilio what to do when you receive an incoming call or SMS message. Our code will look like this:
This will listen for any incoming sms messages and store them inside your Data McFly app.
Once a message has been received, we use the Twilio node library to initialize a new
TwimlResponse. We then use the Message verb to set what we want to respond to the message with. In this case we’ll just say “Thanks for the message, an agent will get back to you shortly.”. Then we’ll set the content-type of our response to
text/xml and send the string representation of the TwimlResponse we built.
Whenever a customer sends a message to the phone number we’ve set up, it will send them the response and store the message inside Data McFly. If an agent is watching the client, then they will see the message appear instantly, and can send a reply back.
Now, let’s add a route called
/reply this is what we will call via AJAX when our agents want to reply to a message:
This will store the reply in our Data McFly app as an outbound reply, then send the message to the customer.
Finally, let’s set our server to listen on port
8080, and tell it what to do when we view it from a brower:
Now that we’ve built our server, we need to tell twilio to use this messaging url as a our Message Request URL:
Send an SMS message to your Twilio number and you should get a response back. If you don’t, take a look at the Twilio App Monitor to help determine what went wrong.
This is the backend portion of our call center, it listens for incoming text messages, stores them in our Data McFly app, and then sends replies when an agent replies.
Now, we need to build our agent system, where an agent can watch incoming messages and reply to them.
We’ll build that now.
We’ve got our Node.js app listening for messages to send and receive, now let’s set up our client which is what agents will see from their web browser.
When a message comes in, we’ll display a chat box showing the message, then send a reply.
First, let’s create our view, in the
/views folder, create a file called
This file will act as our HTML file, and we are using EJS so we can pass our Data McFly settings and not have to configure it in multiple places. EJS is handy for adding template functionality to your Node.js apps.
Now, let’s create our style sheet. In the
/public/css folder we created earlier, create new file called
Lastly, we want to set up the brains of our app. We’ve saved the biggest file for last.
/public/js/ folder, create a new file called
chatManager class is set up so that when it loads, it first grabs a list of saved text messages using the
value event trigger, and displays them by the phone number they were sent from.
We treat all messages to and from the same number as one session, so for each chat session, we would see a box displaying the messages between the agent and the customer, and a textbox to use to send new messages.
We then listen for any new new messages to come in using the
added even trigger, and we then display them inside the proper chat box.
chat class tells our app how display the chat boxes, and how to handle sending new replies.
In this case, when a message is sent by an agent, we post it to our backend
/reply route, where it is saved to our Data McFly app and then sent to the customer as a text message.
We’re also storing the direction a message came from, either
outbound, this way we can style each message to appear similar to when you view a chat log on your phone. The customer’s texts will appear on the left side, and the agent’s replies will appear on the right side.
Now let’s fire up our app:
We’ve told our app to run on port 8080, so if you go to your web browser and type in
http://localhost:8080/ you should see your call center.
Just an aside, if you’re running this locally, you’ll want to make sure you’ve got ngrok running before you go to the next step. If you haven’t used ngrok before, Kevin Whinnery over at Twilio has put together a great tutorial to help you get started.
We did it! Now that you’ve built a simple SMS call center app it’s your chance to create something with it.
Take this project and roll with it.
Some ideas are you could actually completely remove the
/reply ajax call, and instead create an
outbound text queue that would store the message, then add an
added listener to the outbound collection that would both send the reply to the customer, and add it into the
message collection so it would appear in the chat window.
This would eliminate the need for that
/reply AJAX call, and also add some queue support in cases of sending out multiple replies to several customers at once.
Ready To Build Awesome Apps?