Building a two-way interactive chatbot with Twilio: A step-by-step guide

To build a chatbot that can communicate both ways we need to do two things: build the chatbot into the web app and modify setup configurations in Twilio. To do these, follow these steps:

1. Create an index.js file in the root directory of the project.
2. Install the express and body-parser libraries. These libraries will be used to make a web app:

npm install body-parser --save

npm install express --save

3. Create a web app in index.js:

// Two-way SMS Bot
const express = require('express')
const bodyParser = require('body-parser')
const twilio = require('twilio')
const app = express()
app.set('port', (process.env.PORT || 5000))
Chapter 5
[ 185 ]
// Process application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}))
// Process application/json
app.use(bodyParser.json())
// Spin up the server
app.listen(app.get('port'), function() {
console.log('running on port', app.get('port'))
})
// Index route
app.get('/', function (req, res) {
res.send('Hello world, I am SMS bot.')
})
//Twilio webhook
app.post('/sms/', function (req, res) {
var botSays = 'You said: ' + req.body.Body;
var twiml = new twilio.TwimlResponse();
twiml.message(botSays);
res.writeHead(200, {'Content-Type': 'text/xml'});
res.end(twiml.toString());
})

The preceding code creates a web app that looks for incoming messages from users and responds to them. The response is currently to repeat what the user has said.

4. Push it onto the cloud:

git add .

git commit -m webapp

git push heroku master

Now we have a web app on the cloud at https://ms-notification-bot.herokuapp.com/sms/ that can be called when an incoming SMS message arrives. This app will generate an appropriate chatbot response to the incoming message.

5. Go to the Twilio Programmable SMS Dashboard page at https://www.twilio.com/ console/sms/dashboard.
6. Select Messaging Services on the menu and click Create new Messaging Service:

7. Give it a name and select Chat Bot/Interactive 2-Way as the use case:

1. This will take you to the Configure page with a newly-assigned service ID:
2. Under Inbound Settings, specify the URL of the web app we have created in the REQUEST URL field (that is, https://sms-notification-bot.herokuapp.com/sms/):

Now all the inbound messages will be routed to this web app.

10. Go back to the SMS console page at https://www.twilio com/console/sms/services. Here you will notice your new messaging service listed along with the inbound request URL:

11. Click the service to attach a number to the service:

12. You can either add a new number, in which case you need to buy one or choose the number you already have. We already have one sending notifications that can be reused. Click Add an Existing Number.

13. Select the number by checking the box on the right and click Add Selected:

14. Once added, it will be listed on the Numbers page as follows:

In Advanced settings, we can add multiple numbers for serving different geographic regions and have them respond as if the chatbot is responding over a local number.

15. The final step is to try sending an SMS message to the number and receive a response. Send a message using any SMS app on your phone and observe the response:

Congratulations! You now have a two-way interactive chatbot.

This tutorial is an excerpt from the book, Hands-On Chatbots and Conversational UI Development written by  Srini Janarthanam. If you found our post useful, do check out this book to get real-world examples of voice-enabled UIs for personal and home assistance.

Read Next

How to build a basic server side chatbot using Go

Build a generative chatbot using recurrent neural networks (LSTM RNNs)

Top 4 chatbot development frameworks for developers