Getting Started – Creating a Simple Call Flow

Introduction

This guide describes how to create a simple call flow and deploy it to the 3CX Phone System, to give an overview of how to work with the CFD. When you are able to build a simple application, you can then familiarize yourself with the more advanced components and build more complex applications.

This example shows how to build a call flow offering a simple menu, e.g. “For Sales press 1, for Help Desk press 2, to make an outbound call press 3, or hold on and an operator will assist you.”. The concepts used in this section are explained in more detail in more advanced guides.

Creating the Project

To create a CFD project:

1. Click “File” > “New” > “Project”.
2. Enter a project name and location and click “Save”.
3. The project is created with default properties. If you need to change these, select the project in the “Project Explorer” panel to display and edit its properties in the “Properties”.

CFD creates these folders in the project folder:

• “Audio” to store audio files for the project,
• “Libraries” to store C# script files for the project, and
• “Output” for the application build output.

Creating a Call Flow

When a new project is first saved, an empty “Main” call flow is automatically created in a new tab, on which you can drag the components to form your call flow.

Each call flow is created with two properties, which can be edited from the “Properties” panel:

• “Name” - the name of the call flow, e.g. “Main.flow”
• “Variables” - the list of variables that you can use in this call flow.

To open the call flow, double-click on the call flow item in the “Project Explorer” panel.

Adding Components to the Call Flow

Once you have created the call flow, you can drag and drop components from the “Components” toolbox on the designer page. In this example we add a “Menu” component:

1. From the “Components” toolbox select the “Menu” component.
2. Now drag it onto the designer surface, and drop it in the call flow.
3. Use the “Properties” panel to give the component an appropriate name, e.g. “mainMenu”.
4. By default each menu includes 2 options. We can add a third option by right-clicking on the menu component and selecting “Add Option 3”.

Note: When the “Menu” component is added to the designer, its default properties are set according to the template in “Tools” > “Options” > “Component Templates” > “Menu”. You can change the “Menu” component properties from the “Properties” panel or its configuration form. You can open the configuration form by double-clicking the component or right-click the component and select “Configure” in the context menu.

5. To change the menu prompt(s), double-click on the menu component and click on “Initial Prompts” to edit.
6. Use the “Prompt Collection Editor” to  add an “Audio File Prompt”, and select an audio file from the dropdown list or browse to select from the file system. The drop down list shows the names of the files you have in the project’s audio folder. Browsing and selecting an audio file, automatically copies it to this folder. Audio files must have the format WAV, Mono, 8 KHz, 16 bits per sample, otherwise you need to use this guide to convert audio files in a different format.
7. You can add prompt messages to play when the user enters an invalid option or does not input any digit, by changing the “InvalidDigitPrompts” and “TimeoutPrompts” properties for the menu component.
8. Now that we configured the simple menu, we need to add the components to be executed when any of the options is activated. Let’s assume we want to transfer to the Sales department if the user presses “1”. To do this, drag and drop a “Transfer” component from the “Components” toolbox to the designer page, in the “Option 1” branch.
9. Change the name of the transfer component to “Sales”.
10. Double-click on the “Transfer” component and enter the required destination extension for Sales. Repeat this procedure for “Option 2” (e.g. transfer to Help Desk) and for the “Timeout or Invalid Option” (e.g. transfer to the operator or the extension’s voicemail).
11. For “Option 3” we make things a bit more interesting, by asking for a destination number and then transferring the call to that number. To ask for the destination number we use a “User Input” component by dragging and dropping it inside the “Option 3” branch. Change the component name (e.g. askForDestination) and configure the message prompt to use. In the “Digits” section, specify that numbers from 0 to 9 are valid digits and other digits are invalid (star and pound). Also set “MinDigits” and “MaxDigits” to a reasonable value, e.g. between 3 and 5. When the user enters a valid input, we need to transfer the call to the specified destination, otherwise transfer the call to the operator.

12. Drag and drop a “Transfer” component onto the “Valid Input” area and double-click the new component to display its configuration dialog.
13. Click on the “Expression editor” button (Fx) on the right of the “Transfer Call To” field to open the “Expression Editor”.
14. To transfer the call to the selected destination,  click on the “Variables” tab and then drag-and-drop the “Buffer” property of the “askForDestination” component, to the “Expression” panel, click on “OK” and then “OK”.

Building the Project

The project is now ready to build and generate a ZIP file to be uploaded to the 3CX Phone System. To build the project select the menu command “Build” > “Build All” or use the “Ctrl + B” key combination. The “Output” panel displays the compilation progress, and the “Error List” panel shows any error(s), warning(s) or important message(s) that you need to consider.

The first time a project is built, you are asked to assign an extension to it. This information is stored in a manifest file inside the generated ZIP output, to be used by 3CX when the app is deployed.

Assigning an extension number is useful for calling a CFD app from internal extensions. However, if your app only handles external calls, you can leave the Extension field empty, and use the CFD app name instead.

The assigned extension number can be updated from the:

• menu “Build” > “Project Extension”.
• “Properties” panel when the project node is selected in the “Project Explorer” panel.

When the build process finishes, you can click on the link in “Output” to open the folder containing the generated ZIP package.

Deploying the Project to 3CX Phone System

To upload your successfully built project to the 3CX Phone System:

1. Login to the 3CX Management Console and go to “Advanced” > “Call Flow Apps”.

2. Click on the “Add/Update” button and upload the generated package. If this is a new project, it is created as a new call flow app, otherwise the existing app is updated.

Your new call flow app is now ready to use.

Executing a Call Flow App

If the app is to be called from internal extensions, you need to assign an extension when building the app as described above. After deploying on the 3CX PBX, you can call the assigned extension number to connect to the app.

See Αlso

• Install the 3CX Call Flow Designer
• Accessing a Database from a CFD Voice App
• Sending Emails from a CFD Voice App
• How to Play a Sequence of Digits from a 3CX Call Flow Designer Voice App
• Automated Telephone Ordering Voice app with CRM integration via the 3CX API.
• Creating a Phone Support Portal with the 3CX Call Flow Designer – Part 1, 2, 3, 4
• Routing Calls Based on the Time of Day
• Creating an Outbound Dialer
• Time-Based Routing without Programming
• Using the Authentication Component to Validate Customers
• Using the Credit Card Component
• Text to Speech with the 3CX Call Flow Designer
• Creating a predictive dialer with the 3CX CFD
• Using the Loop component to navigate upwards
• Registering and making callbacks
• Using the survey component
• Using the CRM Lookup component
• See how to integrate 3CX with the CRM API.

Last Updated

This document was last updated on 25th May 2023

https://www.3cx.com/docs/manual/cfd-building-projects/