Creating a Phone Support Portal with the 3CX Call Flow Designer – Part 1

Introduction

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. These guides show how you can perform this validation using these data sources:

  • Web Service
  • XML Text File
  • CSV Text File
  • SQL Server Database

To start off, we create the application call flow, independent of the chosen data source. Then we create separate user components to perform the validation in different ways.

💡 Tip: The project for this example application is available via the CFD Demos GitHub page, and is installed along with the 3CX Call Flow Designer in your Windows user documents folder, i.e. “C:\Users\YourUsername\Documents\3CX Call Flow Designer Demos”.

Description of the Voice Application to Create

The application that we are creating allows customers with a support contract to access the help desk department, while callers that cannot be validated are transferred to the sales team for assistance.

To begin, we create an initial menu where customers have two choices:

  1. Enter their customer ID and PIN.
  2. Transfer the call to the sales team.

When users select option 1, they are 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 is transferred to the help desk department. If the validation fails, customers have the option to re-enter their information for revalidation, in case a mistake was made, 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, also makes it easier to understand and maintain such a solution using custom components.

Create the Application Callflow

Step 1 – Create 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.flow” call flow is opened automatically.

Step 2 – Define Variables

Now we are going to define these project variables, to easily configure some extensions to use for transferring the call at different callflow stages:

  • SalesTeamExtension: the extension for the sales team.
  • HelpDeskExtension: the extension for the help desk team.

To create these project variables:

  1. In the “Project Explorer” select the project, e.g. PhoneSupportPortal.
  2. In the “Properties”, click the ellipsis button on the right of the “Variables” property.
  3. The “Variable Collection Editor” is shown to add the two variables mentioned earlier:
  • SalesTeamExtension: assign the value "100"
  • HelpDeskExtension: assign the value "101"

Variable Collection Editor configuration

  1. Click Add to add a new variable with default property values.
  2. Click the field next to the Name variable and type in SalesTeamExtension.
  3. Click on the field next to the InitialValue and type in "100" .
  4. Click OK and repeat the process to add HelpDeskExtension to the variable collection.

Step 3 – Create the Main Menu

Once you have defined the necessary variables we can create the main menu, offering these options to the caller:

  1. Enter the customer ID and PIN and get transferred to the support team.
  2. Transfer the call to the sales team.

To create the main menu:

  1. Drag a Menu component from the toolbox and drop it in the design area.
  2. Go to the “Properties”, change the name of the component to mainMenu and ensure that only options 1 and 2 are enabled.
  3. Configure the timeout and retries in “MaxRetryCount” according to your needs. In this example we leave the default values, i.e. wait for DTMF input for 5 seconds and allow up to 3 retries for a total of 4 attempts.
  4. Now we need to configure the menu prompts. Double-click on the “Menu” component to show its configuration dialog. Click on the buttons to show the “Prompt Collection Editor” for each prompt type. For the “Initial Prompts” we use a welcome message to be played only the first time the caller accesses the menu, but not for the retries, e.g. when entering an invalid digit. On the other hand, the “Subsequent Prompts” are played after an error has occurred, i.e. invalid or no  input. In this case, we can use these 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 info, please try again.”
  • “invalid_digit.wav”: “The selected option is not valid, please try again.”

Prompt Collection Editor configuration in 3CX CFD

  1. Configure the “Initial Prompts” as in the example above.

Prompt Collection Editor configuration in 3CX CFD

  1. And configure the “Subsequent Prompts” as above:
  2. Now configure the file “timeout.wav” for the ”Timeout Prompts” and the file ”invalid_digit.wav” for the property ”Invalid Digit Prompts”.

Step 4 – Transfer the Call to the Sales Team

The “Menu” component is ready to define what needs to be done in each of its branches.

  1. When the user selects “Option 2”, we transfer the call to the sales team. To do this, add a “Transfer” component to the “Option 2” branch and use the “Properties” to rename it to transferToSales.
  2. Click the button on the right of the Destination property to define the expression to use for returning the destination number for transferring the call. In this case, we use the Expression Editor, click on the “Variables” tab and then drag-and-drop the previously defined SalesTeamExtension project variable to the “Expression” panel.
  3. In the menu, if the customer does not enter any option, or enters an invalid option, exceeding the maximum number of retries, we also transfer the call to the sales team to assist the customer. To do this, repeat the steps above to add a new Transfer component to the branch “Timeout or Invalid Option”.

Step 5 – Create the Login Component

When the caller selects the menu option 1, we need to ask for their ID and PIN info via 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.

New Component action in 3CX CFD context menu

To create a new component, go to the “Project Explorer” and right-click on the project name. Select the New Component option to create an empty component and change the name to Login. Double-click the component to open it. This new “Login” component needs to:

  • Ask callers to enter their customer ID.
  • Ask 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 customers the option to re-enter their ID and PIN, e.g. up to 3 times.

To ask for the customer ID we need to use a User Input component. Drag the component from the toolbox to the design area and rename it requestCustomerID.

Assuming that the customer ID is between 5 and 10 digits, modify the properties “MaxDigits” and “MinDigits” properties. Then configure the messages in the same way we did for the main menu.

Example callflow in 3CX CFD

If the user enters invalid data or no information at all, we transfer the call to the sales team as in the example “User Input” component above. To do this, we use a Transfer component and configure it as in the 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.

Example callflow in 3CX CFD

Similarly, to ask for the PIN we add another User Input component just below the previous, and rename it to requestCustomerPIN, as shown in the example flow above. Then properly configure the prompt messages and valid digits.

At this point, the caller has entered their customer ID and PIN, and we need to validate this information using an external data source. We do this validation in a new empty component, for the moment, to be implemented for different data sources in the next guide in this series.

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 need in the interface, to pass parameters and receive its return value after it executes:

  • An input variable specifying the Customer ID entered.
  • An input variable specifying the Customer PIN entered.
  • An output variable returning the validation result, i.e. success or failure.

Variable Collection Editor dialog in 3CX CFD

After opening the new component named “ValidateData”, go to the “Properties” panel and click the button on the right of the “Variables” property. Define these three variables with “Accessibility” = “ReadWrite” and “Scope” = “Public”: CustomerID, CustomerPIN and ValidationResult. Leave the initial value empty, to be specified at runtime.

Example callflow and component properties in 3CX CFD

Now that we have the skeleton of the “ValidateData” component, we can use it inside the “Login” component. To do this, open the “Login” component and drag the “ValidateData” component from the toolbox and drop it below the second “User Input” component, as in the example above. Change the component name to validateData” and use the “Properties” panel to set “CustomerID” and “CustomerPIN” to the variables requestCustomerID.Buffer and requestCustomerPIN.Buffer respectively.

To verify the result of the validation, we need a Create a Condition component to allow us to take different paths based on the defined conditions. Add a Create a Condition component below the validateData” component, and change the name to checkValidationResult”. In the first branch we check if the validation result is successful, so name the branch as isSuccess”. Configure its Condition” property to this expression via the “Expression Editor”:

EQUAL(validateData.ValidationResult,true)

Example callflow in 3CX CFD

Finally, in this first branch we transfer the call to the help desk team, after playing a suitable message to the user for the transfer. Consider the example flow above.

When the validation is not successful, the execution continues to the second branch of the Create a Condition component, named isError. Now we just need to implement the logic to retry the login procedure if the validation fails, by iterating through the components we created using a Loop component. To prevent the user from looping indefinitely, we use a private component variable named LoopCount, initialized to 0, to restrict the number of iterations to 3. The LoopCount variable is increased in the “isError” branch 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 and rename the component to incrementLoopCount. Consider the example flow above.

The last step is adding the Loop component by dragging it from the toolbox and dropping it at the beginning of the diagram, as in the above example. Rename the component to loginLoop and enter this expression for the Condition property:

LESS_THAN(callflow$.LoopCount,3)

Example callflow in 3CX CFD

Now select all the other components, i.e. from “requestCustomerID” to “checkValidationResult”, and drag them into the “Loop” component, as in the above example.

💡 Tip: You can click to select multiple components using the CTRL key.

Validating Customer Info 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 is currently empty. In the next guides from this series, you can learn how to validate with these data sources:

  • Web Service
  • XML Text 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.

See Also

Last Updated

This document was last updated on 29th April 2021

https://www.3cx.com/docs/cfd-creating-phone-support-portal-1/