We make our own Google Call Screening based on Voximplant and Dialogflow

You may have heard or read about the Call Screening feature that Google rolled out for its Pixel phones in the US. The idea is great - when you receive an incoming call, the virtual assistant starts talking, while you see this conversation as a chat and at any time you can start talking instead of the assistant. This is very useful these days, when almost half of the calls are spam, but you don't want to miss important calls from someone not on your contact list. The only catch is that this functionality is only available on the Pixel phone and only in the US. Well, obstacles are there to be overcome, right? Therefore, we decided to tell you how to make a similar solution using Voximplant and Dialogflow. Please under cat.

Architecture

I suggest not to waste time explaining how Voximplant and Dialogflow work, if you wish, you can easily find information on the Internet. So let's get acquainted with the very concept of our Call Screening.

Let's say you already have a phone number that you use every day that you receive important calls on. In this case, we will need a second number, which will be indicated everywhere - in the mail, on a business card, when you fill out online forms, etc. This number will connect to a natural language processing system (dialogflow in our case) and forward calls to your main number only if you want it to. In the form of a diagram, it looks like this (the picture is clickable):

Understanding the architecture, we can take on the implementation, but with one caveat: we will not do mobile application to show a dialog between Dialogflow and an incoming caller, we will create a simple web-application with a dialogue renderer to visually show how Call Screening works. This application will have an Intervene button, by pressing which Voximplant will connect the incoming subscriber to the dialed subscriber, if the latter decides to talk himself.

implementation

Log in your Voximplant account and create a new application like screening:

Open section "Numbers" and buy a number that will work as an intermediary:

Next, go to the screening application, in the "Numbers" section, "Available" tab. Here you will see the number you just bought. Link it to the application using the "Attach" button - in the window that appears, leave all the default values ​​\uXNUMXb\uXNUMXband click "Attach".

Once inside the application, go to the "Scripts" tab and create a myscreening script - in it we use the code from the article How to use Dialogflow Connector. In this case, the code will be slightly changed, because we need to "see" the dialogue between the caller and the assistant; all code can be take here.

WARNING: you will need to change the value of the server variable to the name of your ngrok server (more on ngrok below). Also plug in your values ​​on line 31, where your phone number is your main number (for example, your personal mobile) and voximplant number is the number you recently purchased.

outbound_call = VoxEngine.callPSTN(“YOUR PHONE NUMBER”, “VOXIMPLANT NUMBER”)

The callPSTN call will occur at the moment when you decide to break into the conversation and have a personal conversation with the incoming caller.

After you save the script, you need to link it to the purchased number. To do this, while still inside your application, go to the "Routing" tab to create a new rule - the "New Rule" button in the upper right corner. Specify a name (for example, allcalls), leave the default mask (.* - which means that all incoming calls will be processed by the scripts selected for this rule), and specify the myscreening script.

Save the rule.

From now on, the phone number is tied to the scenario. The last thing to do is link the bot to the application. To do this, go to the "Dialogflow connector" tab, click the "Add Dialogflow agent" button in the upper right corner and upload your Dialogflow agent JSON file.

If you need an agent for example/testing, you can get ours from this link: github.com/aylarov/callscreening/tree/master/dialogflow. Just don't demand too much from him, this is just an example that you are free to redo as you like and feel free to share the results 🙂

Simple NodeJS backend

Let's deploy a simple backend on a node, like this:
github.com/aylarov/callscreening/tree/master/nodejs

This is a normal application that only requires two commands to run:

npm install
node index.js

The server will start on port 3000 on your machine, so we use the ngrok utility to connect it to the Voximplant cloud. When you install skirt, run it with the command:

ngrok http 3000

You will see the domain name that ngrok generated for your local server - copy it and substitute it into the server variable.

Customer

The client application looks like a simple chat that you can pick up from here.

Just copy all the files to some directory on your web server and it will work. In the script.js file, change the value of the server variable to the ngrok domain name and the value of the callee variable to the number you purchased. Save the file and run the application in a browser. If everything is in order, then you will see a WebSocket connection in the developer panel.

Demo

You can see the app in action in this video:

PS If you click on the Intervene button, then the caller will be directed to my phone number, and if you click on Disconnect, it will be ...? That's right, the call will be disconnected.

Source: habr.com