Visual Designer Tutorial

Welcome to Visual Designer tutorial.

If you are using Visual Designer for first time, you may want to have a look at the Quick Start Guide.adoc to create an application and get familiar with the workflow.

We’re reworking this section of the documentation. Stay tuned for new updates coming up soon. Thanks for your patience.

Introduction

Executing a Visual Designer application is like navigating the web page by page. Instead of viewing your pages in a web browser, you "listen" to them through your phone. Visual Designer builds the markup and Restcomm reads it to you. It all works in a request-response fashion. However, instead of html responses are made of RCML. The same applies for pure RCML applications but we won’t cover that in this guide.

Modules

This step-by-step concept is implemented using modules. They are linked together and executed one at a time, resulting in an actual application flow.

In the Visual Designer UI, modules appear as tabs under the horizontal menu. Default blank applications typicaly come with a single Welcome module already in place.

Here is how four module tabs look like in Visual Designer.

Tutorial module tabs

Create a module

Υou can easily create modules by clicking on the '+' button in your menu. Each module has a label and a name. The label is editable and works as user-friendly title of the module. The name is an identifier used internally and cannot be changed. By default new modules will be labeled 'Untitled module'. You may edit the label by clicking on it and typing the desired value. Pick something short and descriptive with no fancy characters. If you’re curious to find out what the name is, hover your cursor over the label and wait a couple of seconds. The name will appear as a hint.

Go ahead, create a new module and label it 'sales'. Let’s see if we can implement a simple IVR. After doing it check its name. It should be module1. Drop a Say element inside of it and type "Welcome to sales" in it.

Your application should now look like this:

Tutorial sales module

Remove or hide a module

If you want to remove a module click the trashbin icon present on the tab. This will remove it altogether from the project. If your list of modules grows big and your screen gets crowded you may also hide it to get it out of your way. Click on the down arrow on the module tab, next to the trashbin to hide it. Don’t worry, you may still bring it back from the Modules dropdown in the horizontal menu.

Take some time to create/remove/hide modules to get the hang of it.

When you open an application all modules will be in hidden except of the starting one. You can make them visible by choosing them from the Modules dropdown.

Startup module

One of the modules will be the entry point of your application. It will be executed first and will point to other modules. By default this is the Welcome module. You may change the startup module from the Startup module dropdown.

Tutorial startup module

Standalone modules

Creating a module won’t have any effect on your application unless you somehow incorporate it to your application flow. Typically this is done through a process called 'linking' which we will describe in a while. For now, your 'sales' module is not reachable. It’s like a web page to which no other pages link to.

Collecting input

As with tranditional applications, voice applications have some sort of input and output. Say verbs are a way to express output that manifests as a text-to-speech message. On the other hand, the Collect element is used as an input gateway. You will find it in your toolbox on the left handside.

Collect element captures one or more keys pressed by the user on his mobile device and sends them to the application. This is known as DTMF capturing. Alternatively, speech recognition (ASR) can be used to convert spoken language to its written form. We will stick to DTMF for now and cover ASR in another documentation section.

Each Collect element may have a prompt. This is a tightly coupled message that the user will hear when the Collect is executed or in case of validation errors. It’s a prompt for the user to do something.

In your appication, switch to the Welcome module and locate the Collect element in the toolbox. Then, drag it onto the module under the existing Say. Add another Say element but this time drop it inside the Collect under 'Prompt' section. Type 'Press 1 for sales' as text in the Say element.

The Collect element should now look like this:

Tutorial collect menu prompt

Menus

A Collect has two modes of operation. It will either work as a menu or as a digit collector. Menus are very popular in voice applications for letting users easily navigate hierarchical dialog structures. They map numeric values to different modules using mappings.

In the newlly added Collect element click Add mapping to create a new mapping. In the Digit field type '1'. In the target field select the 'sales' module.

Mappings are straightforward. The application will try to match the user input to the values provided in the mapping’s Digit field. When a match is made the corresponding module will be executed. Otherwise, the validation message (if any) will be played and another round or 'collection' will start over i.e. the prompt will be re-played and new user input will be captured.

Type some validation text in the 'Say if invalid' field. E.g. 'You have entered a wrong input, please try again'.

The Collect element should now look like this:

Tutorial collect menu

No input at all

Any input that is not matched against one of the mappings will be considered invalid. However, having no input at all is a different case. Instead of getting validated, the application will skip this Collect and proceed with the next element.

Now is time to call your application again and see how it behaves. Don’t forget to save it first.

Digit collector

Comming soon