Creating a Phone Support Portal with the 3CX Call Flow Designer – Part 1
- Introduction
- Description of the Voice Application to Create
- Create the Application Callflow
- Step 1 – Create the Project
- Step 2 – Define Variables
- Step 3 – Create the Main Menu
- Step 4 – Transfer the Call to the Sales Team
- Step 5 – Create the Login Component
- Validating Customer Info Using External Data Sources
- See Also
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:
- Enter their customer ID and PIN.
- 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:
- In the “Project Explorer” select the project, e.g. “PhoneSupportPortal”.
- In the “Properties”, click the ellipsis button on the right of the “Variables” property.
- The “Variable Collection Editor” is shown to add the two variables mentioned earlier:
- SalesTeamExtension: assign the value "100"
- HelpDeskExtension: assign the value "101"
- Click “Add” to add a new variable with default property values.
- Click the field next to the “Name” variable and type in “SalesTeamExtension”.
- Click on the field next to the “InitialValue” and type in "100" .
- 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:
- Enter the customer ID and PIN and get transferred to the support team.
- Transfer the call to the sales team.
To create the main menu:
- Drag a “Menu” component from the toolbox and drop it in the design area.
- Go to the “Properties”, change the name of the component to “mainMenu” and ensure that only options 1 and 2 are enabled.
- 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.
- 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.”
- Configure the “Initial Prompts” as in the example above.
- And configure the “Subsequent Prompts” as above:
- 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.
- 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”.
- 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.
- 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.
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.
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.
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.
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.
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”:
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:
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
- Learn more about CFD components.
- Automated Telephone Ordering Voice app with CRM integration via the 3CX API.
- Sending emails from a CFD voice app.
- Routing Calls Based on the Time of Day.
- Using the Authentication Component to Validate Customers.
- Using the Credit Card Component.
- Text to Speech and Speech to Text with the 3CX Call Flow Designer.
- Using the Loop component to navigate upwards
- Registering and making callbacks
- Using the survey component
- Using the CRM Lookup component
- See how to integrate your PBX with a CRM via the 3CX API.
Last Updated
This document was last updated on 29th April 2021
https://www.3cx.com/docs/cfd-creating-phone-support-portal-1/