What is the IVR Designer?

The IVR designer is the HTML5 Drag and Drop IVR designer tool:

The working area is divided into two main sections:

A tool palette on the left where:
- you can choose the IVR building blocks (mainly Asterisk key applications and more specific Cally Square value added applications)
- a preview area where you can navigate the whole design map of the IVR project

The design area on the right where you can drag and drop the blocks from the tool palette

On this page:

How to design an IVR

In order to design the IVR flow, you have to drag and drop the Cally Square blocks (see IVR Blocks) into the design area and connect the boxes among them using arrows, like in the picture below:

Connecting blocks

To connect two blocks:

Move the cursor to the center of the block until you see a yellow arrow
Click on the arrow and drag the mouse over the block you want to connect to by keeping the left button pressed and then release the left button

The two blocks are connected now.

Key points for designing an IVR

You must always start your design with a Start block.
All the blocks except Start and Finally require at least one incoming arrow.
All the blocks except Hangup, End, Queue, Internal Dial, External Dial and Goto require at least one outgoing arrow.
You must publish your project to make it active on the production system.
When you use the menu or any other box requiring a label on the branch, you just need to double click on the branch to add the labels (a text box will appear and you will be able to add the labels). You can also change the size, the position and the rotation of the block.

Designer toolbar functionalities

The design area provides a toolbar located on the top header with the following menu and corresponding buttons:

File: here you can:
- create a New project
- Open an existing project
- Save
- Save as (Clone the project)
- Publish
- create a new Variable,
- Import an XML file
- Export the project
- Edit the XML
- Print the current project
Edit: here you find the editing tools to apply on the structure blocks:
- Undo
- Redo
- Cut
- Copy
- Paste
- Delete
- Duplicate
- Select Vertices (the blocks)
- Select Edges (the connections between blocks)
- Select All
View: here you can set the size of the Design Area:
- Zoom
- Fit
- Page Width
Format: here you can set a custom Style for the block
Text: here you can set the font type, size, style and alignment of the label for the selected block
Arrange: here you can set group of blocks, the position (front or back) and the layout of the entire IVR structure (horizontal or vertical flow)

Save : save the project to the local file system. Please keep in mind when the project is just saved it is still not active on the system
Publish : publish the project to the remote system. If the project is published without errors it becomes active and can be used in your system
Print : IVR tree preview for an hardprint
Undo/Redo: undoes or redoes the last action on the application
Copy/Cut/Paste copies, cuts or pastes the selected boxes into the clipboard
Trash : deletes the selected boxes
Actual Size/Zoom in/Zoom Out : re-size the design area or restore the original size

Use this search field to retrieve a block: insert the name of the block and press enter and the block will be found and proposed

Supplementary sections

To fully utilize the benefit of an IVR system, what you also have to use in your design are:

Variables, that can be used in the IVR application for several purposes, like:

- Dynamically change the application flow
- Read or write data in a database table or managing Asterisk variables
- Store the customer pressed digits and codes
- Other purposes

Time Intervals, to define when the IVR should be active;
Sounds, to include audio files in your IVR application.

Browser not supported