Creating a Phone Support Portal with the 3CX Call Flow Designer – Part 1
On this topic
The 3CX Call Flow Designer is a powerful tool that allows you to easily create voice applications by dragging functional blocks to a visual design interface. This makes it possible to create powerful applications without the need of programming or telephone technology skills.
One of the most common questions that CFD users ask is how to validate a customer ID and PIN in an application created using the 3CX Call Flow Designer. In this series of articles we will show how you can perform this validation using the following data sources:
- Web Service
- XML File
- CSV Text File
- SQL Server Database
To start off, we’ll create the application call flow, which is independent of the chosen data source. Then we will create separate user components to perform the validation in different ways.
Description of the voice application to create
The application that we’re creating will allow customers with a support contract to access the help desk department, while callers that cannot be validated will be transferred to the sales team for assistance.
To begin, we will create an initial menu where customers have two choices:
- Enter the customer ID and PIN.
- Transfer the call to the sales team.
When users select option 1, they will be asked to enter the customer ID and PIN. Then, the information entered can be validated against different data sources. If the validation is successful, the call will be transferred to the help desk department. If the validation fails the customer will have the option to re-enter the information (in case a mistake was made) for it to be revalidated, or they can also be transferred to the sales team to get assistance in recovering their password.
This application, in addition to implementing a solution to this problem, will also show how to make it easier to understand and maintain through the use of custom components. Let’s start!
Creating the Application Callflow
Step 1 – Creating the project
We start creating a new project. To do this open the 3CX Call Flow Designer, go to “File > New > Project”, select the folder in which you want to save the project, give the project a name, in this case “PhoneSupportPortal”, and click “Save” to create it. The main call flow Main.flow will be opened automatically.
Step 2 – Defining variables
Now we’re going to define the following project variables, which will help us to easily configure, from a single place, some extensions that we’ll use to transfer the call in different points of the callflow:
- SalesTeamExtension: this will be the extension for the sales team.
- HelpDeskExtension: this will be the extension for the help desk team.
In order to create these project variables:
- In the Project Explorer, select the “project” node, in this case it is the “PhoneSupportPortal”.
- In the Properties window, click the button on the right of the “Variables” property.
- The Variable Collection editor will be shown. Now add the two variables mentioned earlier:
- SalesTeamExtension, assign the value "100"
- HelpDeskExtension, assign the value "101"
- Click “Add”, and a new variable with default values in its properties will appear.
- Click the field next to the “Name” variable and type in “SalesTeamExtension”.
- Click on the field next to the “InitialValue” and type in "100" .
- Press “OK” and repeat the process again to add “HelpDeskExtension” to the variable collection.
Step 3 – Creating the main menu
Once you have defined the necessary variables, it’s time to create the main menu. We need to offer two options to the caller:
- Enter the customer ID and PIN, in order to get transferred to the support team.
- Transfer the call to the sales team.
In order to create the main menu:
- Drag a “Menu” component from the toolbox and drop it in the design area.
- Go to the Properties window and change the name of the component to “mainMenu”. Ensure that only options 1 and 2 are enabled.
- Configure the timeout and retries (MaxRetryCount) according to your needs. In this example we’ll leave the default values, that means to wait for DTMF input for 5 seconds and allow up to 3 retries (i.e. 4 total attempts).
- Now we need to configure the menu prompts. Double click on the Menu component to show the configuration dialog. Click on the buttons to show the Prompt Collection Editor for each type of prompts. For the Initial Prompts we use a welcome message that will be played only the first time the caller accesses the menu, but not in the retries (for example after entering an invalid digit). On the other hand, the Subsequent Prompts will be played after an error has occurred (no input or invalid input). In this case, we’ll use the following audio files:
- welcome.wav: “Welcome to the Phone Support Portal”
- main_menu_options.wav: “If you have a Customer Support ID and PIN number, please press 1. Otherwise, please press 2 to leave a voicemail for the Sales Team, to assist with password recovery.”
- timeout.wav: “We didn’t receive any digit, please try again.”
- invalid_digit.wav: “The selected option is not valid, please try again.”
- Configure the Initial Prompts as follows:
- And configure the Subsequent Prompts as follows:
- Now configure the file timeout.wav for the Timeout Prompts and the file invalid_digit.wav for the property Invalid Digit Prompts.
Step 4 – Transferring the call to the sales team
The menu component is ready, now we need to define what needs to be done in each branch of the menu. When the user presses the Option 2, we should transfer the call to the sales team.
To do this, add a Transfer component to the Option 2 branch. From the properties window change the name to “transferToSales”.
Press the button on the right of the “Destination” property to define the expression that will return the destination number to which we will transfer the call. In this case, we will use the Expression Editor to select Variable, and then choose the project variable “SalesTeamExtension” that we defined previously.
In the menu, if the customer does not enter any option, or enters an invalid option, and exceeds the maximum number of retries, we will also transfer the call to the sales team, so that the customer can be assisted. To do this, repeat the steps above to add a new “Transfer” component to the branch “Timeout or Invalid Option”.
Step 5 – Creating the Login component
When the caller presses the menu option 1, we need to ask for their credentials (ID and PIN). We will do this in a custom user component. Using this approach we simplify the main flow diagram, and make it easier to read and maintain. Also, this Login component might be reused in a different part of the application, or even in a different application later.
To create a new component, go to the Project Explorer, and right click on the project node. Select the “New Component” option to create an empty component, and change the name to “Login”. Double-click the component to open it.
In this new Login component we’ll do the following:
- Ask the callers to enter their customer ID.
- Ask the callers to enter their PIN.
- Validate the information using an external data source.
- If validation is successful, transfer the call to the help desk team. Otherwise offer to re-enter the customer ID and PIN. We can let the caller retry for example up to 3 times.
To ask for the customer ID, we will use a “User Input” component. Drag the component from the toolbox to the design area and rename it “requestCustomerID”.
Assuming that the customer ID should have between 5 and 10 digits, modify the properties MaxDigits and MinDigits properly. Then configure the messages in the same way we did for the main menu.
If the user enters invalid data or no information at all, we’ll transfer the call to the sales team. To do this, we will use a “Transfer” component and configure it as we saw in previous steps. Prior to the transfer, we can play a message to the caller, informing that we are transferring the call to the sales team. The User Input component will look like this:
Now we’re going to do something very similar to ask for the PIN. Add another “User Input” component just below the previous, and rename it to “requestCustomerPIN”. Then properly configure the prompt messages and valid digits. We will have something like this:
At this point, the caller has entered the customer ID and PIN, and we need to validate this information using an external data source. We will do this validation in a new component, which will be empty at the moment. In the next article in this series, we will implement this component for different data sources.
To create the new component, go to the Project Explorer, right-click the project name and select “New Component”. Rename the component to “ValidateData”. Open the component to define the properties that we will need in the interface, to pass parameters and receive the return value from it after its execution:
- An input variable on which we will specify the Customer ID entered.
- An input variable on which we will specify the Customer PIN entered.
- An output variable which will return the validation result: successful or failed.
After opening the new component named ValidateData, go to the properties window and click the button on the right of the Variables property. Define the three variables mentioned: CustomerID, CustomerPIN and ValidationResult. The three properties will have ReadWrite access and Public Scope. We can leave the initial value empty, as it will be filled in runtime.
Now that we have the skeleton of the ValidateData component, we can use it inside the Login component. To do this, open again the Login component and drag the ValidateData component from the toolbox and drop it below the second User Input component. Change the component name to validateData and set the properties CustomerID and CustomerPIN from the properties window, using the variables requestCustomerID.Buffer in the first case and requestCustomerPIN.Buffer in the second.
We just need to verify the result of the validation. To do this, we need a “Create a Condition” component, which allows us to take different paths based on the conditions that we define. Add a “Create a Condition” component below the validateData component, and change the name to checkValidationResult. In the first branch we’ll check if the validation result is successful, therefore we will change the name of the branch to isSuccess, and configure the Condition property to the following expression, which can be easily created with the Expression Editor:
Finally, in this first branch we’ll transfer the call to the help desk team, after playing a message, explaining the user about this transfer.
When the validation is not successful, the execution will continue in the second branch of the “Create a Condition” component. Let’s rename this branch to “isError”. Now we just need to implement the logic to retry the login procedure if the validation fails. To do this, we need to iterate through the components we just created, and that means that we need to use “Loop” component. To prevent the user from looping indefinitely, we’ll restrict the number of iterations to 3. This is done using a private component variable named “LoopCount”, with an initial value of 0, which will be increased into the isError branch, i.e. every time there is a validation error. To create the variable, go to the “Project Explorer” window, select the “Login” component and then from the “Properties” window click the button on the right of the “Variables” property. Add a variable named “LoopCount” and set the initial value to 0, the “Scope” to “Private” and the “Type” to “ReadWrite”. Then in the “isError” branch, add a new “Increment Variable” component, and specify that the variable to increment is “callflow$.LoopCount”. Rename the component to “incrementLoopCount”.
The last step is adding the “Loop” component. Drag it from the toolbox and drop it at the beginning of the diagram. Rename the component to “loginLoop” and enter the following expression for the “Condition” property:
Now select all the other components (from requestCustomerID to checkValidationResult), and drag them into the Loop component. Remember that you can select multiple components using the CTRL key.
Validating the customer information using external data sources
Now that we have the application callflow ready, we need to perform the validation using external data sources. To do this, we need to implement the ValidateData component that we have left empty for now. In the next articles, in this series, we will show how to do this validation with the following data sources:
- Web Service
- XML File
- CSV Text File
- SQL Server Database
The second part of the series Creating a Phone Support Portal with the 3CX Call Flow Designer – Part 2 shows how to perform the validation using a Web Service.