Salebot.pro
Search
K

Персонализированные изображения

В статье расскажем, как создавать персонализированные изображения и использовать их в блоках Чат-бота
Персонализированные изображения представляют собой иллюстрации, или миниатюры, которые могут быть специально адаптированы для каждого конкретного пользователя в рамках вашего проекта. Эта адаптация может включает в себя изменение некоторых характеристик (а именно текста) изображения для различных целей.
Например, созданное изображение может отображать конкретный номер пользователя для участия в розыгрыше, а также отображать имя пользователя в картинке для улучшения взаимодействия с аудиторией.
Пользователю с именем Андрей придет его личная картинка с предсказанием
Давайте попробуем создать изображения вместе.

Создание изображения

Для того чтобы создать персонализированное изображение перейдем на сайт NiftyImages, где необходимо зарегистрироваться:
Рис. 1. Регистрация
Для регистрации на сайте вам понадобится только почта.
После регистрации приступим к созданию персонализированного изображения. Для этого нажмите на "Create Image, Time or Data Source":
Рис. 2. Создание изображения
После чего вы перейдете в следующую вкладку, где необходимо выбрать создание персонализированных изображений:
Рис. 3. Тип - персонализированное изображение
Далее загрузите файл-изображение, которое хотите направлять сообщением в Чат-боте:
Рис. 4. Загрузка исходного изображения
В окне редактирования изображения вам необходимо проделать следующие действия:
  1. 1.
    Нажмите на "Add Elements"
  2. 2.
    Нажмите на "Merge Tag Layer"
Рис. 5. Добавляем переменную в изображение
Откроется окно с двумя переменными, где нас интересует переменная Name:
Рис. 6. Переменная name
При нажатии на кнопку появится ваше имя, которое вы ввели при регистрации на сайт:
Рис. 7. Отображение переменной на изображении
На данном этапе содержание текста НЕ НУЖНО редактировать, поскольку вместо него позднее с помощью Чат-бота будет отображаться необходимый нам текст.
Следующим шагом расположите прямоугольник для текста в любую необходимую область изображения таким образом, чтобы в последующем его содержание спокойно могло поместиться на картинке:
Рис. 8. Редактирование типа шрифта, его размера, цвета
Не пренебрегайте расположением и размером прямоугольника для текста, иначе позднее ваш текст попросту не поместится в изображение или не будет отображаться полностью.
Во вкладке, отмеченной на рис. 8 красным цветом, выберите при необходимости:
  1. 1.
    расположение текста относительно сторон прямоугольника: в середине, вверху, в правом краю, слева или снизу;
  2. 2.
    размер шрифта;
  3. 3.
    цвет шрифта;
  4. 4.
    тип шрифта и т.п.
После принятых настроек, нажмите сохранить и выберите название для изображения:
Рис. 9. Сохранение
Теперь нажмите "Submit":
Рис. 10
Вам откроется другая вкладка, где необходимо скопировать ссылку на изображение:
Рис. 11. Ссылка для блока в Чат-бот
Скопируйте ссылку так, как показано на рис. 11 - она нам понадобится для вставки в блок Чат-бота.
На этом работа с сайтом Nifty завершена. Переходим в ваш проект на Salebot.pro в конструктор воронок.

Отправка файла через Чат-бот

Перейдите в схему Чат-бота, через которую вы хотите направлять персонализированные изображения.
Для примера воспользуемся небольшой схемой Чат-бота, которая будет отправлять изображение в чате:
Рис. 12
Итак, во втором блоке мы спросим у клиента, как его зовут, а в настройках стрелки к третьему блоку отметим, что пользователь вводит данные и запишем его имя в переменную:
Рис. 13. Настройки стрелки
В последнем блоке добавим вложение, где тип должен быть ИЗОБРАЖЕНИЕ.
Рис. 14. Вложение с типом - изображение
В поле URL вложения вставим ссылку на наше изображение, которую мы скопировали с сайта Nifty:
Рис. 15. Значения, вводимые после ссылки с сайта Nifty
На рис. 15 видно, что после вставки ссылки с сайта мы прописали собственные параметры и текст для изображения, где переменная name - это вводимые пользователем значения в виде имени, а переменной cool присвоили значение в калькуляторе в этом же блоке:
Рис. 16. Переменная cool
Ссылка с сайта выглядит следующим образом:
https://img1.niftyimages.com/gmah/pugi/_-15?name=
Ссылка, в которую мы добавили переменные и текст:
https://img1.niftyimages.com/gmah/pugi/_-15?name=#{name}, ты сегодня крут на #{cool}
Тестируем Чат-бота:
Рис. 17. Тест чат-бота
Теперь попробуем воспользоваться следующей функцией:
random(low, high) - для получения случайного числа. На вход функция принимает 2 параметра: нижняя граница и верхняя. Пример: random(1,100) Результат выполнения: целое число в промежутке от 1 до 100
Рис. 18
Вместо переменной cool поставим переменную num, которой присвоим значение рандомного числа от 1 до 100:
Рис. 19. Переменная num
Сохраним и протестируем в боте:
Итак, наша функция рандомных чисел отлично работает.
Вы можете выбрать любую верхнюю и нижнюю границу функции, тем самым использовать ее для своих Чат-ботов.
Можно изменять шрифт изображения, отображения текста, его размер и т.п. в любой момент, вернувшись на сайт NiftyImages.
Сервис является платным. Максимальный лимит - 10 000 изображений для ОДНОГО зарегистрированного аккаунта.

Ошибки

  1. 1.
    При загрузке файла на сайте NiftyImages может всплыть ошибка поврежденности вашего файла (обычно такое окно появляется после регистрации на сайте):
  • В таком случае обновите страницу сайта и заново зайдите в свой аккаунт: тогда изображение должно загрузиться без проблем.
  1. 2.
    Бот отправляет ссылку, а не изображение:
В данном случае убедитесь, что вы установили тип вложения - изображение:
  1. 3.
    Бот направляет пустое сообщение, а не изображения:
Вернитесь в настройки блока с вложением: вероятнее всего, проблема в ссылке.
Необходимо убрать кавычку перед ссылкой (она может быть случайно скопирована вместе с ссылкой с сайта Nifty).