Документация Webitel
Документация Webitel
Breadcrumbs

Форма - схема для обработки звонка

1. Описание

Пример схемы динамических страниц для обработки звонка.

Задача:

Создать динамические страницы для обработки звонка на которых будет отображаться следующее:

  • текст-заготовка оператору для начала разговора с абонентом;

  • классификация звонка;

  • отображение текста-заготовки в зависимости от классификации;

  • добавить абонента в очередь для повторного звонка;

  • оставить комментарии оператора о звонке.

1.1. Пример схемы

Пример схемы можно увидеть на рисунке 1.

Схема для обработки звонка.png

Рис. 1. Схема для обработки звонка

Для удобства пользования можно скачать готовый json-файл, который прикреплен ниже, и импортировать. Больше информации об импорте json-файла можно посмотреть здесь.

Динамические окна - формы (обработка звонка)-schema.json

1.1.1. Описание схемы

Компонент 

Блок компонента

Параметры компонента

Описание

Отображение в Workspace
Ветка 1

Start

image2024-3-4_12-43-49.png


Компонент начала схемы


Компонент "Form Text"

image2024-3-4_12-44-4.png

image2024-3-4_12-44-27.png

Для вывода текста.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "Текст";

  • в поле "Text" ввести текст, который должен отображаться оператору - "Здесь  отображается текст, который задан с помощью компонента Form Text в поле Text.

    Заданный текст можно отформатировать используя синтаксис Markdown.
    ***

    Также доступно использование переменных 
    К примеру,  имя абонента - ${member_name}"

  • в поле "Label" ввести текст заголовка - "Текст заголовка, который указан в поле Label компонента Form Text"

  • в поле "Hint" ввести текст подсказки - "Текст подсказки, который указан в поле Hint компонента Form Text"

  • в поле "Color" выбрать цвет рамки в которой будет отображаться текст. Для данной схемы было принято обозначать текс-заготовку для оператора цветом default

image2024-3-4_13-9-8.png

Компонент "Form Select"

image2024-3-4_12-44-52.png

image2024-3-4_12-45-14.png

Для добавления в динамическое окно выпадающего списка.

Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "Категории";

  • в поле "Label" ввести текст заголовка - "Классификация";

  • в поле "Hint" ввести текст подсказки - "Текст подсказки, который указан в поле Hint компонента Form Select"

  • в элемент "Options" добавить три варианта для выпадающего списка:в поле "Key" - "Оформление заказа", в поле "Value" - "тип1";в поле "Key" - "Техподдержка", в поле "Value" - "тип2";в поле "Key" - "Отмена", в поле "Value" - "тип3"

image2024-3-4_13-9-49.png

Компонент "Generate Form"

image2024-3-4_12-45-33.png

image2024-3-4_12-45-57.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "Форма1";

  • в поле "Form title" указать текст заголовка формы - "Название страницы (указывается в Generate Form, поле Form title)";

  • в поле "Body contents" указать id компонентов в том порядке, в котором они должны отображаться в форме. Для добавления компонента необходимо ввести id компонента и нажать кнопку "Add": ввести id с компонента "Form Text" - "Текст" и нажать кнопку "Add";ввести id с компонента "Form Select" - "Категории" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создания кнопок:кнопка "Перезвонить":в поле "Id" указать служебное название кнопки - "Кнопка1";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "Перезвонить"; добавить кнопку "Отправить сообщение" - нажать на кнопку "ADD ACTION":в поле "Id" указать служебное название кнопки - "Кнопка2";в поле "Color" выбрать цвет кнопки - "secondary";в поле "Text" ввести название кнопки - "Отправить сообщение"

image2024-3-4_13-10-36.png

Компонент "If"

image2024-3-4_12-46-14.png

image2024-3-4_12-46-32.png

Проверка нажатия кнопки "Перезвонить". 

Для этого в поле "Expression" ввести ${Форма1}=='Кнопка1'


Ветка 2

Компонент "Switch"

image2024-3-4_12-46-51.png

image2024-3-4_12-47-0.png

Разветвляет схему по вариантам выбора в выпадающем списке.

Для этого:

  • в поле "Variable" указать - ${Категории}

  • в поле "Cases" указать "тип1", "тип2" и "тип3" (согласно с вариантами в компоненте "Form Select")


Ветка 3

Компонент "Form Text"

image2024-3-4_12-47-17.png

image2024-3-4_12-47-35.png

Для вывода текста.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "текст для возврата";

  • в поле "Text" ввести текст, который должен отображаться оператору - "Для перезвона абоненту вернитесь назад и выберите вариант из **Классификация**.";

  • в поле "Color" выбрать цвет рамки в которой будет отображаться текст. Для данной схемы было принято обозначать текст технического характера для оператора цветом danger

image2024-3-4_13-11-41.png

Компонент "Generate Form"

image2024-3-4_12-47-57.png

image2024-3-4_12-48-19.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "Форма6";

  • в поле "Body contents" указать id компонента, который будет отображаться в форме: ввести id с компонента "Form Text" - "текст для возврата" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создания кнопок: кнопкакнопка "Назад":в поле "Id" указать служебное название кнопки - "кнопка назад";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "Назад"

image2024-3-4_13-11-26.png

Компонент "If"

image2024-3-4_12-48-39.png

image2024-3-4_12-49-6.png

Проверка нажатия кнопки "Назад". 

Для этого в поле "Expression" ввести  ${Форма6}=='кнопка назад'


Компонент "Go to"

image2024-3-4_12-49-23.png

image2024-3-4_12-49-37.png

Для  дополнительного перехода в компоненту "Form Text" (Ветка 12)


Ветка 4





Компонент "Callback Queue"

image2024-3-4_12-50-17.png

image2024-3-4_12-50-33.png

Для создания встречного звонка.

Для этого:

  • в поле "Name" ввести имя абонента, которому необходимо перезвонить. В данной схеме имя передается через переменную - ${member_name} ;

  • в поле "Queue" выбрать очередь с которой будет производиться встречный звонок — нажать на поле "Queue", выбрать очередь "Заказ", нажать кнопку "Add";

  • в поле "Destination" ввести номер абонента, в примере он передается переменной  ${caller_id_number};

  • в поле "Communication type" выбрать тип связи. В примере выбран "Телефон";


Компонент "Form Text"

image2024-3-4_12-50-48.png

image2024-3-4_12-51-5.png

Для вывода текста.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "Текст заказ";

  • в поле "Text" ввести текст, который должен отображаться оператору - "Наши менеджеры свяжутся с Вами в ближайшее время.
    Всего хорошего!";

  • в поле "Color" выбрать цвет рамки в которой будет отображаться текст. Для данной схемы было принято обозначать текс-заготовку для оператора цветом default

image2024-3-4_13-12-54.png

Компонент "Generate Form"

image2024-3-4_12-51-27.png

image2024-3-4_12-51-51.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "Форма5";

  • в поле "Form title" указать текст заголовка формы - "Абонента добавлено в список для повторного звонка";

  • в поле "Body contents" указать id компонента, который будет отображаться в форме: ввести id с компонента "Form Text" - "Текст заказ" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создания кнопок: кнопкакнопка "Назад":в поле "Id" указать служебное название кнопки - "назад2";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "Назад"; добавить кнопку "Закончить" - нажать на кнопку "ADD ACTION":в поле "Id" указать служебное название кнопки - "id";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "Закончить"

image2024-3-4_13-12-33.png

Компонент "If"

image2024-3-4_12-52-9.png

image2024-3-4_12-52-24.png

Проверка нажатия кнопки "Назад". 

Для этого в поле "Expression" ввести  ${Форма5}=='назад2'


Ветка 5

Компонент "Go to"

image2024-3-4_12-52-42.png

image2024-3-4_12-52-54.png

Для  дополнительного перехода в компоненту "Form Text" (Ветка 13)


Ветка 6

Компонент "Attempt Result"

image2024-3-4_12-53-14.png

image2024-3-4_12-53-30.png

Оставляет сообщение в истории звонка при определенном статусе звонка. 

В данном примере:

  • в поле "Status"  выбрать  - success. Нажать кнопку "Add";

  • в поле "Description" ввести текст, который будет передаваться, или задать его переменной. В данном примере передается вариант выбран в выпадающем списке "Категории" - ввести переменную ${Категории}


Ветка 7

Компонент "Callback Queue"

image2024-3-4_12-53-49.png

image2024-3-4_13-16-58.png

Для создания встречного звонка.

Для этого:

  • в поле "Name" ввести имя абонента, которому необходимо перезвонить. В данной схеме имя передается через переменную - ${member_name} ;

  • в поле "Queue" выбрать очередь с которой будет производиться встречный звонок — нажать на поле "Queue", выбрать очередь "Техническая поддержка", нажать кнопку "Add";

  • в поле "Destination" ввести номер абонента, в примере он передается переменной  ${destination};

  • в поле "Communication type" выбрать тип связи. В примере выбран "Телефон"


Компонент "Form Text"

image2024-3-4_13-17-19.png

image2024-3-4_13-17-30.png

Для вывода текста.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "текст2";

  • в поле "Text" ввести текст, который должен отображаться оператору - "Хорошо. Мы свяжемся с Вами позже. 
    Всего хорошего!";

  • в поле "Color" выбрать цвет рамки в которой будет отображаться текст. Для данной схемы было принято обозначать текс-заготовку для оператора цветом default

image2024-3-4_13-14-18.png

Компонент "Form Select"

image2024-3-4_13-18-12.png

image2024-3-4_13-18-22.png

Для добавления в динамическое окно выпадающего списка.

Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "состояние";

  • в поле "Label" ввести текст заголовка - "Состояние абонента";

  • в элемент "Options" добавить два варианта для выпадающего списка:в поле "Key" - "Не заинтересован", в поле "Value" - "Абонент не заинтересован";в поле "Key" - "Занят", в поле "Value" - "Занят"

image2024-3-4_13-14-38.png

Компонент "Generate Form"

image2024-3-4_13-19-4.png

image2024-3-4_13-19-30.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "Форма2";

  • в поле "Form title" указать текст заголовка формы - "Абонента добавлено в список для повторного звонка";

  • в поле "Body contents" указать id компонентов в том порядке, в котором они должны отображаться в форме. Для добавления компонента необходимо ввести id компонента и нажать кнопку "Add": ввести id с компонента "Form Text" - "текст2" и нажать кнопку "Add";ввести id с компонента "Form Select" - "состояние" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создания кнопок: кнопкакнопка "В начало":в поле "Id" указать служебное название кнопки - "назад2";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "В начало"; добавить кнопку "конец" - нажать на кнопку "ADD ACTION":в поле "Id" указать служебное название кнопки - "кнопка6";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "конец"

image2024-3-4_13-14-1.png

Компонент "If"

image2024-3-4_13-19-55.png

image2024-3-4_13-20-6.png

Проверка нажатия кнопки "В начало". 

Для этого в поле "Expression" ввести  ${Форма2}=='назад1'


Ветка 8

Компонент "Go to"

image2024-3-4_13-20-18.png

image2024-3-4_13-20-28.png

Для  дополнительного перехода в компоненту "Form Text" (Ветка 14)


Ветка 9

Компонент "Attempt Result"

image2024-3-4_13-20-54.png

image2024-3-4_13-21-19.png

Оставляет сообщение в истории звонка при определенном статусе звонка. 

В данном примере:

  • в поле "Status"  выбрать  - success. Нажать кнопку "Add";

  • в поле "Description" ввести текст, который будет передаваться, или задать его переменной. В данном примере передается варианты выбраны в выпадающих списках "Категории" и "Состояние абонента" - ввести переменную ${Категории} и переменную ${состояние}


Ветка 10

Компонент "Form Textfield"

image2024-3-4_13-36-17.png

image2024-3-4_13-36-50.png

Для создания поля ввода текста  для оператора.
Для этого:

  • в поле "Id" указать служебное название. В данной схеме указано "причина";

  • в поле "Initial value" ввести "Причина отмены:";

  • в поле "Hint" ввести текст подсказки - "Укажите причину отклонения заказа".

Unknown Attachment

Компонент "Generate Form"

image2024-3-4_13-37-40.png

image2024-3-4_13-37-24.png

Создание формы на основе предварительно созданных элементов.

Для этого: 

  • в поле "Id" указать служебное название. В данной схеме указано "Форма7";

  • в поле "Body contents" указать id компонента, который будет отображаться в форме: ввести id с компонента "Form Textfield" - "причина" и нажать кнопку "Add";

  • в элемент "Form actions" ввести данные для создания кнопок: кнопкакнопка "конец":в поле "Id" указать служебное название кнопки - "конец";в поле "Color" выбрать цвет кнопки - "primary";в поле "Text" ввести название кнопки - "конец"; 

image2024-3-4_13-15-31.png

Компонент "Attempt Result"

  image2024-3-4_13-38-38.png

image2024-3-4_13-38-16.png

Оставляет сообщение в истории звонка при определенном статусе звонка. 

В данном примере:

  • в поле "Status"  выбрать  - abandoned. Нажать кнопку "Add";

  • в поле "Description" ввести текст, который будет передаваться, или задать его переменной. В данном примере передается варианты выбран в выпадающем списке "Категории" и причина указанная в поле  "Причина отмены" - ввести переменную ${Категории} и переменную ${причина}


Ветка 11

Компонент "If"

image2024-3-4_13-39-56.png

image2024-3-4_13-40-34.png  

Проверка нажатия кнопки "Отправить сообщение". 

Для этого в поле "Expression" ввести  ${Форма1}=='Кнопка2'


Компонент "Schema"

image2024-3-4_13-41-4.png  

image2024-3-4_13-41-22.png

Для вызова схемы, которая будет использоваться в качестве подсхемы для отправки  email.
Для этого в поле "Schema" выбрать ранее созданную схему для отправки электронного письма - "Получить email и отправить письмо"