I have been avoiding voicemail for most of my life. Most of the time for one simple reason—I could never quite get 100% of the message.
I would have considered myself lucky if they’d slurred out a number I could have called back, the voicemail had been empty-ish or they had gotten past their first name. In most cases though it would go something like this:
“Hi Julia, this is Ted, I’m with didn’t_really_get_the_name . I’m sorry we haven’t been able to get back together on this – if you’re like me I’m sure you’re being pulled in many different directions and are real busy. Do me a favour, though, and when you get this message, just call me back and leave a message with what you’ve decided to do about my proposal. Either way, it will be nice for me to know. Thanks in advance for that, and I’ll be waiting for your call..”
Ted… Mosby? Crilly? Maybe, Cassidy? We’ll never know.
Luckily, building your own voicemail in Node-RED is both faster and easier than deciphering those messages. Follow along to see how it works!
What You’re Going to Build
This tutorial is part of the “Getting Started with Nexmo and Node-RED” series.
These articles show you how to get started with Nexmo APIs like SMS, Voice and Verify, so feel free to refer back to them as you go, or in case you’d like to add another functionality.
In this tutorial we’ll be building a simple voicemail service that allows callers to reach your Nexmo number and leave a message.
The recorded voice message will then be fetched from the Nexmo servers and sent to your email address.
Dependencies
Prerequisites
Before getting started, you’ll need a few things:
- Node.js and Node-RED installed, if you’re developing locally
- A Nexmo account — create one for free if you haven’t already
- A way to expose your server to the internet. This either means you’re running a hosted version of Node-RED, or using a tunneling service like ngrok – get up to speed with this Getting Started with Ngrok in Node-RED tutorial
Getting Your Credentials
To use the Nexmo nodes in Node-RED you’ll have to provide your credentials, so it’s best to keep them handy. Go to your dashboard to find your API key and secret and make a note of them.
Next, you’ll need a Voice-enabled virtual number. Go to Numbers > Buy numbers to get one.
Setting Up Your Node-RED Editor
Access your Node-RED editor by pointing your browser at http://localhost:1880.
Once you have the editor open, you’ll need to install the Nexmo nodes, the Ngrok node(if not using a hosted version of Node-RED) and the default Email node. You can do so under the Manage palette menu, by searching for the corresponding packages and clicking install:
- Nexmo:
node-red-contrib-nexmo
- Ngrok:
node-red-contrib-ngrok
- Email:
node-red-node-email
After restarting Node-RED, you should see all of these nodes appear on the left side of your screen – in your node palette, among other default nodes.
Expose Your Local Server to the Internet
In case you’re not using a hosted version of Node-RED, the Nexmo Voice API will need another way to access your webhook endpoints, so let’s make your local server accessible over the public internet. If you’re running Node-RED on a public web server instead of your local machine, you’re all set and ready to move on to the [Create a Nexmo Voice Application] step.
A convenient way to do this is by using a tunneling service like ngrok, and there is a node for it that you’ve just added to your palette.
It takes the strings on and off as input to start/stop the tunnel, and outputs the ngrok host address as the msg.payload. Check out our tutorial on Getting Started with Ngrok in Node-RED to find out more.
Import from Clipboard the snippet below, or have a stab at building this path yourself.
[{ "id": "faed0f7.1e524f", "type": "inject", "z": "5b8bbfc3.1a9f18", "name": "", "topic": "", "payload": "on", "payloadType": "str", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 190, "y": 100, "wires": [ [ "8a01baeb.6756d"] ] }, { "id": "11051fa9.75bd1", "type": "inject", "z": "5b8bbfc3.1a9f18", "name": "", "topic": "", "payload": "off", "payloadType": "str", "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "x": 190, "y": 160, "wires": [[ "8a01baeb.6756d"] ] }, { "id": "8a01baeb.6756d", "type": "ngrok", "z": "5b8bbfc3.1a9f18", "port": "1880", "creds": "5a9e2b8c.173a2c", "region": "ap", "subdomain": "", "name": "", "x": 400, "y": 140, "wires": [[ "93fd5675.743c1"] ] }, { "id": "93fd5675.743c1", "type": "debug", "z": "5b8bbfc3.1a9f18", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "x": 620, "y": 140, "wires": [] }, { "id": "5a9e2b8c.173a2c", "type": "ngrokauth", "z": "" }]
At this point, your editor should look similar to this:
As the last step before hitting Deploy , open up the ngrok
node properties and specify the port number (1880
for Node-RED) and the Region.
You can also add your authtoken if you already have a ngrok account. Don’t worry if you don’t, just skip this step for now. The node will warn that it is not fully configured but this is not an issue.
Hit Deploy and click on the on inject
node’s button, then navigate to the URL displayed in the debug area (YOUR_URL for future reference) to find your Node-RED editor at a public address.
Create a Nexmo Voice Application
The Nexmo Voice API uses Nexmo Applications to hold security and config information needed to connect to Nexmo endpoints.
In the Nexmo Node-RED palette, several nodes have the capability to create these applications: getrecording
, earmuff
, mute
, hangup
, transfer
, createcall
, playaudio
, playtts
and playdtmf
.
Drag any of these nodes into your workspace, then double-click on it to open up the node properties.
Next to the Nexmo Credentials
, select “Add new nexmovoiceapp…” from the drop-down menu and click the edit button. Fill in the details below and click Create New Application.
KEY | DESCRIPTION |
---|---|
Name |
Choose a name for your Voice Application, for example “Nexmo Voice Application”. |
API Key |
Your Nexmo API key, shown in your account overview. |
API Secret |
Your Nexmo API secret, shown in your account overview. |
Answer URL |
YOUR_URL/answer, you’ll be hosting a Nexmo Call Control Object (NCCO) here. – more about this later on. |
Event URL |
YOUR_URL/event, you’ll need to reference this when setting up the event handler. |
Node-RED will then create a new Nexmo Application on your account and fill in the App ID and Private Key fields. After this step, feel free to delete the Nexmo node you used, as a nexmovoiceapp
config node has been created, and that contains all the Nexmo credentials this flow needs.
Set Up a Number to Call
Next, you’ll have to link your virtual number to this application.
Find the Voice Application you’ve just created in your Nexmo Dashboard by navigating to Voice > Your Applications.
Click on the name of this application, then under the Numbers tab click on the Link button next to the virtual number you’ve rented earlier.
In case the number you’d like to use is already linked to another app, click on Manage number and configure it to forward incoming calls to your app.
Bonus tip: Use a comment
node to take note of the Nexmo number linked to your application, this way you always have it handy.
Handle Inbound Calls
When you receive an inbound call to your virtual number, the Nexmo Voice API makes a GET
request to an endpoint you define, YOUR_URL/answer
, and expects a set of instructions on how to handle the call.
First, let’s implement this endpoint.
Define the Webhook Endpoint for Inbound Calls
Add a voice webhook
and a return ncco
node to your workspace, and wire them together to define a webhook endpoint.
Next, open up the voice webhook
node properties, select GET
as a Method
and type /answer
in the URL
field, then press Deploy.
Great! Now you have a webhook that returns an NCCO to Nexmo’s API. At this point it doesn’t contain any instructions, so let’s add some!
Build the Nexmo Call Control Object (NCCO)
The instructions expected by the Nexmo API come in the form of a Nexmo Call Control Object, also known as NCCO.
There are lots of different actions available, find the corresponding nodes under the Nexmo palette in your Node-RED editor or check out the NCCO Reference to find out more about them.
In this case, you’ll probably want to greet the caller then start recording the message. To do this, you’ll need to add a talk
node followed by a record
node.
Add them to your workspace, then connect them in between the voice webhook
and return ncco
nodes.
talk
Next, open up the talk
node editor and set the Text{}
field to the message you’d like to be read out to the caller. Eg. “Hi! You’ve reached X, please leave a message.”
If you’re feeling nostalgic about old school voicemails, you’re all set. On the other hand, you could also personalize the experience by selecting a Voice Name
or by making use of SSML tags, so that it sounds more like a person and less like a robot.
record
In the record
node properties fill in the URL {}
field with YOUR_URL/record
. This is going to be the eventURL that Nexmo will return a set of parameters to, once the recording has completed.
If you glance over at the NCCO Reference you’ll soon realize that the calling number is not one of them.
Fortunately, we can grab the caller’s phone number from the answerURL and pass it as a query parameter.
Update the URL {}
field to YOUR_URL//record?from={{msg.call.from}}
. This way we’ll be able to access the from
value through the record eventURL by referencing msg.req.query.from
.
Before moving on to the next step, make sure you’ve selected POST
as a Method
, MP3
as a Format
and that you’ve set a value for End On Silence
(eg. 3).
If you’d like to see the generated NCCO, go to YOUR_URL/answer
. You’ll see a set of actions, or “instructions”, in JSON format that Nexmo will use to control the call flow.
Ready to take it a step further? Dial your Nexmo number to see it in action!
Fetch Recording
At this point, the caller is greeted by a TTS message followed by a beep tone and their message gets recorded. The next step is to fetch the recording from the Nexmo servers.
Record eventURL
First, let’s define the record eventURL where we’re expecting the recording parameters to be sent upon completion.
Add a http in
node to your workspace, then connect a http response
node, as well as to a debug
node to it. This way you can start logging events in the debug area and gain a bit more insight into what is really going on.
Open up the http in
node properties, select POST
as a Method
and fill in the URL
field with /record
.
The http response
node should have 200
set as Status code
, but don’t worry about it, this is the default value as well.
Although the recording data is coming through as msg.payload
, we still have the from
value stored in msg.req.query.from
. Make sure you select complete msg object
in the debug
node’s editor as Output
.
Get Recording
To actually retrieve the recording, we’ll be using the getrecording
Nexmo node.
Add one to your canvas, connect it to the /record
http in
node and open up its node editor.
You’ll see two fields:
-
Nexmo Credentials
– select the voice application you created earlier from the drop-down menu. -
Filename {}
– Notice the{}
sign in the label, which means that this field supports Mustache templating and the value can be set dynamically. This gives us the perfect opportunity to include the caller’s number and a timestamp in the filename, so let’s set it torecordings/{{msg.req.query.from}}_{{msg.payload.timestamp}}.mp3
.
Note, this node does not write the audio to disk, the filename field is there to set the value of msg.filename. Next, there are a couple different routes you can take: upload the audio to your own server, follow with a file
node and download it to your computer, or use an e-mail
node and send it to yourself.
Send Recording to an Email Address
For this example we’ll use the default Node-RED e-mail
node, which sends the msg.payload
as an email, with a subject of msg.topic
.
In our case, msg.payload
is a binary buffer (the recording) and it will be converted to an attachment. If you wish to add a body to your email set it as msg.description
using a change
node in the flow before the e-mail
node.
The filename will be msg.filename
, which we’ve already specified.
Connect a change
node into getrecording
, followed by an e-mail
node. You’ll find both in your node palette, change
under function and e-mail
under social.
Next, let’s see how to configure them.
change
Open up the change
node properties and define two rules using the set operation.
First, let’s set msg.topic
, the subject of the email.
In the upper field replace payload
with topic
, then select expression
type from the to
drop-down, which uses the JSONata query and expression language. To include the caller’s number in the email subject, fill in this field with something like 'Voicemail from ' & msg.req.query.from
.
Click on the add button to define a second rule. This time we’ll be setting the value of msg.description
, the email body. You could use an expression again, or just go with a simple string like “Hey, you’ve got voicemail!”.
Press Done once you’re finished, and let’s move on to the e-mail
node!
e-mail
In the e-mail
node editor there are three fields you need to fill in: To
– the recipient email address, Userid
and Password
– your email login details.
Once you’re done, hit Done and Deploy. Your Voicemail is up and running!
Log Call Events
One more thing before you go! It’s quite useful to see your call events in the debug area and have a better understanding of what’s really going on, so let’s add an event webhook!
Connect an http in
node to an http response
node, as well as to a debug
node, so that you can view your call events in the debug area.
In the http in
node, select POST
as a Method
and fill in the URL
field with /event
.
The http response
node should have 200
set as Status code
, but don’t worry about it, this is the default value as well.
Now call your Nexmo number and follow your call events in the debug sidebar!
Try it Out!
Et voilà! You’ve built your own voicemail service and, hopefully, you’ll never have to put up with another pesky voicemail again. Call your Nexmo number and an email will be headed your way shortly.
Top comments (0)