# Генерация картинок
Что мы получим в конце, когда соберем бота :point\_down:
{% hint style="success" %}
Данный пример можно внедрять в **работающих ботов** и в уже **существующие сценарии ботов.**
{% endhint %}
## Подготовка к работе
Перед тем, как начать собирать бота, нам нужно:
1. Подготовить **шаблон картинки**, куда нужно будет писать текст. \
\
Размер картинки должен быть не более **1200х1200** пикселей. Если шаблон будет больше, система предложит уменьшить картинку автоматически.
2. Зарегистрироваться в сервисе, который будет вставлять текст в картинку
## Настройка разметки текста
Заходим на сайт под своим логином и паролем.
Нажимаем на "**Personalized Image**"
Далее нажимаем на "**Select Image**" и выбираем наш шаблон картинки.
Дожидаемся загрузки и приступаем к разметке текста.
#### Добавляем имя получателя на картинку.
Нажимаем на кнопку "**Merge Tag Layer**"
Далее нажимаем "**Use Merge Tag**"
У нас появляется наше имя на картинке и мы сможем его передвигать и редактировать
{% hint style="success" %}
Так мы можем добавлять **любые данные**, в которые мы будем загружать данные **из переменной в LeadConverter**.
{% endhint %}
Передвигаем наше имя на **нужное место.**
Нажимаем на кнопку "**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]
```
Функция запишет **дату получения** сертификата **в переменную,** и мы потом напишем ее на картинке.
Функция создана при помощи инструкции ниже 👇
{% embed url="" %}
Создаём переменную **name** и указываем в значении:
```
{{first_name}}%20{{last_name}}
```
В эту переменную мы записали "**Имя и Фамилию**", а вместо пробела, указали **%20.**
{% hint style="info" %}
На этапе разметки можно создать дополнительный тег для **Фамилии,** тогда этот шаг можно будет пропустить.
{% endhint %}
Создаём действие "Увеличить глобальную переменную **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}}
```
И у нас должна получиться вот такая ссылка :point\_down:
```
https://img1.niftyimages.com/mjoh/_uar/5cyi?date={{date}}&name={{name}}&number={{$number}}
```
{% hint style="info" %}
Для тех, кто не любит работать **с вебхуками**, может взять эту ссылку и вставить в "**Сообщение**" после блоков "Действие", и пользователь сможет получить сертификат по ссылке.
{% endhint %}
Теперь приступаем к настройке **вебхуков**.
Создаём блок "**Действие**" и выбираем пункт "**Отправить через вебхук**".
Начинаем заполнение
**URL-адрес обработчика**
```
https://leadconverter.ru/api/v1/ВАШ_ТОКЕН/file.uploadFromUrl
```
Метод запроса: **GET**
Нажимаем "**+Добавить параметр**" и копируем данные из таблицы ниже.
**Параметры:**
Параметр
Значение
file_url
Ваша ссылка на сертификат с переменными
file_type
IMAGE
Затем сохраняем результат в любую переменную. Рекомендуем создать переменную **`result`**, чтобы дальше по инструкции только копировать настройки.
Чтобы заполнить пункт "**ВАШ\_ТОКЕН**", воспользуйтесь инструкцией ниже.
{% embed url="" %}
Создаём еще один блок "**Действие**" и выбираем пункт "**Отправить через вебхук**".
Начинаем заполнение
**URL-адрес обработчика**
```
https://leadconverter.ru/api/v1/ВАШ_ТОКЕН/message.send
```
Метод запроса: **POST**
Нажимаем "**+Добавить параметр**" и копируем данные из таблицы ниже.
**Параметры:**
Параметр
Значение
subscriber_id
{{id}}
text
Ваш сертификат готов! Поздравляем!
file_uuid
{{result.file_uuid}}
Затем сохраняем результат в любую переменную. Рекомендуем создать переменную **`result`**, чтобы дальше по инструкции только копировать настройки.
{% hint style="warning" %}
На этом этапе вам нужно перенести все точь в точь. Останется изменить только текст "**ВАШ\_ТОКЕН**".
{% endhint %}
Чтобы заполнить пункт "**ВАШ\_ТОКЕН**", воспользуйтесь инструкцией ниже.
{% embed url="" %}
Что у нас получилось:
Приступаем к тестированию.
{% hint style="success" %}
Остались вопроосы? Задавайте их в нашу техподдержку!
Мы всегда придём на помощь :relaxed::point\_down:
{% endhint %}
{% content-ref url="../../kak-zadat-vopros-v-podderzhku" %}
[kak-zadat-vopros-v-podderzhku](https://docs.leadconverter.su/kak-zadat-vopros-v-podderzhku)
{% endcontent-ref %}
