Перейти к содержанию

Как отправить сообщение с превью#

В статье расскажем как воспользоваться пользовательским превью для передачи изображение большого или маленького размера вместе с ссылкой для перехода. Отправка сообщений с пользовательским превью осуществляется методом SendMessage.

Содержание#

Как отправить сообщение с пользовательским превью#

Для отправки пользовательско превью воспользуйтесь методом SendMessage или сформируйте превью в конструкторе в личном кабинете.

Отправка превью с помощью метода SendMessage#

С помощью метода SendMessage вы можете использовать отправку пользователького превью в своих интеграциях.

Для начала отправки пользовательского превью вам необходимо произвести подключение WhatsApp к сервису GREEN-API.

Сначала рассмотрим как работает метод с обычными текстовыми сообщениями.

    {
    "chatId": "1111111111@c.us",
    "message": "Привет, Иван Царевич"
    }

В теле запроса метода нам необходимо указать лишь номер получателя или чата чтобы передать текстовое сообщение.

Для того чтобы передать превью сайта необходимо добавить ссылку с http(s), в этом случае необходимо выбрать размер превью:

{
  "chatId": "1111111111@c.us",
  "message": "https://green-api.com\n\nДоброе утро",
  "linkPreview": true,
  "typePreview": "large"
}

К известным параметрам добавляются новые поля в виде "linkPreview": true - если поле не указано или не имеет значение true, то превью не будет формироваться. Также задаем размер превью параметрами small/large в поле "typePreview".

Для того чтобы отправить собственное превью есть несколько вариантов решения проблемы. Вы можете отправить превью по ссылке с вашего сайта или облачного хранилища, при этом ссылка должна вести на сам файл.

{
  "chatId": "1111111111@c.us",
  "message": "https://green-api.com\n\nДоброе утро",
  "linkPreview": true,
  "typePreview": "large",
  "customPreview": {
    "title": "Новое предложение",
    "description": "Скачайте у нас",
    "link": "https://green-api.com",
    "urlFile": "https://green-api.com/blog/assets/2025/whatsapp-adds-18-new-colors-to-chats/1.png"
  }
}
В данном случае у нас добавляется новое поле customPreview в котором необходимо заполнить поля:

  • "title" - Текстовое поле для оглавления превью
  • "description" - Текстовое альтернативное описание превью
  • "link": "https://green-api.com" - Ссылка на ваше превью, даже если в теле сообщения будет несколько ссылок превью будет вести на выбранную вами ссылку
  • "urlFile" - Ссылка на файл превью

Пользоваться методом очень просто, для отправки вам нужно определить размер превью. Для отправки картинок следует соблюдать следующие ограничения и правила.

Кроме этого вы можете загрузить свое изображение с помощью методом UploadFile, после чего получите ссылку для поля "urlFile", запрос будет выглядеть также как и в предыдущем случае, вам лишь нужно будет воспользоваться ссылкой из ответа метода UploadFile. 

{
  "chatId": "1111111111@c.us",
  "message": "https://green-api.com\n\nДоброе утро",
  "linkPreview": true,
  "typePreview": "large",
  "customPreview": {
    "title": "Новое предложение",
    "description": "Скачайте у нас",
    "link": "https://green-api.com",
    "urlFile": "https://do-mediaouts.com/e649e.jpeg"
  }
}

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

{
  "chatId": "1111111111@c.us",
  "message": "https://green-api.com \n Доброе утро!",
  "linkPreview": true,
  "typePreview": "small",
  "customPreview": {
    "title": "Новое предложение",
    "description": "Скачайте у нас",
    "link": "https://green-api.com",
    "jpegThumbnail": "/9j/4AAQSkZJRgABAQEA8ADwAAD/4QM4RXhd1gEg5nPvHmfWQm0Zt6df0yahHiEdTh9D6cR1Dcdz6ebk/
    ...
    uuqO51jH04j6H6WcfoNfoPQ36E59OfTn049X0fTmf//Z"
  }
}

В этом случае размер превью всегда будет маленьким, а в поле "jpegThumbnail" заносится сконвертированная картинка.

Для визуального восприятия логики работы метода можете обратиться к разделу Отправка превью с помощью конструктора в личном кабинете.

Для отправки превью следует учитывать основные правила и ограничения.

Отправка превью с помощью конструктора в личном кабинете#

Перейдите в личном кабинете на метод SendMessage или по ссылке конструкторе в личном кабинете.

Вы должны быть авторизированы в инстансе, для того чтобы подключиться и авторизовать инстанс читайте статью Подключение WhatsApp к сервису GREEN-API.

Общий вид конструктора в личном кабинете

В данном окне установите переключатели Отображать превью и описание ссылки и Пользовательское превью в режим включено.

Переключатели

Занесите данные в поля конструктора:

  • номер телефона или чата
  • текст сообщения, при этом укажите как минимум одну ссылку для перехода
  • идентификатор цитируемого сообщения - необязательный параметр и используется для ответа на предыдущие сообщения
  • выберите размер превью (по умолчанию генерируется маленькое)
  • заголовок - произовльный текст для заголовка изображения
  • описание - краткое описание превью
  • ссылка для перехода, она должна совпадать хотя бы с одной ссылкой из текста сообщения
  • загрузите изображение пользовательского превью по ссылке или с вашего устройства (в формате jpg размером до 100Кб)

После заполнения всех данных превью отобразится в окне предварительного просмотра.

Превью

Теперь вы можете отправить своё сообщение или продолжить редактирование.

В личном кабинете вы можете увидеть тело запроса метода SendMessage для отправки превью, а также пример запросов на языках программирования: Python, PHP, VBA, Delphi и даже CURL запрос.

В личном кабинете вы можете сформировать тела запроса для отправки:

  • Текстового сообщения
  • Текстового сообщения с превью
  • Текстового сообщения с пользовательским превью большого и маленького размера
  • Текстового сообщения с jpegThumbnail превью

Для отправки превью следует учитывать основные правила и ограничения.

Правила и ограничения по работе с пользовательским превью#

При отправки любых превью по ссылке должны соблюдаться следующие правила:

  • Ваш сайт должен быть доступен
  • Размер загружаемой страницы сайта должен быть менее 2МБ
  • Ваш сайт должен загружаться быстрее чем за 20 секунд
  • На сайте должен быть тег og:image в котором должна лежать картинка
  • Картинка так же должна быть доступна
  • Картинка должна быть поддерживаемого формата (jpg, png)
  • Картинка должна быть меньше 2Мб
  • Картинка должна загружаться быстрее чем за 20 секунд
  • Картинка должна иметь разрешение меньше 5000 px на одну из сторон
  • Картинка рекомендована быть в пропорциях отправляемого привью - для предсказуемого результата (Для большого превью используется квадратное соотношение сторон, а для маленького превью прямоугольное)

Для 100% предсказуемого результата пользовательского привью

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

Заключение#

Пользовательское превью - мощный визуальный инструмент для продвижения ваших продуктов клиентам.

Для отправки превью рекомендуем использовать маленькое превью с генерацией jpegThumbnail.
Также стоит отметить, что отправка сообщений с превью занимает больше времени, чем отправка текстовых сообщений.

В этой статье вы узнали как работать с пользовательскими превью. Для наглядности рекомендуем использовать конструктор превью в личном кабинете, в иных случаях использовать метод SendMessage в ваших интеграциях.