# Шаг «Сообщение»  блок  «Картинка»

Source: https://docs.botman.pro/a/229-shag-soobschenie-blok-kartinka

Он помогает сделать сценарий не просто читаемым, а наглядным и живым.

Зачем использовать

- Привлечь внимание. Один хороший баннер скажет больше, чем абзац текста.
- Объяснить идею. Иллюстрация к шагу — это как визуальная шпаргалка: всё сразу ясно.
- Поднять кликабельность. Картинка + кнопка под ней = сильный CTA (призыв к действию).
- Сделать сценарий «вашим». Подпись под картинкой можно персонализировать: имя, дата, номер заказа — всё автоматически.
- Сэкономить время. Если нет нужной картинки — сгенерируйте её прямо внутри конструктора с помощью AI.

---

**Где блок «Картинка» особенно уместен**

- Продуктовые карточки. Обложка товара + подпись «{{Название}} — {{Цена}} ₽» + кнопка «Купить».
- Анонсы. Баннер с датой вебинара + кнопка регистрации.
- Обучающие сценарии. Шаги с мини-инфографикой или схемами.
- Подтверждения. Фото отправленного заказа, чек, этап статуса.
- Меню выбора. Обложки для веток сценария: «Курсы», «Поддержка», «FAQ».

**Как это выглядит для пользователя**

- Картинка отображается выше текста и кнопок.
- Под ней — подпись, если вы её задали (в ней можно использовать форматирование и переменные).
- Ниже — кнопки шага, ведущие к следующему действию.

**Рекомендации по контенту**

- Один блок — одна идея. Не перегружайте изображение лишним.
- Проверьте мобильный вид. Убедитесь, что всё читается на экране 360–430 px.
- Картинка — внимание, подпись — детали, кнопка — действие.
- Храните удачные изображения. Хорошие обложки удобно повторно использовать в шаблонах.
- Следите за правами. Если не уверены в лицензии картинки — лучше сгенерировать или использовать свою.

---

**Добавление блока «Картинка» в шаг «Сообщение»**

Блок «Картинка» позволяет встроить изображение в шаг сценария и дополнить текст визуальным элементом — обложкой, иллюстрацией или баннером.

Путь: Сценарий → Шаг «Сообщение» → Добавить блок → Картинка

**Как добавить блок — пошагово**

1\. Откройте нужный сценарий. Перейдите в раздел «Боты» и выберите нужный проект.\
2\. Создайте или откройте шаг «Сообщение». Если шаг ещё не создан — нажмите «Добавить шаг» → выберите тип «Сообщение».\
3\. Добавьте блок «Картинка». Внутри шага в списке выберите «Картинка».

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/a273e13cf140fa56092493c609da912e7d29baed815bd7653515d3a120dc75f7.png)

4\. Настройте изображение.\
После добавления блока откроется карточка с вариантами получения картинки:

- 📁 Загрузить файл — выберите JPG или PNG с компьютера.
- 🌐 Вставить URL — добавьте прямую ссылку на изображение.
- 🤖 Сгенерировать через AI — опишите картинку, и бот создаст её автоматически.

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/3564c647fa244e147ff8c17fc5d7234d44a17c611688bbb33aee0080a1a3dae6.png)

---

**Способ 1. Загрузка файла**

Если у вас уже есть готовое изображение, его можно загрузить прямо с устройства — компьютера или телефона. Это самый быстрый и надёжный способ вставки картинки.

**Как загрузить изображение**

1\. Нажмите на кнопку «Загрузить». Откроется стандартное окно выбора файла:

- на компьютере — это системный файловый проводник,
- на телефоне — меню выбора из галереи/памяти устройства.

2\. Выберите нужное изображение. Поддерживаются форматы: .jpg, \*\*.png, .gif (\*\*поддерживаются анимированные GIF, если они без звука)

Размер и формат изображения зависят от канала, в который отправляется сообщение:\
— В Telegram лучше использовать изображения до 5–8 MB. Telegram автоматически сжимает изображения и может изменить формат, если картинка слишком большая или нестандартной формы.\
— Во ВКонтакте допустим больший вес — до 10 MB (в рамках конструктора).

📌 Чтобы всё сработало стабильно во всех каналах, используйте изображения до 4 MB в формате JPG или PNG — это универсальный вариант.

3\. Дождитесь загрузки.\
Система покажет прогресс‑бар и имя файла. После успешной загрузки появится превью изображения прямо внутри блока.

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/4151d1ea2fa55fc3ca499fd1787ed9a572ebb3c94044f6362adc2e99d8e91134.png)

Что можно сделать с изображением после загрузки

Когда картинка загружена, наведите курсор на превью (или тапните на неё в мобильной версии) — появится панель действий:

- 🔄 Заменить — загрузить новое изображение взамен текущего;
- ❌ Удалить — убрать изображение из блока;
- 👁 Просмотреть — открыть картинку в полном размере в модальном окне.

---

**Способ 2. Вставить URL**

Если изображение уже размещено в интернете (например, на Google Диске, Яндекс.Диске или вашем сайте), вы можете вставить прямую ссылку на файл — без загрузки вручную.

**Как вставить URL-изображение**

1\. Нажмите ссылку «Вставить по URL»\
2\.Вставьте ссылку на изображение.\
Ссылка должна вести непосредственно на файл, а не на страницу с ним.\
Примеры корректных ссылок:

- https://site.ru/image.jpg
- https://drive.google.com/uc?id=... (для Google Диска, в режиме «доступ по ссылке»)
- https://disk.yandex.ru/i/... (для Яндекс.Диска, в режиме «публичный доступ»)

3\. Нажмите «Сохранить».\
Если ссылка корректная — изображение загрузится и отобразится как превью.

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/dec366ebfcd0dd733e62b47db88b3685ad8287e4e9ede76641fd0a244950bebc.png)

⚠️ Что важно учитывать

- Ссылка должна быть публичной. Обязательно проверьте, чтобы изображение было доступно всем пользователям интернета, без авторизации.\
  Если у файла ограничен доступ (например, «только для меня» или «по паролю»), система не сможет загрузить изображение, и блок останется пустым.
- Проверьте предварительный просмотр.\
  Если после вставки картинки в блок не появилось превью, скорее всего изображение недоступно.

  ➟ Откройте ссылку в режиме инкогнито и убедитесь, что она загружается без входа в аккаунт.
- Поддерживаются форматы: .jpg, .png, .gif
- Не подойдут ссылки на HTML-страницы.

  Например: https://example.com/page?id=1 — это страница, а не файл. Нужна прямая ссылка, заканчивающаяся на .jpg, .png и т.п.

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/06589da6e704cb47dc68c56be169b47781f88de632e5e2029178b9991a7853a2.png)

📌 Рекомендации

- Для загрузки с Google Диска или Яндекс.Диска убедитесь, что файл открыт по ссылке для всех.
- Не используйте временные ссылки с ограниченным сроком действия .
- Если есть сомнения — лучше загрузите файл вручную через кнопку «Загрузить».

**Изменение URL изображения**

Если вы добавили изображение по ссылке, его можно в любой момент заменить, не удаляя весь блок.

1\. Наведите курсор на изображение (или тапните на него в мобильной версии).\
2\. Нажмите кнопку «Изменить URL»\
Откроется модальное окно с полем для новой ссылки.

3\. Введите новую ссылку и нажмите «Сохранить»\
Изображение обновится и заменится новым.

📌 Важно:

- Если превью не загружается после замены — проверьте, доступна ли ссылка публично (без авторизации).
- Система не показывает изображение, если оно закрыто для внешнего просмотра.

![](https://storage.yandexcloud.net/botman-knowledge-prod/kb/6aec5304d3ac9dc31d82ccf6/3b6601cfd861dfd6b8f5838310e9e47840a01b492048cbb085abd288b1d9e30b.png)

---

**Способ 3. Генерация изображения через AI**

Если у вас нет готовой картинки — не проблема.\
Вы можете создать уникальное изображение прямо внутри конструктора, используя встроенный AI‑генератор.

Это идеальный вариант, когда:

- нужно быстро получить иллюстрацию по сценарию (товар, обложка, концепт);
- хочется оригинального визуала под конкретный текст или шаг;
- нет подходящих картинок под рукой — или просто не хочется искать вручную.

**🚀 Преимущества AI‑генерации**

- Быстро. Картинка создаётся за 5–10 секунд по вашему описанию.
- Уникально. Изображение подбирается под вашу задачу — никто не увидит такое же.
- Без правовых рисков. Все сгенерированные изображения можно использовать в рамках сценария без лицензий.
- Встроено в платформу. Никаких внешних сервисов — всё генерируется прямо внутри блока «Картинка».
- Гибко. Вы можете уточнить стиль, цвет, настроение, композицию — всё через простой текстовый запрос.

📎 Подробную инструкцию с примерами и советами по работе с AI-генератором вы найдёте здесь: [Как пользоваться генерацией изображений через AI](https://docs.botman.pro/a/93-ai-generatsiya-teksta)

---

**Подпись под картинкой**

Под каждым изображением (независимо от способа загрузки — файл, URL или AI) можно добавить подпись. Это дополнительный текст, который отображается сразу под картинкой и помогает пояснить, уточнить или персонализировать сообщение.

**Что можно написать в подписи:**

- Краткий комментарий или пояснение: «Ваш заказ собран и передан в доставку»
- Переменные: Подпись может включать переменные (например, `{{first_name}}` `{{дата}}` `{{сумма}}` ), чтобы сделать сообщение персональным.
- ✍️ Форматирование: поддерживается базовое оформление:\
  \- жирный\
  \- курсив\
  \- подчёркивание\
  \- списки\
  \- ссылки

**Ограничения**

- Отображается только если включён соответствующий переключатель.
- Не может использоваться без картинки — в сценарии она визуально будет привязана именно к изображению.

**Если используете переменные**

Если вы подставляете переменные (например, имя пользователя, описание товара и т.д.), итоговая длина подписи может превысить допустимый лимит конкретного мессенджера (Telegram или ВКонтакте).

📌 В этом случае система автоматически обрежет текст до максимально разрешённого объёма — сообщение всё равно отправится, но часть текста может быть усечена.

Чтобы избежать неожиданного обрезания, старайтесь использовать лаконичные формулировки и проверяйте финальную длину, особенно при подстановке переменных.

**Кнопка под изображением**

К каждой картинке в шаге «Сообщение» можно добавить одну или несколько кнопок. Они отображаются сразу под изображением и подписью, и ведут пользователя к действию: открыть ссылку, перейти к другому шагу, отправить данные и т.д.

Как добавить кнопку

1. Нажмите «Добавить кнопку» — под картинкой появится новая строка.
2. Укажите текст кнопки (например, «Подробнее», «Купить», «Регистрация»).
3. Настройте действие: переход к шагу, открытие ссылки и т. п.

📌 Кнопка не связана напрямую с изображением, но визуально идёт в одном блоке и воспринимается как призыв к действию по смыслу картинки.

💡 Рекомендации

- Одна картинка = одно действие. Не перегружайте блок несколькими кнопками, если это не нужно. Лучше использовать чёткий и однозначный CTA.
- Соединяйте визуал и действие. Если на изображении — курс/товар/событие, кнопка должна логично продолжать мысль: «Купить», «Записаться», «Подробнее», «Скачать» и т. п.
- Проверяйте отображение на мобильных. Убедитесь, что кнопка читаема и не уходит за пределы экрана после подписи.
- Избегайте дублирования. Если под изображением уже есть ссылка в подписи — не повторяйте её в кнопке. Лучше использовать один, но яркий CTA.

---

**Частые вопросы**

**Почему изображение не отображается после вставки URL?**\
📌 Проверьте, доступна ли ссылка публично. Если изображение закрыто (например, в Google Диске с доступом «только для меня»), оно не загрузится. Откройте ссылку в режиме инкогнито — если не видно файла, бот тоже его не увидит.

**Картинка не отправляется в Telegram. Что делать?**\
Возможные причины:

- Изображение слишком большое (больше 10 MB),
- Нестандартное соотношение сторон (например, очень вытянутое),
- Проблема с форматом файла.

📌 Рекомендуется использовать .jpg или .png до 4 MB и стандартных размеров.

**Как сделать, чтобы у картинки была подпись и кнопка?**\
Добавьте изображение, укажите текст в поле «Подпись» и добавьте кнопку ниже. Подпись и кнопки отображаются вместе с картинкой и воспринимаются как единое сообщение.

**Можно ли использовать одну и ту же картинку в нескольких шагах?**\
Да! Просто загрузите её повторно или воспользуйтесь дублированием шага.