Forms - Call processing

Owned by Olesya Tantsyura
Last updated: Mar 18, 2024
13 min read

1. Description

Example of a dynamic page (Form) for call processing.

Task

Create a dynamic page for call processing that displays the following:

  • a text message for the Agent to start a conversation with the Subscriber;

  • call classification;

  • display of the text message depending on the classification;

  • add the Subscriber to the Queue for a repeat call;

  • leave Agent comments about the call.

 

1.1. Flow example

An example flow can be seen in Figure 1.

Fig. 1. Sending an email 

For convenience, you can download the completed JSON file, which is attached below, and import it. 

1.1.1. Flow description

Component  

Block of component

 Component parameters

Description

Displayed

Component  

Block of component

 Component parameters

Description

Displayed

Branch 1

Start

 

Start component

 

Form Text

To display information on the page.

This requires:

  • in the Id field, enter the service name - text;

  • in the Text field, enter the text that should be displayed to the Agent - This displays the text you entered in the Text field in the Form Text component.

    You can format the text using Markdown syntax.
    ***

    You can also use variables.
    For example, the name of the Subscriber is ${member_name}

  • in the Label field, enter the text of the title - The text of the title, which is entered in the Label field of the Form Text component;

  • in the Hint field, enter the hint text - The hint text entered in the Hint field of the Form Text component;

  • in the Color field, select the frame color in which the text will be displayed. For this Flow scheme, it is customary to mark the text blank for the Agent with the default color

Form Select

To add a dropdown list to the dynamic window.

This requires:

  • in the Id field, enter the service name - Category;

  • in the Label field, enter the text of the title - Classification;

  • in the Hint field, enter the hint text - The text of the hint that entered the Hint field of the Form Select component;

  • in the Options element, add three options for the drop-down list:

    • in the Key field - Place an order; in the Value field - type1;

    • in the Key field - Technical support; in the Value field - type2;

    • in the Key field - Order cancellation; in the Value field - type3

Generate Form

Create a form based on pre-built elements.

This requires:

  • in the Id field, enter the service name - Form1;

  • in the Form title field, enter the text of the form title - Page title (entered in Generate Form, Form title field);

  • in the Body contents field, enter the id of the components in the order in which they should be displayed on the form. Enter the component id and click the Add button to add a component:

    • enter the id from the Form Text component - text  and click the Add button;

    • enter the id from the Form Select component - Category  and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • Call back button:

      • in the Id field, enter the service name of the button - Button1;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - Call back;

    • add the Send message button - click on the ADD ACTION button:

      • in the Id field, enter the service name of the button - Button2;

      • in the Color field, select the button color - secondary;

      • in the Text field, enter the name of the button - Send a message

If

Check if the Call back button is clicked.

To do this, in the Expression field, enter ${Form1}=='Button1'

 

Branch 2

Switch

Branches the diagram by the choices in the drop-down list.

This requires:

  • in the Variable field, enter - ${Category};

  • in the Cases field, enter type1, type2, and type3 (according to the options in the Form Select component)

 

Branch 3

Form Text

To display information on the page.

This requires:

  • in the Id field, enter the service name - text for return;

  • in the Text field, enter the text that should be displayed to the Agent - To place a call back to the subscriber, go back and select an option from **Classification**.

  • in the Color field, select the frame color in which the text will be displayed. For this scheme, it was decided to mark the text of a technical nature for the Agent with the color danger

Generate Form

Create a form based on pre-built elements.

This requires:

  • in the Id field, enter the service name - Form6;

  • in the Body contents field, enter the id of the component that will be displayed in the form: enter the id from the Form Text component - text for return and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • Go back button:

      • in the Id field, enter the service name of the button - back button;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - Go back

If

Check if the Go back button is clicked.

To do this, in the Expression field, enter ${Form6}=='back button'

 

Go to

Additional transition to the Form Text component (Branch 12)

 

Branch 4

Callback Queue

Create a callback.

This requires:

  • in the Name field, enter the name of the Subscriber you want to call back. In this scheme, the name is passed through the variable ${member_name};

  • in the Queue field, select the Queue from which the call will be made - click on the Queue field, select the Orders Queue, and click the Add button;

  • in the Destination field, enter the subscriber's number; in the example, it is passed by the ${caller_id_number} variable;

  • in the Communication type field, select the type of communication. In the example, Mobile is selected

 

Form Text

To display information on the page.

This requires:

  • in the Id field, enter the service name - text order;

  • in the Text field, enter the text that should be displayed to the Agent - Our managers will contact you shortly.
    Have a good day!

  • in the Color field, select the frame color in which the text will be displayed. For this Flow scheme, it is customary to mark the text blank for the Agent with the default color

Generate Form

Create a form based on pre-built elements.

This requires:

  • in the Id field, enter the service name - Form5;

  • in the Form title field, enter the text of the form title - Subscriber added to the callback list;

  • in the Body contents field, enter the id of the component that will be displayed in the form: enter the id from the Form Text component - text order and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • Back button:

      • in the Id field, enter the service name of the button - back2;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - Back;

  •  

    • add the End button - click on the ADD ACTION button:

      • in the Id field, enter the service name of the button - id;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - End

If

Check if the Back button is clicked.

To do this, in the Expression field, enter ${Form5}=='back2'

 

Branch 5

Go to

Additional transition to the Form Text component (Branch 13)

 

Branch 6

Attempt Result

 

 

Leaves a message in the call history for a specific call status.

This requires:

  • in the Status field, select - success. Click the Add button;

  • In the Description field, type the text that will be added to the history or specify it as a variable. In this example, The email was sent to ${Category}.

 

Branch 7

Callback Queue

Create a callback.

This requires:

  • in the Name field, enter the name of the Subscriber you want to call back. In this scheme, the name is passed through the variable ${member_name};

  • in the Queue field, select the Queue from which the call will be made - click on the Queue field, select the Technical support Queue, and click the Add button;

  • in the Destination field, enter the subscriber's number; in the example, it is passed by the ${destination} variable;

  • in the Communication type field, select the type of communication. In the example, Mobile is selected

 

Form Text

To display information on the page.

This requires:

  • in the Id field, enter the service name - text2;

  • in the Text field, enter the text that should be displayed to the Agent - We will contact you later.
    Have a nice day!

  • in the Hint field, enter the text of the hint - Text hint for the agent;

  • in the Color field, select the frame color in which the text will be displayed. For this Flow scheme, it is customary to mark the text blank for the Agent with the default color

Form Select

To add a dropdown list to the dynamic window.

This requires:

  • in the Id field, enter the service name - state;

  • in the Label field, enter the text of the title - Subscriber status;

  • in the Options element, add three options for the drop-down list:

    • in the Key field - Not interested; in the Value field - The subscriber is not interested;

    • in the Key field -Busy; in the Value field - Busy

Generate Form

Create a form based on pre-built elements.

This requires:

  • in the Id field, enter the service name - Form2;

  • in the Form title field, enter the text of the form title - The subscriber has been added to the callback list;

  • in the Body contents field, enter the id of the components in the order in which they should be displayed on the form. Enter the component id and click the Add button to add a component:

    • enter the id from the Form Text component - text2  and click the Add button;

    • enter the id from the Form Select component - state  and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • Back to top button:

      • in the Id field, enter the service name of the button - back1;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - Back to top;

    • add the end button - click on the ADD ACTION button:

      • in the Id field, enter the service name of the button - button6;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - end

If

Check if the Back to top button is clicked.

To do this, in the Expression field, enter ${Form2}=='back1'

 

Branch 8

Go to

Additional transition to the Form Text component (Branch 14)

 

Branch 9

Attempt Result

Leaves a message in the call history for a specific call status.

This requires:

  • in the Status field, select - success. Click the Add button;

  • in the Description field, enter the text that will be passed or pass it as a variable. In this example, the options selected in the Classification and Subscriber status lists are passed - enter the ${Category} variable and the ${state} variable

 

Branch 10

Form Textfield

To create a text entry field for the Agent.

This requires:

  • in the Id field, enter the service name. This Flow scheme enters the reason;

  • in the Initial value field, enter Reason for cancellation:;

  • in the Hint field, enter the text of the hint - Enter the reason for the cancellation of the order.

Generate Form

Create a form based on pre-built elements.

This requires:

  • in the Id field, enter the service name - Form7;

  • in the Body contents field, enter the id of the component that will be displayed in the form: enter the id from the Form Text component - reason and click the Add button;

  • in the Form actions element, enter the data for creating buttons:

    • end button:

      • in the Id field, enter the service name of the button - end;

      • in the Color field, select the button color - primary;

      • in the Text field, enter the name of the button - end

Attempt Result

Leaves a message in the call history for a specific call status.

This requires:

  • in the Status field, select - abandoned. Click the Add button;

  • in the Description field, enter the text that will be transferred or specify it as a variable. In this example, the option selected in the Classification list is passed, and the reason is entered in the Reason for cancellation field - enter the ${Category} variable and the ${reason} variable

 

Branch 11

If

Check if the Send a message button is clicked.

To do this, in the Expression field, enter ${Form1}=='Button2'

 

Schema

To call a Flow schema that will be used as a sub-schema for sending an email.

To do this, in the Schema field, select the previously created scheme for sending an email - Write an email and send a letter