Call Routing Using Keypad Input

In this tutorial, we will guide you through implementing a basic call routing application with FreeClimb that utilizes user DTMF (e.g. keypad) inputs to route users. This system will perform the following actions:

  • Receive an incoming call via a FreeClimb application
  • Get user DTMF (e.g. keypad) input
  • Redirect a user to the appropriate endpoint
You can also find the code for this sample app on GitHub

👍

You're ready for this tutorial if you have:

Followed the IVR sample app set-up instructions


Step 1: Create the express server

The server will provide endpoints where user input can be captured. Create an index.js
file in your project directory, import the needed dependencies, and create/configure the Express application:

require('dotenv-safe').config()
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())
const freeclimbSDK = require('@freeclimb/sdk')

const port = process.env.PORT || 3000

Step 2: Handle an incoming call

The first step in our call routing application will be to handle incoming calls. To do this, add the following to index.js:

const host = process.env.HOST
const accountId = process.env.ACCOUNT_ID
const apiKey = process.env.API_KEY
const freeclimb = freeclimbSDK(accountId, apiKey)
 
let mainMenuErrCount = 0
 
app.post('/incomingCall', (req, res) => {
    res
        .status(200)
        .json(
            freeclimb.percl.build(
                freeclimb.percl.say('Welcome to the node call router 1.0.'),
                freeclimb.percl.pause(100),
                freeclimb.percl.redirect(`${host}/mainMenuPrompt`)
            )
        )
})

Step 3: Collect digits via a main menu

Next we'll collect DTMF input from the user to direct them to their next destination. To do this, we'll create endpoints for both DTMF collection and menu routing and add them to your index.js file:

app.post('/mainMenuPrompt', (req, res) => {
    res.status(200).json(
        freeclimb.percl.build(
            freeclimb.percl.getDigits(`${host}/mainMenu`, { // once dtmf input is collected redirect to main menu for further routing
                prompts: [
                    freeclimb.percl.say(
                        'Press 1 for existing orders, 2 for new orders, or 0 to speak to an operator'
                    )
                ],
                maxDigits: 1,
                minDigits: 1,
                flushBuffer: true
            })
        )
    )
})

Next we'll add the logic for how the app will handle user input to index.js:

app.post('/mainMenu', (req, res) => {
    const getDigitsResponse = req.body
    const digits = getDigitsResponse.digits
    const menuOpts = new Map([
        [
            '1',
            {
                script: 'Redirecting your call to existing orders.',
                redirect: `${host}/endCall`
            }
        ],
        [
            '2',
            {
                script: 'Redirecting your call to new orders.',
                redirect: `${host}/endCall`
            }
        ],
        ['0', { script: 'Redirecting you to an operator', redirect: `${host}/transfer` }]
    ])
    if ((!digits || !menuOpts.get(digits)) && mainMenuErrCount < 3) {
        mainMenuErrCount++
        res.status(200).json(
            freeclimb.percl.build(
                freeclimb.percl.say('Error, please try again'),
                freeclimb.percl.redirect(`${host}/mainMenuPrompt`)
            )
        )
    } else if (mainMenuErrCount >= 3) {
        mainMenuErrCount = 0
        res.status(200).json(
            freeclimb.percl.build(
                freeclimb.percl.say('Max retry limit reached'),
                freeclimb.percl.pause(100),
                freeclimb.percl.redirect(`${host}/endCall`)
            )
        )
    } else {
        mainMenuErrCount = 0
        res.status(200).json(
            freeclimb.percl.build(
                freeclimb.percl.say(menuOpts.get(digits).script),
                freeclimb.percl.redirect(menuOpts.get(digits).redirect)
            )
        )
    }
})

Step 4: Transfer and end call

Finally we'll add in appropriate endpoints for simulating a call transfer and ending a call. Do so by adding the following to your index.js file:

app.post('/transfer', (req, res) => {
    res
        .status(200)
        .json(
            freeclimb.percl.build(
                freeclimb.percl.say('Please wait while we transfer you to an operator'),
                freeclimb.percl.redirect(`${host}/endCall`)
            )
        )
})
 
app.post('/endCall', (req, res) => {
    res
        .status(200)
        .json(
            freeclimb.percl.build(
                freeclimb.percl.say(
                    'Thank you for calling Call Router 1.0, have a nice day!'
                ),
                freeclimb.percl.hangup()
            )
        )
})

Then, set the app to listen on your desired port:

const server = app.listen(port, () => {
    console.log(`Starting server on port ${port}`)
})

module.exports = { app, server }

Step 5: Run your app

To hear your DTMF call routing app in action, run the following command at the command line:

yarn start

Once you do this, call the FreeClimb number associated with your application. From there you should be able to experience your call routing application.

Congrats! You can now build your own custom DTMF call routing application. 🥳🥳

Or, to add voice-enabled capabilities, try our Call Routing Using Voice Input tutorial.