Loading...

IVR Designer

HomeIVR Designer

IVR Designer

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
How to design an IVR

In order to design the IVR flow, you have to drag and drop the Cally Square 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.

Labels example

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, thatcan 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.

Tags: