Getting Started with Visual Designer Applications

Overview

In this tutorial you will learn how to create and test a communications application using Visual Designer and a registered phone or SIP number.

Prerequisites

Before you get started, you will need an active CPaaS Cloud account with proper access in order to register incoming phone numbers, as well as a registered WebRTC Demo client to test your application.

Creating a Visual Designer Application

When creating your first communications application, it is important to consider the best way to reach your target audience. You can choose voice, SMS, or a combination of the two. To expedite the process, select a template from the gallery.

To access the Template Gallery log into your CPaaS Cloud Account.
Navigate to Applications → Add New App → Create a Visual Designer Application. You will see a screen similar to the one below.

Choose a template from the list. If you are unsure, try the Simple IVR menu.
Enter a name for your application.
Click on the Create button.

Next, you will be taken to the Visual Designer drag-and-drop interface where you can view and customize your application.

Once the design is completed, and the application changes are saved you will need to bind your application to a registered phone or SIP number to test it.

Registering a Phone or SIP Number

In order to test your application you will need to initiate a call or send a message to either a phone number or a registered SIP number that is bound to your application.

Be aware that testing your application with a phone number may result in additional charges for the user who is initiating the call or sending an SMS message. Testing with a SIP number is free of charge since the user is initiating the call or sending a message with a softphone.

While in the prototyping phase of an application, a SIP number is recommended to perform any tests. Once the prototype has a finalized design and is production ready, you can switch to testing with a real phone number. Using a SIP number and a softphone makes it easier to trace and troubleshoot calls locally on your machine with the help of tools like Wireshark.

Registering a Phone Number

Complete the following steps to register a phone number:

Log into your CPaaS Cloud Account
Navigate to Your Account → Numbers → Provider Number
Select the appropriate Country code.
Optionally, you can specify a phone number Area Code.
If you would like your number to match a specific digits pattern, enter it in the Number input field. For example, input 344 if you want your phone number to contain those three digits. Leave the field blank if you have no preference.
Next, select the phone number Capabilities. Possible options include Any or Custom. The Any option will filter numbers that are either Voice, SMS or Voice and SMS enabled. The Custom option lets you choose between Voice-only, SMS-only or Voice and SMS enabled numbers.

If you are designing a Voice application that uses an SMS verb, you will have to register a phone number that supports both Voice and SMS functionality. Voice-only phone numbers do not let you send and receive SMS messages.

To continue, set the phone number Type. Options include Any or Specific. Any will filter numbers that are either Landline, Mobile, or Toll-Free. The Specific option lets you select the exact phone number type you would like to register.
When done, click on the Search button. A list of available phone numbers matching your search will be displayed.

Choose a phone number from the list and click on the associated Register Number button to complete the registration process.

Registering a SIP Number

Complete the following steps to register a SIP number:

Log into your CPaaS Cloud Account.
Navigate to Your Account → Numbers → SIP Number
Enter the number you have in mind in the SIP Address field. For example: +4444
Optionally, you can specify a Friendly Name for this number so it is easily recognizable in a list of registered SIP numbers.

A prompt message will be displayed similar to the one shown below.

Click on the Register button.

Testing Your Visual Designer Application

If you have bound your application to a phone number, you can make a call or send a message to it right away. If your application has been bound to a SIP number, you can use the CPaaS WebRTC Demo to test it or install softphone software, like Linephone or Jitsi, on your local machine.

Testing Your Visual Designer Application with the CPaaS WebRTC Demo

The CPaaS Platform offers a quick and easy way to test your Visual Designer application with the help of the WebRTC Demo. Please visit the following tutorial for more information on how you can do that.

Testing Your Visual Designer Application with Jitsi

To begin with, you will need to download and install Jitsi on your machine. Next, you will need to configure a Jitsi instance with your CPaaS SIP Client.

A CPaaS SIP Client is created by default along with your CPaaS Cloud Account. If you are not sure what your SIP Client name and password are, you can navigate to the CPaaS Console Home Page → Clients.

For the purpose of this tutorial we will use alice as an example of a SIP client. Please replace that with your own CPaaS SIP Client username.

Complete the following steps to set up a Jitsi instance with your CPaaS SIP Client.

Open the Jitsi application and navigate to File → Add new account
Select SIP from the Network dropdown menu
Enter your CPaaS SIP Client Username (SIP id) and password

Click on the Advanced button
In the Account Registration Wizard, go to the Connection tab
Enter your CPaaS domain as Registrar IP address and set the Port to 5060

Press Next at the bottom of the window and then click on the Sign in button
You should now see that alice is registered

You can now make a call from your SIP client to your Visual Designer application by dialing the registered SIP application number as follows.