Про виведення зображень користувачу

ConnectiveOne підтримує відправку зображень користувачам двома способами: через UI конструктора або через action send_photo. Це дозволяє показувати користувачам візуальний контент, що покращує користувацький досвід та сприяє кращому розумінню інформації.

Контекст і проблема

У багатьох сценаріях потрібно показувати користувачам зображення:

  • Каталоги товарів з фотографіями
  • Інструкції з скріншотами
  • Рекламні матеріали
  • Діаграми та інфографіка

Виведення зображень вирішує цю задачу, дозволяючи відправляти зображення користувачам у сценаріях ботів.

Основні концепції

Способи відправки зображень

Через UI конструктора:

  • Швидкий спосіб для простих випадків
  • Підтримується для блоків: "Повідомлення користувачу", "Очікування відповіді користувача", "Повідомлення з клавіатурою"
  • Можна завантажити файл або додати посилання

Через action send_photo:

  • Розширений спосіб для складних випадків
  • Дозволяє відправляти кілька зображень одночасно
  • Підтримує плейсхолдери та динамічний вибір зображень

Формати та обмеження

Підтримувані формати:

  • JPG, JPEG, PNG, GIF, WebP

Обмеження розміру:

  • Telegram: до 10 МБ
  • Viber: до 20 МБ
  • Widget: залежить від налаштувань

Варіанти підходів

UI конструктор vs action send_photo

UI конструктор:

  • ✅ Плюси: Простота, швидкість налаштування
  • ❌ Мінуси: Обмежена гнучкість

Action send_photo:

  • ✅ Плюси: Гнучкість, підтримка кількох зображень, динамічний вибір
  • ❌ Мінуси: Складніша налаштування

Чому використовуємо обидва підходи: UI конструктор підходить для простих випадків, а action send_photo — для складних сценаріїв з динамічним вибором зображень.

Прийняті рішення

Автоматичне отримання публічного посилання

Зображення, завантажені через Файловий Менеджер, автоматично отримують публічне посилання, яке можна використовувати в action send_photo.

Підтримка плейсхолдерів

В URL зображень можна використовувати плейсхолдери, які будуть замінені на значення з констант, що дозволяє динамічно вибирати зображення.

Відправка кількох зображень

Action send_photo дозволяє відправити кілька зображень в одному action, вони будуть відправлені послідовно.

Наслідки для користувачів і імплементації

Для інтеграторів

При використанні зображень важливо:

  1. Вибрати спосіб відправки — UI конструктор або action send_photo
  2. Перевірити формат та розмір — відповідність обмеженням каналу
  3. Використати публічні URL — для зображень через action send_photo
  4. Оптимізувати розмір — для швидшої завантаження

Типові помилки

Помилка: Зображення не відображається
Проблема: Неправильний URL або формат файлу
Рішення: Перевірити URL та формат зображення

Помилка: Зображення занадто велике
Проблема: Розмір файлу перевищує обмеження каналу
Рішення: Оптимізувати розмір зображення або використати інший формат

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

Приклади використання

Відправка одного зображення

{
  "product": "https://example.com/images/product.jpg"
}

Відправка кількох зображень

{
  "назва1": "https://example.com/images/photo1.jpg",
  "назва2": "https://example.com/images/photo2.jpg",
  "назва3": "https://example.com/images/photo3.jpg"
}

Використання плейсхолдерів

{
  "product": "{{product_image_url}}",
  "logo": "{{company_logo_url}}"
}

Динамічний вибір зображення

{
  "constant": "photos_array",
  "key": "{{selected_photo_index}}"
}

Пов'язані документи