Webitel: Документація
Webitel: Документація

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

1. Опис

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

Завдання:

Створити динамічні сторінки для обробки дзвінка, на яких відображатиметься наступне:

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

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

  • відображення тексту-заготівлі в залежності від класифікації;

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

  • залишити коментарі оператора про дзвінок.

1.1. Приклад схеми

Приклад схеми можна побачити на рисунку 1.

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

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

Для зручності використання ви можете завантажити готовий файл JSON, який додається нижче, та імпортувати його. Додаткову інформацію про імпорт файлу JSON можна знайти тут.

Динамічні вікна - форми (обробка дзвінка)-schema.json

1.1.1. Опис схеми

Компонент 

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

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

Опис

Відображення
Гілка 1

Start

image2022-4-19_13-12-57.png


Компонент початку схеми



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

image-2023-7-20_3-37-22.png

image-2023-7-26_10-54-38.png

Для виведення тексту.
Для цього:

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

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

    Заданий текст можна відформатовати за допомогою синтаксису Markdown.
    ***

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

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

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

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

image-2023-7-26_1-27-47.png

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

image-2023-7-21_12-39-17.png

image-2023-7-26_10-54-58.png

Для додавання до динамічного вікна списку.

Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "Категорії";

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

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

  • в елемент "Options" додати три варіанти для списку, що випадає:
    у полі "Key" - "Оформлення замовлення", у полі "Value" - "тип1";у полі "Key" - "Техпідтримка", у полі "Value" - "тип2";у полі "Key" - "Відміна", в поле "Value" - "тип3"

image-2023-7-26_17-4-3.png

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

image-2023-7-22_19-38-23.png

image-2023-7-26_10-55-28.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" ввести назву кнопки - "Надіслати повідомлення"

image-2023-7-26_17-6-5.png

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

image-2023-7-23_9-39-35.png

image-2023-7-26_10-56-38.png

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

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


Гілка 2

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

image-2023-7-23_10-2-48.png

image-2023-7-26_10-56-55.png

Розгалужує схему за варіантами вибору у списку, що випадає.

Для цього:

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

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


Гілка 3

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

image-2023-7-23_10-8-20.png

image-2023-7-26_10-57-16.png

Для виведення тексту.
Для цього:

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

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

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

image-2023-7-26_17-7-2.png


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

image-2023-7-23_10-9-51.png

image-2023-7-26_10-59-36.png

Створення форми на основі заздалегідь створених елементів.

Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "Форма6";

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

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

image-2023-7-26_17-8-8.png

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

image-2023-7-23_10-14-30.png

image-2023-7-26_10-59-51.png

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

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


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

image-2023-7-23_10-17-55.png

image-2023-7-26_11-0-8.png

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


Гілка 4

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

image-2023-7-23_10-27-58.png

image-2023-7-26_11-0-35.png

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

Для цього:

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

  • у полі "Queue" вибрати чергу з якої буде здійснювати повторний дзвінок - натиснути на полі "Queue", вибрати чергу "Замовлення", натиснути кнопку "Add";

  • у полі "Destination" ввести номер абонента, у прикладі він передається змінною ${destination};

  • у полі "Communication type" вибрати тип зв'язку. У прикладі вибрано "Телефон"


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

image-2023-7-23_10-31-1.png

image-2023-7-26_11-0-55.png

Для виведення тексту.
Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "Текст оформлення замовлення";

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

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

image-2023-7-26_17-9-1.png

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

image-2023-7-23_10-39-12.png

image-2023-7-26_11-1-22.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" ввести назву кнопки - "Завершити"

image-2023-7-26_17-11-7.png

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

image-2023-7-23_10-40-33.png

image-2023-7-26_11-1-42.png

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

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


Гілка 5

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

image-2023-7-23_10-44-4.png

image-2023-7-26_11-0-8.png

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


Гілка 6

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

image-2023-7-23_10-46-29.png

image-2023-7-26_11-2-19.png

Залишає повідомлення в історії дзвінка за певного статусу дзвінка.

У цьому прикладі:

  • в полі "Status" вибрати - success. Натиснути кнопку "Add";

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


Гілка 7

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

image-2023-7-23_10-56-23.png

image-2023-7-26_11-2-52.png

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

Для цього:

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

  • у полі "Queue" вибрати чергу з якою буде здійснювати повторний дзвінок - натиснути на полі "Queue", вибрати чергу "Технічна підтримка", натиснути кнопку "Add";

  • у полі "Destination" ввести номер абонента, у прикладі він передається змінною ${destination};

  • у полі "Communication type" вибрати тип зв'язку. У прикладі вибрано "Телефон"


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

image-2023-7-23_10-57-58.png

image-2023-7-26_11-4-24.png

Для виведення тексту.
Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "текст2";

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

  • у полі "Hint" ввести текст підказки - "Текст-підказка для оператора";

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

image-2023-7-26_17-12-43.png

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

image-2023-7-23_10-59-26.png

image-2023-7-26_11-4-47.png

Для додавання до динамічного вікна списку.

Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "стан";

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

  • в елемент "Options" додати два варіанти для списку, що випадає:
    у полі "Key" - "Не зацікавлений", у полі "Value" - "Абонент не зацікавлений";у полі "Key" - "Зайнятий", у полі "Value" - "Зайнятий"

image-2023-7-26_17-13-35.png

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

image-2023-7-23_11-0-35.png

image-2023-7-26_11-5-20.png

Створення форми на основі заздалегідь створених елементів.

Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "Форма2";

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

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

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

image-2023-7-26_17-14-26.png

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

image-2023-7-23_11-2-47.png

image-2023-7-26_11-5-41.png

Перевірка натискання кнопки "На початок".

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


Гілка 8

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

image-2023-7-23_10-44-4.png

image-2023-7-26_11-0-8.png

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


Гілка 9

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

image-2023-7-23_11-13-57.png

image-2023-7-26_11-6-10.png

Залишає повідомлення в історії дзвінка за певного статусу дзвінка.

У цьому прикладі:

  • в полі "Status" вибрати - success. Натиснути кнопку "Add";

  • у полі "Description" ввести текст, який буде передаватися, або вказати його змінною. У цьому прикладі передається варіанти обрані у списках "Класифікація" і "Стан абонента" - ввести змінну ${Категорії} та змінну ${стан}


Гілка 10

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

image-2023-7-23_11-16-57.png

image-2023-7-26_11-6-34.png

Для створення поля введення тексту для оператора.
Для цього:

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

  • у полі "Initial value" ввести "Причина скасування:";

  • у полі "Hint" ввести текст підказки - "Вкажіть причину відхилення замовлення".

image-2023-7-26_17-15-8.png

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

image-2023-7-23_11-25-11.png

image-2023-7-26_11-7-8.png

Створення форми на основі заздалегідь створених елементів.

Для цього:

  • у полі "Id" вказати службову назву. У цій схемі зазначено "Форма7";

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

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

image-2023-7-26_17-15-30.png

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

image-2023-7-23_11-25-52.png

image-2023-7-26_11-7-26.png

Залишає повідомлення в історії дзвінка за певного статусу дзвінка.

У цьому прикладі:

  • в полі "Status" вибрати - success. Натиснути кнопку "Add";

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


Гілка 11

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

image-2023-7-23_11-30-47.png

image-2023-7-26_11-7-44.png

Перевірка натискання кнопки "Надіслати повідомлення".

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


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

image-2023-7-23_11-32-56.png

image-2023-7-26_11-8-1.png

Для виклику схеми, яка буде використовуватися як підсхема для відправки email.
Для цього в полі "Schema" вибрати раніше створену схему для надсилання електронного листа - "Записати email і відправити лист"