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

Налаштування схеми постобробки для оцінювання емейлів

1. Призначення

Використовується для того, щоб дати можливість клієнту оцінити якісь наданої консультації. Клієнт отримує на електронну пошту лист із кнопками для оцінки якості відповіді.

2. Налаштування

2.1. Створення схеми

На робочій області додайте компоненти у такій послідовності:
Start → Form Select → Custom code → Generate Form → Send email → Attempt Result.

image-20250926-100048.png
Рис. 1. Загальна схема

2.2. Налаштування компонента “Form Select”

  1. На панелі інструментів виберіть компонент “Form Select” і перетягніть його у схему.

  2. У полі “Id” вкажіть lang.

  3. У полі “Options source” виберіть input.

  4. Додайте у список усі доступні мови (наприклад: en, ru, uk, es, kz, vi, pl, ro, uz).

image-20250926-100402.png
Рис. 2. Компонент “Form Select”

2.3. Додайте компонент “Custom code”

  1. Додайте у схему компнент “Custom code”.

  2. У полі “Custom code” вставте JSON-код:

{
    "feedback": {
        "setVar": "hk",
        "sourceId": "${message_id}"
    }
}
image-20250926-100525.png
Рис. 3. Компонент “Custom code”

2.4. Додайте компонент “Generate Form”

  1. Перетягніть у схему компонент “Generate Form”.

  2. У полі “Id” вкажіть send.

  3. У секції “Body contents” додайте змінну: lang.

  4. У секції “Form actions”:

    • У полі “Id” вкажіть значення (наприклад, id).

    • У полі “Text” напишіть назву кнопки (наприклад, Send).

    • Оберіть колір кнопки, наприклад primary.

image-20250926-100727.png
Рис. 4. Компонент “Generate Form”

2.5. Додайте компонент “Send email”

  1. Перетягніть у схему компонент “Send email”.

  2. Заповніть основні поля:

    • “To” — адреса отримувача;

    • “Subject” — тема листа;

    • “From” — адреса відправника;

    • “Message” — тіло листа у форматі HTML:

    <html lang="uk">
  <body>
    <div>
      <p style="font-size:16px;font-weight:300;line-height:24px;color:#000;">
        Доброго дня!  
        <br>
        Шановний клієнте, дякуємо за ваше звернення! ${message_id}  
        <br>
        Будь ласка, дайте відповідь на запитання. Ваша думка дуже важлива для нас!.
      </p>
      <p style="margin-top:32px;font-size:16px;font-weight:700;line-height:24px;color:#000;">
        Чи було вирішене ваше питання?
      </p>
      <div>
        <a style="margin-right: 32px;" href="https://test.webitel.me/workspace/feedback-page?hk=${hk}&lang=${lang}&rating=1" target="_blank">
          <img style="width:120px" src="ПОСИЛАННЯ_НА_ЗОБРАЖЕННЯ_YES"/>
        </a>
        <a href="https://test.webitel.me/workspace/feedback-page?hk=${hk}&lang=${lang}&rating=0" target="_blank">
          <img style="width:120px" src="ПОСИЛАННЯ_НА_ЗОБРАЖЕННЯ_NO"/>
        </a>
      </div>
    </div>
  </body>
</html>

Зверніть увагу: посилання на зображення потрібно замінити на необхідні.

image-20250926-101402.png
Рис. 5. Компонент “Send email”

  1. Увімкніть перемикач “Use variable”, якщо хочете використовувати змінну для контактів.

  2. Введіть ідентифікатор Email профілю у полі “Profile” (наприклад, 20), який буде використовуватись для надсилання електронного повідомлення.

  3. Увімкніть перемикач “Store”, щоб було можливим відправлення вихідного повідомлення

  4. У полі “Retry count” вкажіть кількість повторних спроб надіслати повідомлення після невдалого надсилання, (наприклад, 3).

  5. Увімкніть перемикач “SMTP Auth”. Після чого параметри “User” і “Password” (дані вашого акаунту Webitel) заповняться автоматично;

  6. Заповніть параметри:

    • “Port” (наприклад, 587) — значення береться з налаштованого email-профілю;

    • “Server” (наприклад, outlook.office365.com) — значення береться з налаштованого email-профілю.

  7. Увімкніть перемикач “TLS” для безпечного з’єднання.

image-20250926-101508.png
Рис. 6. Компонент “Send email”

2.6. Додайте компонент “Attempt Result”

  1. Додайте у схему компонент “Attempt Result”. Цей блок використовується для перевірки результату відправки повідомлення.

image-20250926-104417.png
Рис. 7. Компонент “Attempt Result”

3. Відображення у Workspace

  1. Оператор отримує повідомлення від клієнта у Workspace. Він натискає на кнопку “Прийняти” (Рис. 8), щоб взяти його в роботу.

image-20250926-113039.png
Рис. 8. Прийняття повідомлення у Workspace

  1. Після прийняття повідомлення відкривається форма постобробки. Оператор обирає мову (Рис. 9), якою клієнт отримає повідомлення з кнопками оцінки, та натискає кнопку відправлення (Рис. 10).

image-20250929-133120.png
Рис. 9. Вибір мови
image-20250929-133254.png
Рис. 10. Кнопка відправлення

  1. Система надсилає клієнту email. У листі будуть відображені налаштовані текст і дві кнопки з зображеннями (Рис. 11).

image-20250926-114545.png
Рис. 11. Приклад отриманого повідомлення клієнтом

  1. Клієнт натискає кнопку з відповіддю. Вибір автоматично фіксується у системі:

  • Якщо оцінку ще не було надано, система зберігає відповідь і показує сторінку з повідомленням про успішне надсилання (Рис. 12).

image-20250926-114728.png
Рис. 12. Сторінка успішної відповіді

  • Якщо оцінку вже було надано, система не приймає повтор і показує сторінку з повідомленням про помилку (Рис. 13).

image-20250926-114832.png
Рис. 13. Сторінка з помилкою

Зверніть увагу!

  • Клієнт може поставити оцінку лише один раз.

  • Повторне натискання кнопки не змінює результат.

  • Оцінка клієнта не впливає на оцінку оператора — зберігається окремо у базі даних (у Grafana, зручно для аналітики).