👉 Перейти в сервис Мы в VK

Изображение с персонализированным фото

Как подготовить шаблон изображения и добавлять на него текст подробно смотрите в разделе выше.

В этой статье мы сделаем бота, который будет создавать именные сертификаты с добавлением фотографии, полученной от пользователя или из профиля пользователя в VK/Telegram.

Для создания динамических изображений и сертификатов будем использовать сервис https://niftyimages.com/. Через него доступно создание 10 000 картинок на бесплатном аккаунте.

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

1. Подготовка картинок

1.1. Создайте изображение сертификата в формате png, предусмотрите, где будет размещено фото. Обратите внимание, зона, в которой должно появиться фото, должна быть прозрачной, т.к. сертификат будет «накладываться» следующим слоем поверх аватарки.

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

2. Подготовка шаблона в https://niftyimages.com/

Как автоматически вставлять в сертификат текст мы уже разобрали выше. Здесь расскажем о том, как добавить аватарку.

На этом этапе у вас должен быть открыт редактор вашего сертификата.

Т.е. вы уже выполнили следующие действия:

- выбрали пункт Personalized Image,

- нажали кнопку Select Image и загрузили ваш шаблон.

2.1. Сначала добавляем дежурную картинку-заглушку и размещаем ее в нужной части на изображении сертификата

Нажимаем кнопку Dynamic Image

Далее нажимаем Select image и выбираем заранее подготовленную картинку-заглушку на случай отсутствия фото в аккаунте пользователя.

Пример универсальной аватарки-заглушки:

Далее передвиньте картинку-заглушку в ту часть сертификата, где будет находиться фото пользователя.

2.2. Добавляем изображение сертификата png с прозрачным участком под фото.

Нажимаем кнопку Image

Далее нажимаем Select image и выбираем заранее подготовленное изображение сертификата.

2.3. Размещаем слои картинок в нужной последовательности:

  1. текстовые поля,

  2. сам сертификат с местом для фото,

  3. фото-заглушка.

Чтобы изменить последовательность слоев, передвигайте их в поле Layers.

Если всё сделано верно, то на шаблоне вашего сертификата и текст будет виден, и аватарка-заглушка будет в специально выделенной зоне под фото. Примерно так:

Когда всё готово, нажмите кнопку Save. В появившемся окне укажите любое название.

После сохранения у вас появится ссылка на этот сертификат. Нам нужна часть, указанная на скриншоте:

Пример со скриншота:

https://img1.niftyimages.com/ahgh/i5-i/e795?image=MERGE_TAG&name=MERGE_TAG

Проверяем подготовленный шаблона на конкретных значениях.

Вариант 1

Вы можете подставить вместо MERGE_TAG конкретные значения и перейти по получившейся ссылке - вас будет ждать ваш именной сертификат.

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

Вместо MERGE_TAG после image= можно подставить URL-адрес фото (ссылку на фото, которое хотите добавить). Вместо MERGE_TAG после name= подставьте имя, которое хотите добавить на сертификат. Затем перейдите по получившейся ссылке и увидите, что сертификат создался.

Вариант 2

Другой вариант проверить вид сертификата — это перейти в раздел Live Preview и подставлять ссылку на фото и текст в специально отведенных полях. Изменения сразу отобразятся в поле предварительного просмотра сертификата:

Теперь давайте автоматизируем выдачу сертификата через бот.

Настройка бота в VK

Создаем простой бот, который будет срабатывать на ключевое слово «Сертификат».

Фотографию будем запрашивать у пользователя и сохранять ссылку на фото в переменную, далее преобразуем ссылку через специальный сервис и выдадим сертификат. Настройку последних трех блоков (в нашем примере это шаг 4, шаг 13 и шаг 9) подробнее разбираем ниже:

Сохранить ссылку на фото (в нашем примере это шаг 4).

Действие «Сохранить ссылку на фото в переменную» находится в разделе «Сообщения»:

Укажите название переменной, в которую будет сохраняться ссылка. В нашем примере переменная называется «img».

Если используете в качестве фото аватарку из профиля VK, в блоке «Действие. Шаг 4» в разделе «Переменные пользователя» выберите опцию «Записать в переменную пользователя значение» и в поле «Значение» укажите {avatar}

Сама цепочка блоков в этом случае сократится (убираем сообщение с просьбой прислать фото):

Преобразовать ссылку на фото (в нашем примере это шаг 13).

Прежде чем выдавать сертификат с фото в текстовом сообщении от бота, нужно изменить ссылку на фото через дополнительный сервис.

1. Нужно авторизоваться в сервисе https://imgbb.com/login (можно через ВК)

2. Далее перейти сюда https://api.imgbb.com/

3. Получить API ключ, нажав кнопку «Get API key»

4. Скопировать полученный API ключ:

5. Добавить в боте действие «Запросы во вне» — «Отправить запрос на url» (в нашем примере это шаг 13).

Метод — POST

Адрес запроса: https://api.imgbb.com/1/upload

Параметры (тип полей везде «Поле»):

  • Поле — key; Значение — [скопированный из пункта 4 ключ]

  • Поле — image; Значение — {%img%}, т.е. переменная, в которую сохранили ссылку на фото.

Выдача сертификата (в нашем примере это шаг 9).

В блоке Сообщения добавляем вложение по ссылке:

Скопируйте ссылку с MERGE_TAG, которую мы получили в https://niftyimages.com/ после подготовки шаблона сертификата и вставьте ее в поле, как показано на картинке.

Теперь вместо MERGE_TAG поставляем переменные:

  • {%response.data.url%}, где будет ссылка на фото, измененная через imgbb,

  • {first_last_name}, которая будет автоматически подставлять имя и фамилию человека, которому будет отправляться сообщение.

Давайте протестируем

Тоже довольно просто :)

Применяйте и успехов в ваших проектах!

Настройка бота в Telegram

Создаем простой бот, который будет срабатывать на ключевое слово «Сертификат».

Фотографию будем запрашивать у пользователя и сохранять ссылку на фото в переменную:

Дополнение к настройке блока «Действие. Шаг 4»: действие «Сохранить ссылку на фото в переменную» находится в разделе «Сообщения»:

В блоке сообщения (в нашем примере это шаг 2) добавляем вложение по ссылке:

Здесь вместо MERGE_TAG мы поставили переменные:

  • {%img%}, в которую сохраняли ссылку на фото, и

  • {first_last_name}, которая будет автоматически подставлять имя и фамилию из профиля человека, которому будет отправляться сообщение.

Давайте протестируем

Пишем нашему боту слово «Сертификат»:

И получаем именной сертификат:

Вот так просто :)

Применяйте и успехов в ваших проектах!

Настройка TG бота. Добавление аватарки из Telegram-профиля пользователя

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

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

Для получения ссылки на фото из профиля пользователя будем обращаться к API Telergam, поэтому вам понадобится API Token вашего бота, который можно посмотреть в https://t.me/BotFather (если вы владелец бота).

Напишите боту BotFather команду /mybots, выберите нужного бота и нажмите на кнопку API Token.

Токен нам понадобится несколько раз при настройке блоков действия дальше.

Вы можете скопировать готовый шаблон. Вам останется только заменить в трех блоках слово TOKEN на реальный токен вашего бота и добавить новое вложение-изображение с вашей ссылкой на сертификат в niftyimages.

Разберем настройку бота на примере нашего шаблона

Создаем простой бот, который будет срабатывать на ключевое слово «Сертификат». Спрашиваем, какое фото будем добавлять (для варианта «Другое фото» подробно разобрали настройку бота выше. Если вы хотите использовать по умолчанию аватарку из профиля, пропускайте шаг 13 на картинке и после шага 1 переходите сразу к шагу 5.

Блок действие «Отправить запрос на url» здесь будет использовать API Token вашего Телеграм-бота. Его нужно будет добавлять вместо букв TOKEN в ссылках, которые мы даем в этой инструкции. Ссылки с вашим токеном вы добавляете в поле «Адрес запроса» в блок действие «Отправить запрос на url».

Создаем блок «Действие» и настраиваем его шаг 5, как в нашем шаблоне (см. скрин выше). Выбираем раздел «Запросы во вне»

  • Действие: Отправить запрос на url

  • Метод: GET

  • Адрес запроса: https://api.telegram.org/botTOKEN/getUserProfilePhotos (вместо “TOKEN” добавляете API Token вашего Телеграм бота, например, https://api.telegram.org/bot51406541325:AAfgjKvJ-UIfgjVhZ_xy2fjf4h_0Hfj2j_T/getUserProfilePhotos)

  • В какую переменную сохранить результат: r

  • Параметры:

    • Поле: user_id

    • Значение: {user_id}

    • Тип: Поле

Следующим шагом проверяем, видит ли наш бот хотя бы одну аватарку:

  • количество полученных фото {%r.result.total_count%} не равно 0 (в нашем примере шаг 6).

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

Создаем новое действие «Запрос во вне» (в нашем примере шаг 8), в котором будем получать ссылку на фото с аватаркой из профиля Телеграм.

  • Действие: Отправить запрос на url

  • Метод: GET

  • Адрес запроса: https://api.telegram.org/botTOKEN/getFile (вместо “TOKEN” добавляете API Token вашего Телеграм бота)

  • В какую переменную сохранить результат: r1

  • Параметры:

    • Поле: file_id

    • Значение: {%r.result.photos.0.2.file_id%}

    • Тип: Поле

Следующим шагом проверяем, получена ли ссылка на фото:

  • статус {%r1.ok%} не равно 0 (в нашем примере шаг 9).

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

Создаем новое действие «Записать в переменную пользователя значение» (в нашем примере шаг 12), в котором будем сохранять полученную ссылку на фото с аватаркой из профиля Телеграм в пользовательскую переменную “img” (создайте переменную, если не создавали ее ранее).

В поле «Значение» добавьте вот такую ссылку, снова заменив “TOKEN” на API Token вашего Телеграм-бота:

https://api.telegram.org/file/botTOKEN/{%r1.result.file_path%}

Последний шаг — настройка сообщения с выдачей именного сертификата с фото из аватарки Телеграм-профиля.

В блоке сообщения (в нашем примере это шаг 11) добавляем вложение по ссылке:

Ссылку на ваш шаблон в niftyimages мы получали ранее. Подробно разобрали здесь.

Здесь вместо MERGE_TAG добавляем переменные:

  • {%img%}, в которую сохраняли ссылку на фото, и

  • {first_last_name}, которая будет автоматически подставлять имя и фамилию из профиля человека, которому будет отправляться сообщение.

Давайте протестируем

Пишем нашему боту слово «Сертификат»:

Вот так просто :)

Применяйте и успехов в ваших проектах!

Last updated