Генерация картинок

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

Что мы получим в конце, когда соберем бота 👇

Данный пример можно внедрять в работающих ботов и в уже существующие сценарии ботов.

Подготовка к работе

Перед тем, как начать собирать бота, нам нужно:

1. Подготовить шаблон картинки, куда нужно будет писать текст. Размер картинки должен быть не более 1200х1200 пикселей. Если шаблон будет больше, система предложит уменьшить картинку автоматически.

2. Зарегистрироваться в сервисе, который будет вставлять текст в картинку https://niftyimages.com/

Настройка разметки текста

Заходим на сайт https://niftyimages.com/ под своим логином и паролем.

Нажимаем на "Personalized Image"

Далее нажимаем на "Select Image" и выбираем наш шаблон картинки.

Дожидаемся загрузки и приступаем к разметке текста.

Добавляем имя получателя на картинку.

Нажимаем на кнопку "Merge Tag Layer"

Далее нажимаем "Use Merge Tag"

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

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

Передвигаем наше имя на нужное место.

Нажимаем на кнопку "Font Options" в левой панели и приступаем к настройке текста.

1. Выбираем нужный шрифт текста

2. Выбираем размер шрифта

3. Выбираем цвет шрифта

4. Выбираем разметку текста

5. Выбираем положение текста в рамке

Чтобы посмотреть, как будет выглядеть имя и фамилия на одной строке, нажимаем на кнопку "Merge Block Text" и в поле "Design Value" пишем необходимое значение. Можно протестировать большие имена, фамилии и скорректировать положение на шаблоне.

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

Нажимаем на кнопку "Merge Tag Layer".

Нажимаем "Add or Edit Merge Tags".

Далее в Merge Tag - пишем date и потом всё время Next.

Повторяем процедуру и создаём тег с названием number.

Размещаем теги на картинке и редактируем стиль шрифта.

Нам осталось добавить текст описания, который будет находиться на картинке неизменно.

В левой панели нажимаем на "Text" и приступаем к редактированию текста.

Далее нажимаем на кнопку "Save" в правом верхнем углу экрана.

Выбираем вкладку "Image Tag" и копируем ссылку без кавычек.

Переходим к работе в LeadConverter.

Отправка сертификата через бота

В боте создаём блок "Сообщение" и добавляем текст:

Запускаю генерацию картинки

Создаём блок "Действие" и выбираем пункт "Установить переменной".

Создаём переменную date и в значение пишем функцию:

[date_calc]%d.%m.%G[/date_calc]

Функция запишет дату получения сертификата в переменную, и мы потом напишем ее на картинке.

Функция создана при помощи инструкции ниже 👇

date_calcLeadConverter

Создаём переменную name и указываем в значении:

{{first_name}}%20{{last_name}}

В эту переменную мы записали "Имя и Фамилию", а вместо пробела, указали %20.

На этапе разметки можно создать дополнительный тег для Фамилии, тогда этот шаг можно будет пропустить.

Создаём действие "Увеличить глобальную переменную number на 1".

Это действие будет считать количество выданных сертификатов.

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

Берем ссылку, которую мы копировали из прошлого шага, и редактируем ее.

https://img1.niftyimages.com/mjoh/_uar/5cyi?date=MERGE_TAG&name=MERGE_TAG&number=MERGE_TAG

Нам нужно все MERGE_TAG заменить на созданные переменные.

date={{date}}

name={{name}}

number={{$number}}

И у нас должна получиться вот такая ссылка 👇

https://img1.niftyimages.com/mjoh/_uar/5cyi?date={{date}}&name={{name}}&number={{$number}}

Для тех, кто не любит работать с вебхуками, может взять эту ссылку и вставить в "Сообщение" после блоков "Действие", и пользователь сможет получить сертификат по ссылке.

Теперь приступаем к настройке вебхуков.

Создаём блок "Действие" и выбираем пункт "Отправить через вебхук".

Начинаем заполнение

URL-адрес обработчика

https://leadconverter.ru/api/v1/ВАШ_ТОКЕН/file.uploadFromUrl

Метод запроса: GET

Нажимаем "+Добавить параметр" и копируем данные из таблицы ниже.

Параметры:

Параметр	Значение
file_url	Ваша ссылка на сертификат с переменными
file_type	IMAGE

Затем сохраняем результат в любую переменную. Рекомендуем создать переменную result, чтобы дальше по инструкции только копировать настройки.

Чтобы заполнить пункт "ВАШ_ТОКЕН", воспользуйтесь инструкцией ниже.

API МетодыLeadConverter

Создаём еще один блок "Действие" и выбираем пункт "Отправить через вебхук".

Начинаем заполнение

URL-адрес обработчика

https://leadconverter.ru/api/v1/ВАШ_ТОКЕН/message.send

Метод запроса: POST

Нажимаем "+Добавить параметр" и копируем данные из таблицы ниже.

Параметры:

Параметр	Значение
subscriber_id	{{id}}
text	Ваш сертификат готов! Поздравляем!
file_uuid	{{result.file_uuid}}

Затем сохраняем результат в любую переменную. Рекомендуем создать переменную result, чтобы дальше по инструкции только копировать настройки.

На этом этапе вам нужно перенести все точь в точь. Останется изменить только текст "ВАШ_ТОКЕН".

Чтобы заполнить пункт "ВАШ_ТОКЕН", воспользуйтесь инструкцией ниже.

API МетодыLeadConverter

Что у нас получилось:

Приступаем к тестированию.

Остались вопроосы? Задавайте их в нашу техподдержку!

Мы всегда придём на помощь ☺️👇

💟Как задать вопрос в поддержку?