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

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 та формат зображення

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

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

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

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

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

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

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

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

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

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

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

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

- **How-to:** [Додати зображення до розсилки](/uk/broadcast/how-to/add-image-to-broadcast.md) — робота з медіа в розсилках