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

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, вони будуть відправлені послідовно.

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

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

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

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

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

Помилка: Зображення не відображається
Проблема: Неправильний 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}}"
}

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

How-to: Додати зображення до розсилки — робота з медіа в розсилках