Visual Designer Quick Start Guide
This guide will help you learn the basics of Visual Designer.
New applications are easily created from within theConsole.
In order to create aApplication:
Click on the
Add New Appbutton from the
ApplicationsTab. This will start the application creation wizard.
Create a Visual Designer Applicationin the next view.
In the Template Gallery pick the
Blanktemplate. That’s the most basic Visual Designer application. Template Gallery offers a range of options to kick start your application and can save you a great deal of time and effort. More templates are added on a continunous basis.
Next, you need to name your application and choose a type for it. The name is not an identifier but more like a user friendly way to refer to your app. We’ll use
greeting-appfor the purpose of this example.
The type determines whether this application will be used to handle incoming voice calls or SMS messages. Choose
When done, click
Create. This will create your application and navigate you to the Application details page.
Designto open the Visual Designer editor in a new tab.
You’re almost there. Your application has been created and is ready to greet you with the default message when called. You do need a way to reach it though. To do that, you’ll have to attach it to aNumber and finally make a call to it.
You’ve just created a voice application. Such applications are executed when an incoming voice call is made to aNumber. We will register a SIP Number which is a number that can be called via a SIP or WebRTC Client
Numbers Tab and follow the steps below:
At the top of the screen, provide a value for
Friendly Namesuch as 5555 by example. Remember, what you define as SIP Address is the number you will call to test your application. Click
Registerto register this number and start the wizard for linking a Number to your newly created application. The operation will fail if the number has already been registered.
You should now see the number details form similar to the screenshot below. Your number is registered but does not point to your application yet.
Voicesection expand the dropdown with the list of applications. You should see an entry named
greeting-app. Select it.
Save changesat the bottom.
Your number is now linked to the application.
It’s now time to test the application. Voice applications are executed when an incoming voice call is made to theNumber you just registered. We will use the WebRTC Demo client that is available in your account for testing purposes.
Start WebRTC Demo client. Please use the same password that you used to create yourAccount, unless you changed it in the Clients Tab
From WebRTC Demo client
Create a new Contact named after the number you created. In our case this is 5555.
Place your call and make sure your sound output device is active. image::vd-quickstart-5.png[Greeting app demo call]
You should hear the greeting message of the
Keep the tab open for later use.
Now that the base application has been created, linked to aNumber and tested through the WebRTC Demo Client, you can go ahead and tweak your application with more useful and interesting features. Let’s switch back to Visual Designer tab and introduce some basic concepts.
On the left, you will notice a list of buttons you can drag and drop into the modules to the right of this list. They are called
Elements are the building blocks of each Visual Designer application.
You will notice that your application already contains a
Say element. It contains the greeting that
you heard when calling the application.
Say elements are able to convert written phrases to their
audio representations. We call this Text-To-Speech (TTS).
Elements are grouped together in sequences called
modules. The whole area next to the
element toolbox is where modules appear. They are organized in a series of tabs and will accept
elements when dragged and dropped over them. Modules are the main execution unit in a Visual Designer application.
By default new applications already contain a Welcome module with the
Say element previously mentioned.
Since this gets executed first, this is called the
Let’s now change the greeting to something more interesting.
Edit the default text in the
Sayelement and use something more personalized like 'Hello Alice. I am glad to hear back from you.'.
Get back to the WebRTC Demo tab and call your application once again.
You should hear the updated greeting.
Once you’re done, it’s good practice to close the editor tab. Think of Visual Designer as an editor like the one you edit images in. You get a new window for each new image you edit and you’re allowed to switch between them. When done, you just close what you don’t need any more. This is not required but will result in a cleaner and faster workflow.